剑道ui网格自动高度答案

【问题标题】：Kendo ui grid auto height剑道ui网格自动高度
【发布时间】：2013-10-18 00:09:36
【问题描述】：

我目前正在实施相同的 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();
    });

谢谢

【问题讨论】：

标签： asp.net-mvc-4 kendo-ui kendo-grid

【解决方案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。

【讨论】：

【解决方案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;
}

这是在不使用网格声明中的 'height' 属性的情况下完成的（在 .js 端）。

对我来说很好。

【讨论】：

【解决方案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" }
    ]
});

【讨论】：

【解决方案4】：

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

【讨论】：