virtual scrolling still results in "JSON - The length of the string exceeds the value set on the maxJsonLength property" error

[Corey Thompson]

I've been using EJ Grid for searches against our database. It's worked great until recently when I started getting "Error during serialization or deserialization using the JSON JavaScriptSerializer. The length of the string exceeds the value set on the maxJsonLength property." errors.  The client has a requirement of "no paging if possible" so I tried using the virtual scroller, as suggested here:

https://www.syncfusion.com/kb/3063/script-error-throws-for-exceeding-maxjson-length-while-performing-serialization-or-deserialization

But it still gives me the same error. 

Here's my code:

View

            <div class="row">

                <div class="col-lg-12">

                    <div class="grid-container">

                        @(Html.EJ().Grid<CSCode.Models.VendorSearchResult>("pifLocationSearchResults")

                            .Datasource((IEnumerable<object>)Model.VendorList)

                            .AllowScrolling()

                            .ScrollSettings(scroll =>

                            {

                                scroll.Height(300).AllowVirtualScrolling().Width("auto").

                                    VirtualScrollMode(VirtualScrollMode.Normal);

                            })

                            .RowTemplate("#templateData")

                            .Columns(col =>

                            {

                                col.HeaderText("").Width(20).Add();

                                col.HeaderText("DETAILS").Add();

                            })

                        )

                    </div>

                    @Html.HiddenFor(m => m.SelectedId)

                    @Html.ValidationMessageFor(m => m.SelectedId, null, new { @class = "alert alert-block alert-danger" })

                </div>

            </div>

<script id="templateData" type="text/x-jsrender">

    <tr class="table table-pif">

        <td style="text-align:center;" class="td-selection mobile">

            <input type="radio" name="selectedVendor" value="{{:VendorId}}" onclick="setHiddenSelectedValue('{{:VendorId}}')" />

        </td>

        <td class="">

            <table border="0" style="width:100%">

                <tr>

                    <td class="">

                        <label class="control-label">Name:</label>

                    </td>

                    <td class="">

                        <a rel='nofollow' href="#">{{:VendorName}}</a>

                    </td>

                    <td class="">

                        <label class="control-label">City/State:</label>

                    </td>

                    <td class="">

                        {{:Address.City}}, {{:Address.State}}

                    </td>

                </tr>

                <tr>

                    <td class="">

                        <label class="control-label">Address:</label>

                    </td>

                    <td class="">

                        {{:Address.Address}}

                    </td>

                    <td class="">

                        <label class="control-label">Distance:</label>

                    </td>

                    <td class="">

                        {{:Distance}}

                    </td>

                </tr>

                <tr>

                    <td colspan="4"></td>

                </tr>

            </table>

        </td>

    </tr>

</script>

Controller

        [ChildActionOnly]

        public ActionResult _LocationSearchResults(WizardViewModel model)

        {

            var viewModel = model.CurrentStep;

            if (viewModel.VendorList == null) ///TODO: this is probably not allowing it to ever update

            {

                viewModel.VendorList = _vendorRepository.VendorSearch(viewModel.SearchRadius, viewModel.LocationName, viewModel.LocationCity, viewModel.LocationState, viewModel.LocationZip, viewModel.IsInOffice, "Program Location", viewModel.IsSearchLocal, viewModel.SpeakerCounter);

            }

            return PartialView("_LocationSearchResults", viewModel);

        }

What I don't see is how the Virtual Scroller can help if there don't seem to be any calls made back to the database. It seems to only pull the data once, which is what SEEMS to be the issue. Some of these searches can produce as many as 10,000 records.

Can you guys help me out?

[Venkatesh Ayothi Raman]

Hi Corey, 

Thanks for contacting Syncfusion support. 

Normally the reported issue happens when we bind the large data source to Grid.  So we suggest you to use URL adaptor to achieve on-demand data loading concept in order to resolve this issue.  

With UrlAdaptor, only data for the current page in grid will be retrieved from server side and so “serialization issue for large data” will be resolved. 

@Note: Virtual scrolling feature is not supported for Row template. So you can use default paging functionality in Grid 

Please refer the following code example to bind data using Urladaptor 

Code example: 

<GRID> 

@(Html.EJ().Grid<SyncfusionMvcApplication7.Models.C30000Records>("Grid") 

                    .Datasource(ds => ds.URL(@Url.Action("DataSource")).Adaptor(AdaptorType.UrlAdaptor)) //URL Adaptor 

            .AllowScrolling() 

            .AllowSorting() 

            .ScrollSettings(scroll => 

            { 

                scroll.AllowVirtualScrolling().Height(300). 

                    VirtualScrollMode(VirtualScrollMode.Normal); 

            }) 

                 

                    .Columns(col => 

                    { 

                        col.Field("CustomerID").IsPrimaryKey(true).Add(); 

                        col.Field("CompanyName").Add(); 

                        col.Field("City").Add(); 

                        col.Field("Address").Add(); 

                                        }) 

) 

 

<Controller> 

public IEnumerable OrderData = new NORTHWNDEntities().C30000Records.ToList(); 

         

        public ActionResult DataSource(DataManager dm) 

        { 

            IEnumerable data = OrderData; 

            DataOperations operation = new DataOperations(); 

            if (dm.Sorted != null && dm.Sorted.Count > 0) //Sorting 

            { 

                data = operation.PerformSorting(data, dm.Sorted); 

            } 

            if (dm.Where != null && dm.Where.Count > 0) //Filtering 

            { 

                data = operation.PerformWhereFilter(data, dm.Where, dm.Where[0].Operator); 

            } 

            int count = data.AsQueryable().Count(); 

            if (dm.Skip != 0) 

            { 

                data = operation.PerformSkip(data, dm.Skip); 

            } 

            if (dm.Take != 0) 

            { 

                data = operation.PerformTake(data, dm.Take); 

            } 

            return Json(new { result = data, count = count },JsonRequestBehavior.AllowGet); 

        } 

 

         

We have created a sample based on your requirement and the same can be downloaded from below link  

Sample:http://www.syncfusion.com/downloads/support/directtrac/general/7z/URLadapwithDB948344789 

Please refer to the help document for more information, 

Help document: https://help.syncfusion.com/aspnetmvc/grid/data-adaptors#url-adaptor 

Even when using virtual scrolling feature, we need to load data by on-demand concept but we have missed to mention it in our Knowledge base documentation which will be updated and refreshed online as early as possible. 

Regards, 

Venkatesh Ayothiraman.