为什么我的 Kendo Grid 一次只显示一行？答案

【问题标题】：Why is my Kendo Grid only showing one row at a time?为什么我的 Kendo Grid 一次只显示一行？
【发布时间】：2013-07-29 17:08:15
【问题描述】：

我的网格垂直收缩，一次只显示一行。它看起来像这样：

底部的灰色条，带有“1 - 2 of 2 items”的右侧也有寻呼机，该条下方有一个属于网格的大白色区域，与其他地方的灰色背景形成鲜明对比。 t 属于网格。

有点长，但这是我的网格定义，在有人需要半毫秒来询问代码之前：

@model VehicleMovementBatchIndexModel
@using Kendo.Mvc.UI
@using ParkPay.TheBridge.ViewModels
@using GridEditMode = Kendo.Mvc.UI.GridEditMode
@(Html.Kendo().Grid<VehicleMovementBatchIndexItem>()
                       .Name("index-grid")
                       .Columns(columns =>
                                    {
                                        columns.Bound(p => p.FileName).Title("File Name");
                                        columns.Bound(p => p.FileContentHash).Title("File Content MD5");
                                        columns.Bound(p => p.FileReportDate).Title("File Report Date").Format("{0:yyyy/MM/dd}").Width(180);
                                        columns.Bound(p => p.Imported).Title("Imported").Format("{0:yyyy/MM/dd}").Width(130);
                                        columns.Bound(p => p.ResultMessage).Title("Result").Width(110);
                                        columns.Bound(p => p.Remarks);
                                        columns.Command(cmd => cmd.Destroy().Text("Delete")).Width(100);
                                        columns.Command(cmd => cmd.Custom("Prepare").Click("PrepareBatch")).Width(90);
                                    })
                       .HtmlAttributes(new { style = "height: 480px;" })
                       .Editable(editable => editable.Mode(GridEditMode.InCell))
                                          .ToolBar(toolbar =>
                       {
                           toolbar.Save();
                       })
                       .Filterable()
                       .Pageable()
                       .Scrollable()
                       .Sortable()
                       .Resizable(resize => resize.Columns(true))
                       .Reorderable(reorder => reorder.Columns(true))
                       .DataSource(dataSource => dataSource
                                             .Ajax()
                                             .ServerOperation(false)
                                             .Batch(true)
                                             .PageSize(20)
                                             .Events(events => events.Error("kendoGridErrorHandler"))
                                             .Model(model => model.Id(p => p.Id))
                                             .Read(read => read.Action("Read", "VehicleMovementBatch"))
                                             .Destroy(destroy => destroy.Action("BatchDelete", "VehicleMovementBatch"))
                                             .Update(update => update.Action("BatchUpdate", "VehicleMovementBatch"))
                                   ))

【问题讨论】：

确保您的 css 不会覆盖 kendo 的样式。
我只有三个css文件，最后两个是剑道。
@ProfK 没关系 - 它仍然可能有冲突的风格。我知道默认的 MVC 样式表不能很好地与 kendo 样式表配合使用。
您是否附加了 CSS 检查器？您的示例代码中没有任何内容会导致此问题。没有某种演示页面，任何人都无法帮助您。

标签： asp.net-mvc kendo-ui telerik kendo-grid kendo-asp.net-mvc

【解决方案1】：

用不同的剑道皮肤试试？
检查是否使用相同的顺序来包含 css 和 js 文件。有时文件顺序错误或两次添加 jquery 可能会给出意想不到的结果。请参阅此以获取帮助http://docs.kendoui.com/getting-started/introduction
您可能还想尝试不同的 js 文件组合。例如特定于网格 kendo.grid.js 或 kendo.all.min.js 等
如果显示任何 javascript 错误，请查看 chrome 中的控制台。或者对单击 chrome 并检查元素以查看其 css。

【讨论】：

【解决方案2】：

你能试试下面的代码sn-p吗？

方法一：

请使用以下代码 sn-p 更新“.scrollable()”代码。

.Scrollable(scrolling => scrolling.Enabled(true).Height(480))

方法二：

请尝试以下代码。如果此代码有效，则您的第三个 CSS 文件会影响此网格，否则不会。

.HtmlAttributes(new { style = "height: 480px !important;" })

如果有任何问题，请告诉我。

【讨论】：