Geek Answers Handbook

How to set Kendo grid height to a fixed value when loading a page

I am trying to get a Kendo mesh with static height and width. There is absolutely no need to change the height and width when I have a page (what it is currently doing, due to variable size data). If the data is growing, I have to provide a scroll.

The problem is that when the page is first loaded using Data, the kendo grid does not set a fixed height and width. but if I resize the window, it will get this fixed height and provide a scroll option inside the Kendo Grid

So, I can set the height of the Kendo grid with a fixed value when it loads for the first time

Kendo Version: v2014.1.318

the 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>
+4
2

: -

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

Kendo . After Data Bound event Css Grid, Grid ​​ .

+4

, Grid 100%, , :

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

"-2" 1px .

+2

More articles:


All Articles