Asp.net mvc 4 剑道ui网格自动高度

我目前正在实施相同的kendoui网格，如下所示：

我能看到的问题是网格没有自动高度，如果记录小于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();
    });

---

谢谢

我不确定我是否理解您的问题，因为网格实际上有一个自动高度。如果在网格的定义中定义了一个属性，表示网格应该具有的像素数，那么无论它有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

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

您可以使用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端）

对我来说很好