如何使用它的 ASP MVC Complete Wrapper 设置 KendoUI Grid 的高度 [英] How to set the height of KendoUI Grid with it's ASP MVC Complete Wrapper

问题描述

我正在使用 KendoUI Grid 及其 ASP MVC Complete Wrapper 库，但在 razor 代码中设置网格高度时遇到问题.我尝试设置 HTMLAttribute 但似乎不起作用.

I'm using KendoUI Grid with its ASP MVC Complete Wrapper library and I'm having problem setting the height of my grid in the razor code. I tried setting the HTMLAttribute but doesn't seems to work.

@(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"})  
  )

推荐答案

尝试以下操作:

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

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

The current setting won't work because Height is not a valid HTML attribute for the DIV element which the Kendo Grid is rendering.

这篇关于如何使用它的 ASP MVC Complete Wrapper 设置 KendoUI Grid 的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！