1

我目前正在实现相同的 kendoui 网格，如下所示： http ://demos.kendoui.c​​om/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();
    });

谢谢

4

4 回答 4

2

不确定我是否理解您的问题，因为 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。

于 2013-10-18T06:00:11.467 回答
1

您可以使用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 端）中的“高度”属性的情况下完成的。

对我来说很好。

于 2015-11-08T14:56:40.813 回答
0

移除高度：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" }
    ]
});
于 2014-06-24T14:03:44.983 回答
0

对我来说，删除scrollable就行了。如果只有一行，则网格很小，并且与行数一起增长到页面大小级别。无需设置高度。

于 2022-03-01T08:23:02.910 回答