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

Posted 2023-05-07

【中文标题】如何在页面加载时将 Kendo 网格高度设置为固定值

【英文标题】：How to Set Kendo grid height to a fixed value on page load

【发布时间】：2014-11-20 00:52:44

【问题描述】：

我正在尝试获得具有静态高度和宽度的剑道网格。 当我翻页时，它绝对不能改变高度和宽度（由于数据大小可变，它目前正在这样做）。 如果数据增加，我应该提供滚动。

问题是当页面第一次加载数据时，剑道网格没有设置为固定的高度和宽度。 但是如果我调整窗口大小，它会获得固定高度并在 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>

【问题讨论】：

你能展示一些重现它的代码吗？

我已经编辑了帖子。现在它有了代码部分

【参考方案1】：

问题的答案是：-

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

将此添加到剑道网格将解决问题。 作为After Data Bound event，我们可以设置Grid的自定义Css属性，因为Grid动态高度设置在该事件之前。

【讨论】：

或者您可以在页面加载时调用 resize 方法：$("#ViewUnitContainerTracking").data("kendoGrid").resize()

这个答案对我有用，我已经投票了。谢谢@bhakti

【参考方案2】：

我正在动态执行此操作，将 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 的边框一个顶部和一个底部..

【参考方案3】：

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

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