Tuesday, December 2, 2014

How to Resize a grid to fit the browser window

/* Functions used to resize a grid to the browser window size
    Example Usage:
     $(window).resize(function () {
        resizeGrid('gvMedications', 300);
    });
*/
function ScreenHeight() {
    var myWidth = 0, myHeight = 0;
    if (typeof (window.innerWidth) == 'number') {
        //Non-IE
        myWidth = window.innerWidth;
        myHeight = window.innerHeight;
    } else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
        //IE 6+ in 'standards compliant mode'
        myWidth = document.documentElement.clientWidth;
        myHeight = document.documentElement.clientHeight;
    } else if (document.body && (document.body.clientWidth || document.body.clientHeight)) {
        //IE 4 compatible
        myWidth = document.body.clientWidth;
        myHeight = document.body.clientHeight;
    }
    return myHeight;
}
function resizeGrid(grid, padding) {
    //alert('resizing');
    var gridElement = $("#" + grid);
    var dataArea = gridElement.find(".k-grid-content");
    //var newHeight = gridElement.parent().innerHeight() - 100;
    //var diff = gridElement.innerHeight() - dataArea.innerHeight();
    //gridElement.height(newHeight);
    //dataArea.height(newHeight - diff);
    gridElement.height(ScreenHeight() - padding);
}

No comments:

Post a Comment