如何使用它的 ASP MVC Complete Wrapper 设置 KendoUI Grid 的高度

Posted 2023-05-07

【中文标题】如何使用它的 ASP MVC Complete Wrapper 设置 KendoUI Grid 的高度

【英文标题】：How to set the height of KendoUI Grid with it's ASP MVC Complete Wrapper

【发布时间】：2012-12-14 06:31:10

【问题描述】：

我将 KendoUI Grid 与它的 ASP MVC Complete Wrapper 库一起使用，但在剃刀代码中设置网格高度时遇到问题。我尝试设置 htmlAttribute 但似乎不起作用。

@(Html.Kendo().Grid<SoftInn.Data.Country>()
    .Name("grid-countries")
    .DataSource(datasource => datasource.Ajax()
                                .Model(model => model.Id(record => record.Id))
                                .Create(create => create.Action("Add", "Country"))
                                .Read(read => read.Action("GetAll", "Country"))
                                .Update(update => update.Action("Update", "Country"))
                                .Destroy(delete => delete.Action("Delete", "Country"))
                                .Events(events =>
                                            
                                                events.Sync("gridcountries_synchandler");
                                                events.Error("gridcountries_errorhandler");
                                            )
                                .PageSize(10)                                   
    )
    .Columns(columns =>
                
                    columns.Bound(r => r.Name);
                    columns.Bound(r => r.Currency);
                    columns.Bound(r => r.TimeZone);
                    columns.Command(command =>  command.Edit(); command.Destroy(); ).Width(170);
                )
    .ToolBar(toolbar =>
                 
                     toolbar.Create().Text("Add New Country");                            
                     toolbar.Custom().Text("Refresh").Url("#").HtmlAttributes(new  onclick = "window.refreshGrid($(this).parent().parent())", @class = "customRefreshButton" );

                     toolbar.Custom().Text("More").Url("#").HtmlAttributes(new  onclick = "window.toggleDisplay($('#grid-countries > .k-grouping-header'))", @class = "customToggleButton float-right" );                         
                 
    )
    .Editable(editable => editable.Mode(GridEditMode.InLine))
    .Pageable(pageable =>
                
                    pageable.Refresh(true);
                    pageable.PageSizes(true);
                )
    .Resizable(resize => resize.Columns(true))
    .Reorderable(reorder => reorder.Columns(true))
    .Sortable()
    .Scrollable()
    .Filterable()
    .Selectable()
    .ColumnMenu()
    .Groupable()
    .HtmlAttributes(new  Height = "400px")  
  )

【问题讨论】：

查看更多选项：***.com/questions/12955673/…

【参考方案1】：

尝试以下方法：

.HtmlAttributes(new  style = "height:400px" )  

当前设置不起作用，因为 Height 不是 Kendo Grid 正在呈现的 DIV 元素的有效 HTML 属性。

【参考方案2】：

我知道这个问题很老了，但它可能对其他人有帮助。

 .Scrollable(src => src.Height(230))

这样也能解决问题。