How to Set Kendo grid height to a fixed value on page load

Question

I am trying to get a Kendo grid with a static height and width. It absolutely must not change height and width when I page (which it currently does, due to variably-sized data). If data increases ,I should provide the Scrolling.

The problem is that when the page is first loading with Data the kendo grid is not setting to that fixed height and width. but if I resize the window it is getting that fixed height and Providing the Scroll option inside Kendo Grid

So I can I set the height Of kendo Grid at a fixed value when it loads for first time

Kendo Version : v2014.1.318

Code:

$("#ViewUnitContainerTracking").kendoGrid({
                        sortable: true,
                        height:"280px",

                        columns: [
                            {
                                field: "UnitCode",
                                title: "Unit",
                                width: "15%"
                            },

                             {
                                 field: "UnitName",
                                 title: "Unit Name",
                                 width: "35%"
                             },

                            {
                                field: "Status",
                                title: "St",
                                width: "5%",
                                template: $("#TemplateViewUnitTrackingStatus").text()
                            },

                             {
                                 field: "StartDate",
                                 title: "Start Date",
                                 //template: $("#TemplateViewUnitTrackingStartDate").text(),
                                 width: "15%",
                                 //type: "date"
                             },

                              {
                                  field: "EndDate",
                                  title: "End Date",
                                  //template: $("#TemplateViewUnitTrackingEndDate").text(),
                                  width: "15%",
                                  //type: "date"
                              },

                             {
                                 field: "AssessPrgress",
                                 title: "%OAP",
                                 width: "10%"
                             },
                             {
                                 field: "Status",
                                 title: "Status",
                                 hidden: true
                             }

                        ],
                        editable: false,
                        resizable: false,
                        mobile: true,
                        dataSource: data.UnitList
                    });

Html Page:

<div id="ViewUnitContainerTracking" style="padding-top:10px;">
</div>

Answer 1

Answer of the problem is:-

dataBound: function() {
    $('#ViewUnitContainerTracking .k-grid-content').height(280);
}

Adding this to the Kendo grid will Solve the issue. As After Data Bound event we can set the custom Css property of the Grid as the Grid dynamic height is set previous to this event.

Answer 2

I m doing this dynamically, to set the Grid to 100%, means, minus bootstrap header and footer:

<script type="text/javascript">
    var gridElement = $("#serviceGrid");    
    function resizeGrid() {
        $("#serviceGrid").css("height", $(window).height() - $("#itheader").height() - $("#itfooter").height() - 2);
        gridElement.data("kendoGrid").resize();
    }    
    $(window).resize(function() {
        resizeGrid();
    });
</script>

The "- 2" is because of two 1px borders a top and bottom..

Answer 3

I find this more reliable option which works with locked/frozen columns as well. You can call below lines of code in window's resize event handler

var availableHeight = 500; // Calculate this value based on space available in grid's parent container 
$('#YOUR_GRID_ID').data('kendoGrid').setOptions({ height:  availableHeight})