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

我不确定我是否理解您的问题，因为网格实际上有一个 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;
}

这是在不使用网格声明中的＆＃39; height＆＃39; 属性（在.js方面）完成的。

对我来说很好。

Answer 3

删除身高：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" }
    ]
});

剑道ui网格自动高度

3 个答案: