How to set the height of KendoUI Grid with it's ASP MVC Complete Wrapper

问题

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

回答1:

Try the following:

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

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

回答2:

I know the question is very old but it may help others.

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

That will do the trick as well.

来源：https://stackoverflow.com/questions/14078875/how-to-set-the-height-of-kendoui-grid-with-its-asp-mvc-complete-wrapper

标签

kendo-ui