动态更改容器上Kendo网格行的高度Kendo窗口的大小

Dynamically change height of rows of Kendo Grid on container Kendo window resize

本文关键字：Kendo 高度 窗口 网格 动态      更新时间：2023-09-26

我有两个问题。我在一个包含在剑道窗口中的页面上有一个网格。我需要增加/减少网格行的大小，以确保它填充整个窗口的高度。我在另一个页面上也有一个网格，它就在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

编辑2：这是我在网格中使用的代码，它位于剑道窗口的内容部分中

@(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()

)

对于以下解决方案，您需要将表放在使用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/

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

  1. 您不需要CSS定义
  2. 您不是在调整$(window)的大小，而是在调整kendoWindow的大小，所以我将把代码放在KendoWindowresize事件处理程序中
  3. 你需要为剑道窗口设置一个初始宽度

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

$("#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/

相关文章：