Question

我正在尝试使用静态高度和宽度的Kendo网格。我绝对不能改变页面的高度和宽度（由于数据大小不同，它当前就是这样）。如果数据增加，我应该提供滚动。

问题是当页面首次加载数据时，剑道网格没有设置为固定的高度和宽度。但如果我调整窗口大小，它将获得固定高度并在Kendo Grid中提供Scroll选项

所以我可以在第一次加载时将kendo Grid的高度设置为固定值

剑道版：v2014.1.318

代码：

$("#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页面：

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

Answer 1

问题的答案是： -

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

将此添加到Kendo网格将解决此问题。在数据绑定事件之后，我们可以设置网格的自定义Css属性，因为在此事件之前设置了网格动态高度。

Answer 2

我动态执行此操作，将Grid设置为100％，表示减去bootstrap页眉和页脚：

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

Answer 3

我发现此更可靠的选项也适用于锁定/冻结列。您可以在窗口的调整大小事件处理程序中调用以下代码行

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

如何在页面加载时将Kendo网格高度设置为固定值

3 个答案: