在容器 Kendo 窗口调整大小时动态更改 Kendo Grid 行的高度

Posted 2023-05-07

【中文标题】在容器 Kendo 窗口调整大小时动态更改 Kendo Grid 行的高度

【英文标题】：Dynamically change height of rows of Kendo Grid on container Kendo window resize

【发布时间】：2013-08-22 15:50:42

【问题描述】：

我有两个问题。我在剑道窗口中包含的页面上有一个网格。我需要增加/减少网格行的大小以确保它填充窗口的整个高度。我在另一个页面上也有一个网格，它位于一个需要调整大小以适应文档窗口调整大小时其容器高度的 Div 内。

我有以下由 Kendo 支持人员提供的代码，但它并不能满足我的需要。它仅将网格设置为其容器的 100%。但这会在行下方留下空白。我希望没有空白，并且让行动态更改它们的高度，以便它们都适合其中一个的空间，并在计算有多少行适合另一个窗口的大小后动态更改 pageSize .

其中一个网格是前十名网格，另一个是所有员工网格的列表。

    $(window).resize(function() 
        var gridElement = $("#grid"),
            newHeight = gridElement.innerHeight(),
            otherElements = gridElement.children().not(".k-grid-content"),
            otherElementsHeight = 0;

        otherElements.each(function()
            otherElementsHeight += $(this).outerHeight();
        );

        gridElement.children(".k-grid-content").height(newHeight - otherElementsHeight);
    );

对文字数量感到抱歉，但我已经坚持了好几天了，想给你尽可能多的信息。

编辑：水平调整大小按预期开箱即用。为什么身高不一样？ :S

EDIT2：这是我用于我的网格的代码，它位于剑道窗口的内容部分

@(html.Kendo().Grid<DataModels.UI.OperatorPickRatesChartModel>()
                    .Name("topTenPickersChart")
                    .Columns(columns =>
                    
                        columns.Bound(b => b.operatorId).Title("Operator Id"); 
                        columns.Bound(b => b.averagePicksLastThirty).Title(" Average Picks Last Thirty");
                    )
                    .DataSource(dataSource => dataSource
                        .Ajax()
                        .Model(model => 
                            
                                model.Field(b => b.operatorId).Editable(false);
                                model.Field(b => b.averagePicksLastThirty).Editable(false);
                            )
                            .Read("operatorTopTenPickRates", "DashBoard")           
                        .Events(events => events.Error("error"))
                        .PageSize(10)                           
                    )
                    .Filterable()

)

【参考方案1】：

对于以下解决方案，您需要将表格放在使用 100% 区域（宽度和高度）的 HTML 元素中。为了得到它，我所做的是将 HTML 定义为：

<div id="container">
    <div id="grid"></div>
</div>

以及以下 CSS 样式：

#container 
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

不，一旦调整了窗口大小，我们需要做一些数学运算...

$(window).resize(function () 
    // Get container height
    var containerH = $("#container").height();
    // Get Grid height
    var tableH = grid.element.height();
    // Get Grid body height (the remaining is header and footer)
    var bodyH = grid.table.height();
    // The new height of the body is:
    grid.table.height(containerH - tableH + bodyH - 1);
);

JSFiddle 在这里展示它：http://jsfiddle.net/OnaBai/dB5CF/

编辑：如果您的网格在剑道窗口内，那么您必须：

您不需要 CSS 定义。 您不是在调整 $(window) 的大小，而是调整 kendoWindow 的大小，所以我将把该代码放在 Kendo Window resize 事件处理程序中。 您需要为剑道窗口设置初始宽度。

所以你的代码应该是这样的：

$("#container").kendoWindow(
    width : 400,
    resize: function (e) 
        console.log("resize", e);
        var containerH = $("#container").height();
        var tableH = grid.element.height();
        var bodyH = grid.table.height();
        grid.table.height(containerH - tableH + bodyH - 1);
    
);

var grid = $("#grid").kendoGrid(
    dataSource: 
        data    : createRandomData(100),
        pageSize: 10,
        schema  : 
            model: 
                fields: 
                    Id       :  type: 'number' ,
                    FirstName:  type: 'string' ,
                    LastName :  type: 'string' ,
                    City     :  type: 'string' 
                
            
        
    ,
    editable  : false,
    pageable  : true,
    columns   : [
         field: "FirstName", width: 90, title: "First Name" ,
         field: "LastName", width: 90, title: "Last Name" ,
         field: "City", width: 100 
    ]
).data("kendoGrid");

还有修改后的 JS Fiddle：http://jsfiddle.net/OnaBai/dB5CF/2/

【讨论】：

嗨。这在您的 JSFiddle 中运行良好。但它似乎不适用于我的 :( 你试过在剑道窗口中这样做吗？网格表的大小似乎在不断增长。

在我的回答中检查 EDIT。

在我从网格中删除“Scrollable(true)”后，这对我来说非常有效。这真的搞砸了这个功能。我现在正在调查的一件奇怪的事情是：在您的示例中，当窗口调整大小时，列标题保持相同大小，但在我的示例中，它们像行一样扩展和收缩。为什么会这样？非常感谢您到目前为止的时间 btw :) 编辑：我的网格代码现在在我的原始帖子中

更新：这只发生在 IE 中而不是 Chrome 中：S 虽然 API 或谷歌中没有任何东西真正帮助我。任何想法如何阻止这种情况在 IE 中发生？

可能在生成的 HTML 上有所不同。我应该看一下 IE 的 HTML，看看是否可以找到两者的解决方案。