kendo freezed(locked) grid height

Question

We are using a grid with a few elements as locked. We have set minimum and maximum height of the grid using css.

.k-grid-content {
    max-height: 400px;
    min-height: 0px;
  }

We are facing issue setting the height of the locked grid. If we don't set height of grid, a number of rows on the locked side get whitened at the bottom. So how do we dynamically set the height of grid?

This is what we have on Onbound event

var grid = e.sender;
var lockedContent = grid.wrapper.children(".k-grid-content-locked")
var content = grid.wrapper.children(".k-grid-content");

if (content[0] && (content[0].scrollWidth == content[0].clientWidth))
    lockedContent.height(content.height());
else
    lockedContent.height(content.height()-16);
//16 is near to horizontal scroll height
grid.resize();

This is a hack and it is not working perfectly as in grouping. We have gone through this link http://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/Layout/change-grid-height-when-using-frozen-columns But it doesn't work as it assumes no height set on grid at all.

Can some one please provide the right solution?

Answer 1

I have prepared a dojo for you to try out to see if that works for your scenario

http://dojo.telerik.com/eSava/2

All I have done is created a function that does all the grunt work for you.

    function initializeGrid(options)
{
    if(options === null || options === undefined)
    {
        options = {
            size: 0.55,
            gridContentCss: ".k-grid-content",
            gridLockedContentCss: ".k-grid-content-locked",
            gridsToResize:[]
        };
    }


    var windowHeight = $(window).height() * options.size;

    if(options.gridsToResize !== null && options.gridsToResize.length > 0 )
    {
        options.gridsToResize.forEach(function (item) {
            var gridContent = $('#' + item + ' > ' + options.gridContentCss);


            var lockedContent = $('#' + item + ' > ' + options.gridLockedContentCss);


          //  console.log(gridContent, lockedContent);

            gridContent.height(windowHeight);

            if (lockedContent !== null && lockedContent !== undefined) {
                lockedContent.height(windowHeight);

            }
        }); 
    }
    else 
    {
        var gridContent = $(options.gridContentCss);
        var lockedContent = $(options.gridLockedContentCss);

        gridContent.height(windowHeight);

        if (lockedContent !== null && lockedContent !== undefined) {
            lockedContent.height(windowHeight);

        }
    }

    $(window).resize(function () {
        ResizeGrid(options);
    });

}

in it's default state when this is called it will resize all grids to 55% of the windows height.

but if you want to apply different sizing rules you can by providing a simple variable like so:

 var gridResize = {
            size: 0.4, 
             gridContentCss: ".k-grid-content",
            gridLockedContentCss: ".k-grid-content-locked",
            gridsToResize:['grid']
          }


initializeGrid(gridResize); 

so in the above example it will override the default and resize the grid to 40% of the available screen size. In addition it will only resize the control with the id of grid. So if you had multiple grids on the screen at once then the function will them alone and preserve there heights.

Any issues let me know.