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>

Smocking

Could you show some code that reproduces it? – Poisoning

I have Edited the post. Now it is having the code part – Smocking

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.

Smocking

Or you can just call the resize method on page load: $("#ViewUnitContainerTracking").data("kendoGrid").resize() – Metathesize

this answer is worked for me and I have given vote for it. thank you @Smocking – Sallysallyann

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..

Jillion

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})

Basketwork