Kendo ui 網格自動高度

Question

我目前正在實施相同的 kendoui 網格，如下所示： http://demos.kendoui.com/web/grid/index.html

我能看到的問題是網格沒有自動高度，如果記錄小於 10，網格仍處於相同高度。

無論如何我可以解決這個問題，因為當我們使用以前的版本時不會發生這個問題

我嘗試使用以下 javascript 但仍然無法正常工作：

function resizeGrid() {
        var gridElement = $("#grid");
        var dataArea = gridElement.find(".k-grid-content");

        var newGridHeight = $(document).height() - 350;
        var newDataAreaHeight = newGridHeight - 65;

        dataArea.height(newDataAreaHeight);
        gridElement.height(newGridHeight);

        $("#grid").data("kendoGrid").refresh();
    }

    $(window).resize(function () {
        resizeGrid();
    });

謝謝

Answer 1

不確定我是否理解您的問題，因為Grid實際上具有autoheight 。 如果在Grid的定義中定義了一個屬性，該屬性說明了網格應具有的像素數，則不管它有5或50條記錄，它將保持該高度。 如果實際需要更多空間，將添加滾動條，如果需要較少空間，則將顯示空白空間。

在問題中引用的示例中，嘗試：

$("#grid").kendoGrid({
    dataSource: {
        data    : createRandomData(20),
        pageSize: 10
    },
    height    : 500,
    groupable : true,
    sortable  : true,
    pageable  : {
        refresh  : true,
        pageSizes: true
    },
    columns   : [
        { field: "FirstName", width: 90, title: "First Name" } ,
        { field: "LastName", width: 90, title: "Last Name" } ,
        { width: 100, field: "City" } ,
        { field: "Title" } ,
        { field   : "BirthDate", title   : "Birth Date", template: '#= kendo.toString(BirthDate,"dd MMMM yyyy") #' } ,
        { width: 50, field: "Age" }
    ]
});

高度將為500px。

Answer 2

您可以使用css來繪制網格，以使其高度根據容器調整，並考慮周圍的其他元素：

#grid {
    /* chop the grid's height by 45px */
    height: calc(100% - 45px);
}

#grid .k-grid-content {
    /* chop the grid content's height by 25px */
    height: calc(100% - 25px) !important;
}

無需在網格聲明（在.js端）中使用'height'屬性即可完成此操作。

對我來說很好。

Answer 3

對我來說，刪除scrollable就可以了。 如果只有一行，則網格很小，並且會隨着行數一起增長到頁面大小級別。 無需高度設置。

Answer 4

去除高度：500

$("#grid").kendoGrid({
    dataSource: {
        data    : createRandomData(20),
        pageSize: 10
    },
    groupable : true,
    sortable  : true,
    pageable  : {
        refresh  : true,
        pageSizes: true
    },
    columns   : [
        { field: "FirstName", width: 90, title: "First Name" } ,
        { field: "LastName", width: 90, title: "Last Name" } ,
        { width: 100, field: "City" } ,
        { field: "Title" } ,
        { field   : "BirthDate", title   : "Birth Date", template: '#= kendo.toString(BirthDate,"dd MMMM yyyy") #' } ,
        { width: 50, field: "Age" }
    ]
});