动态滚动 Telerik MVC 网格

Question

我正在尝试从加载大量数据（超过 5000 个，一旦投入生产可能更多）的几个 Telerik MVC 网格中取消分页。使用我们较小的网格，我只需去掉 Pageable 属性（见下面的代码），滚动功能就可以工作了。

对于较大的网格，我收到一个 JSON 错误，指出字符串的长度超过了 maxJsonLength 属性上设置的值。我根据links 的建议更新了 webconfig 以设置为最大值，但它仍然给了我同样的错误。

我使用的 Telerik 版本是普通 Telerik（不是 Kendo），是 MVC 版本（主 UI DLL 是 Telerik.Web.MVC，版本 2012.2.801.340）。

我找到的所有文档要么指向新版本的 Kendo，要么指向我的版本中不包含/支持的 RadGrid。

有没有办法实现这一点，或者像here 那样一次加载它，或者使用我拥有的 Telerik 版本创建一个动态加载网格，或者我不走运？我也愿意接受另一种方法来实现这一点的建议，但结果必须在某种网格中。

以下是我所有网格的基本代码。我遇到问题的较大网格的列比这个多，这有助于解决 JSON 错误。

@(Html.Telerik().Grid<ApportionmentCode>()
                .DataBinding(dataBinding => dataBinding.Ajax().Select("AjaxGetAppCodes", "AppCode"))
                .Name("Grid")
                .Columns(columns =>
                {
                    columns.Bound(o => o.Id)
                           .Title("ID")
                           .Width(50)
                           .HtmlAttributes(new { @class = "text-center" })
                           .Hidden();
                    columns.Bound(o => o.Code)
                           .Title("AppCode")
                           .Width(90)
                           .HtmlAttributes(new { @class = "text-center" });
                    columns.Bound(o => o.Description)
                           .Title("Description")
                           .HtmlAttributes(new { style = "min-width: 200px;" })
                           .ClientTemplate("<span class=\"clip tooltip\"><#= Description #></span>");
                    columns.Command(commands =>
                    {
                        commands.Custom("edit")
                                .Text("Edit")
                                .ButtonType(GridButtonType.Image)
                                .Action("Edit", "AppCode")
                                .ImageHtmlAttributes(new { @class = "t-edit", title = "Edit" })
                                .DataRouteValues(route => route.Add(o => o.Id));
                    })
                    .Width(78)
                    .HtmlAttributes(new { @class = "nowrap" })
                    .IncludeInContextMenu(false);
                })
                .ToolBar(commands => commands.Custom()
                                             .Text("Add")
                                             .Action("Create", "AppCode", Request.GetRouteValues())
                                             .ButtonType(GridButtonType.ImageAndText)
                                             .ImageHtmlAttributes(new { @class = "t-add" })
                                             .HtmlAttributes(new { @class = "addButton" }))
                .Filterable()
                .ClientEvents(events =>
                                {
                                    events.OnDataBound("onDataBound");
                                    events.OnComplete("AddGridFilter");
                                    events.OnLoad("OnGridLoad");
                                })
                .ColumnContextMenu()
                .Sortable()
                .Pageable(paging => paging.PageSize(20).Style(GridPagerStyles.NextPreviousAndNumeric).Position(GridPagerPosition.Bottom)) //When removed, this is the line that causes the JSON error
                .Resizable(resizing => resizing.Columns(true))
                .Scrollable(a => a.Height("auto")))

提前致谢

Answer 1

在控制器中，我假设你有类似的东西：

DataSourceResult result = model.ToDataSourceResult(request);
return Json(result, JsonRequestBehavior.AllowGet);

如果您使用 Newtonsoft 包并将其更改为这个，这应该允许更大量的数据通过。

DataSourceResult result = model.ToDataSourceResult(request);
var json = Newtonsoft.Json.JsonConvert.SerializeObject(result);
return Content(json, "text/json");

编辑：

如果问题是数据太多，又不想分页，不妨试试虚拟化添加：

.Scrollable(scrollable => scrollable.Virtual(true))

你仍然需要一个页面大小，一个例子在这里：http://demos.telerik.com/aspnet-mvc/grid/virtualization-remote-data