如何使用它的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库，并且在用剃刀代码设置网格高度时遇到问题.我尝试设置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网格正在渲染的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屋！