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

在网格中，您可以通过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 eg 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 2

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

<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;
    }
}

Answer 3

我能够通过在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 4

从网格移除高度属性。样本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 5

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

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

5 个答案: