Dynamic Scrolling Telerik MVC Grid

Question

I am trying to take off the pagination from a couple of Telerik MVC Grids that have a large amount of data loaded into them (upwards of 5000, probably more once they hit production). With our smaller grids, I would just take off the Pageable property(see code below) and the scrolling functionality just works.

With the larger grids I get a JSON error saying that the length of the string exceeds the value set on the maxJsonLength property. I updated the webconfig to be set to the max value as per this links suggestion but it still gave me the same error.

The version of Telerik that I am using is plain Telerik(not Kendo) and is the MVC version (main UI DLL is Telerik.Web.MVC, version 2012.2.801.340).

All documentation that I have found either points me to the new version of Kendo or a RadGrid, which is not included/supported in my version.

Is there a way to acheive this, either by loading it all at once like this does here, or creating a dynamically loading grid using the Telerik version I have, or am I out of luck? I am also open to suggestions for another way to achieve this, but the results have to be in a Grid of some sort.

Below is the basic code for what I have for all grids. The larger grids that I am having issues with have more columns than this one which help account for the JSON error.

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

Thanks in advance

But how would you slow down the grid? is there a Telerik property or some JQuery that can do this or force a staggered load? — Josh L, Apr 05 '16 at 20:43
Adding scroll virtualization would stagger this, an example is here: http://demos.telerik.com/aspnet-mvc/grid/virtualization-remote-data — drew, Apr 05 '16 at 20:53

drew · Accepted Answer · 2016-04-05T20:52:18.293

0

In the controller, I assume you have something like:

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

If you use the Newtonsoft package and change it to this, this should allow a larger amount of data through.

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

EDIT:

If the problem is too much data and you don't want paging, how about trying virtualization by adding:

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

You'll still need a page size, an example is here: http://demos.telerik.com/aspnet-mvc/grid/virtualization-remote-data

edited Apr 05 '16 at 20:52

answered Apr 05 '16 at 19:55

drew

1,312
8
20

I just tried this and I am still getting the same JSON error. – Josh L Apr 05 '16 at 20:42
This would be exactly what I need... except I don't have access to Kendo. Virtualization is only available in the new version (kendo) not the old version of Telerik that I have – Josh L Apr 06 '16 at 13:43

Dynamic Scrolling Telerik MVC Grid

1 Answers1