设置 Kendo 网格高度以匹配其容器

Question

我有一个剑道网格：

<section class="main-window">

    @model IEnumerable<SustIMS.Models.ModelTest>

    <div class="clear-both">

        <div class="field-value" style="height: 30px; border-bottom: 1px solid black">

        </div>

        <div id="datagrid">
            @(Html.Kendo().Grid(Model)
                .Name("datagrid_Concessoes")
                .Columns(columns =>
                {
                    columns.Bound(c => c.Id).Width(70);
                    columns.Bound(c => c.Code);
                    columns.Bound(c => c.Description);
                    columns.Bound(c => c.CreationDate);
                    columns.Bound(c => c.CreationUser);
                })
                .Scrollable()
                .Sortable()
                .Selectable()
                .Pageable(pageable => pageable
                    .Refresh(true)
                    .PageSizes(true)
                    .ButtonCount(5))
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .Read(read => read.Action("GetAutoEstradas", "MasterData"))
                )
            )
        </div>

    </div>
</section>

这是 CSS 部分：

.main-window
{
    border: 2px solid gray;
    border-radius: 2px;
    width: 95%; height: 70%;
    background-color: White;
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    box-sizing: border-box;
}

我希望 Kendo 网格具有其容器的高度。我试过了

.Scrollable(s => s.Height(200))

但它只接受像素值，而不是百分比值。

如何设置 Kendo 网格以适合其容器 div/section？

PS：我检查了this question，但没有找到适合我的解决方案

Answer 1

删除.Scrollable() 方法。 Scrollable() 在网格上强制固定高度。

Answer 2

我可以通过在 onDataBound 事件处理程序中设置高度来使其工作，如下所示：

    <div id="datagrid">
@(Html.Kendo().Grid<Model>()
                    .Name("datagrid_Concessoes")
                    .Columns(columns =>
                    {
                        columns.Bound(c => c.Id).Width(70);
                        columns.Bound(c => c.Code);
                        columns.Bound(c => c.Description);
                        columns.Bound(c => c.CreationDate);
                        columns.Bound(c => c.CreationUser);
                    })
                    .Scrollable()
                    .Sortable()
                    .Selectable()
                    .Pageable(pageable => pageable
                        .Refresh(true)
                        .PageSizes(true)
                        .ButtonCount(5))
                    .DataSource(dataSource => dataSource
                        .Ajax()
                        .Read(read => read.Action("GetAutoEstradas", "MasterData"))
                    )
                    .Events(events => events.DataBound("grid1_onDataBound"))

)

function grid1_onDataBound(e) {
    $("#datagrid .k-grid-content").attr("style", "height: auto");     
}

Answer 3

从网格中删除高度属性。示例 GridID = #grid

将 DataBound 事件添加到网格；

Events(j=>j.DataBound("DataBound"))

添加CSS；

html, body { margin:0; padding:0; height:100%; }
#grid { height: 100%; }
#outerWrapper{ background-color: red; overflow: hidden; }
.k-grid td { white-space: nowrap; overflow: hidden; }

添加 Javascript；

function resizeGrid() {
     $(".k-grid-content").css({ height: $(".k-grid-content")[0].scrollHeight }); 
}

setTimeout(function () {
    resizeGrid();
}, 150);

我有 10 行网格，网格内的内容有一个计算好的高度。

Answer 4

在网格中，您可以通过 htmlattributes 部分设置高度，如下所示：

.HtmlAttributes(new { style = "height:600px;" })

或

.HtmlAttributes(new { class= "main-window" })

在我的网格上对此进行了测试，这应该适合你：

$(document).ready(function () {

  //Get the current window height
  var windowHeight = $(window).height(); 

  //record the value of the height to ensure it is showing correctly. 

  console.log("Original Height" + windowHeight);

  //multiply this height by a percentage e.g. 70% of the window height
  windowHeight = windowHeight * 0.7;

  //record the new modified height
  console.log("Modified Height" + windowHeight);

  //find my grid and the grid content and set the height of it to the new percentage 
  $("#baseGrid .k-grid-content").height(windowHeight);

});

Answer 5

我从上面的 David Shorthose 中得出我的解决方案。当窗口调整大小时，我还需要调整网格的大小。我的页面还有一个 225 像素的页眉和页脚部分，所以我将其减去而不是使用百分比。这是我添加到页面的脚本：

<script>
$(function () {
   resizeGrid();
});
$(window.onresize = function () {
   resizeGrid();
})
function resizeGrid() {
    $("#gridname").height($(window).height() - @Settings.TopBottomMarginHeight);
}
</script>

我将 225px 移到一个设置类中以便于重复使用，如下所示：

namespace Website
{
    public static partial class Settings
    {
        public static int TopBottomMarginHeight => 225;
    }
}