在容器Kendo窗口調整大小時動態更改Kendo Grid行的高度

Question

我有兩個問題。 我在劍道窗口內的頁面上有一個網格。 我需要增加/減少網格行的大小，以確保它填滿窗口的整個高度。 我在另一個頁面上也有一個網格，該頁面僅位於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：這是我在網格中使用的代碼，它位於kendo窗口的content部分中

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

）

Answer 1

對於以下解決方案，您需要將表格包含在HTML元素內，該元素使用100％的面積（寬度和高度）。 為了得到它，我要做的就是將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的大小，因此我會將代碼放入Kendo Window resize事件處理程序中。
3. 您需要為Kendo窗口設置初始寬度。

因此，您的代碼應類似於：

$("#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小提琴在這里： http : //jsfiddle.net/OnaBai/dB5CF/2/