JqGrid trying to send large data from server to grid but getting:Error during serialization or deserialization using the JSON JavaScriptSerializer

Question

I have a problem I am receiving large amount of data from the server and am then converting it to Json format, to be then viewed in JqGrid. It works for small amount of data say for example 200 rows but when doing this for 10000 rows it throws the following error

System.InvalidOperationException: Error during serialization or deserialization using the JSON JavaScriptSerializer. The length of the string exceeds the value set on the maxJsonLength property

I have tried using the javascript serializer and set it to maxjsonLenght = int32.MaxValue but still no luck

Following is my code please give me suggestions with examples how I can fix this? Thanks all!

GridConfig

 public JqGridConfig(String db, String jobGroup, String jobName, String detailTable,       String filterBatchControl, String filterDate, String filterTime, int page)
    {
        var entityhelper = new EntityHelper();
        var s = new JsonSerializer();

        try
        {
            //Populate Grid Model, Column Names, Grid Column Model, Grid Data
            entityhelper.PopulateDetailGridInit(db, jobGroup, jobName, detailTable, filterBatchControl, filterDate, filterTime);

            JqGridDetailAttributes = entityhelper.GridDetailAttributes;
            JqGridDetailColumnNames = entityhelper.GridDetailColumnNames;
            //JqGridDetailsColumnNamesForExport = entityhelper.GridDetailColumnNamesForExport;
            JqGridDetailColumnModel = entityhelper.GridDetailColumnModel;

            //Dynamic Data
            JqGridDynamicDetailData = entityhelper.GridDetailData;


            #region Column Model
            foreach (KeyValuePair<String, JqGridColModel> kvp in entityhelper.GridDetailColumnModel)
            {
                s.Serialize(kvp.Key, kvp.Value.Attributes);
            }

            JqGridDetailColumnModelJson = s.Json();
            #endregion

            #region Concrete data.  1. List<dynamic> populated, 2. Convert to Json String, 3: Convert back to List<Detail>
            JqGridDetailData = JsonSerializer.ConvertDynamicDetailsToJson(JqGridDynamicDetailData); // this is where the error occurs

            }
        catch (Exception ex)
        {
            //TODO: Logging
            System.Diagnostics.Debug.WriteLine(ex.Message);
        }
    }

Json Serializer

  public static IList<Detail> ConvertDynamicDetailsToJson(IList<dynamic> list)
    {
        if (list.Count == 0)
            return new List<Detail>();

        var sb = new StringBuilder();
        var contents = new List<String>();

        sb.Append("[");

        foreach (var item in list)
        {
            var d = item as IDictionary<String, Object>;

            sb.Append("{");
            foreach (KeyValuePair<String, Object> kvp in d)
            {    
                contents.Add(String.Format("{0}: {1}", "\"" + kvp.Key + "\"", JsonConvert.SerializeObject(kvp.Value))); 
            }
            sb.Append(String.Join(",", contents.ToArray()));
            sb.Append("},");
        }

        sb.Append("]");

        //remove trailing comma
        sb.Remove(sb.Length - 2, 1);
        var jarray = JsonConvert.DeserializeObject<List<Detail>>(sb.ToString());

        return jarray;
    }

Controller that return Json result from server

  public JsonResult DetailGridData(TheParams param)
    {






        dynamic config= "";
        switch (param.JobGroup)
        {
            case "a":
                config = new BLL.abcBLL().GetDetailGridData("rid", "desc", 1, 20, null,
                                                                             param.FilterBatchControl,
                                                                             param.JobName, param.DetailTable,
                                                                             param.JobGroup, param.BatchDate,
                                                                             param.Source);
                break;
        }




        return Json(config, JsonRequestBehavior.AllowGet);  // this reurns successfully json result
    }

View where the Jqgrid exists and does not populate the grid

 <script type="text/javascript">

var jobGroup = '@ViewBag.JobGroup';
var jobName  = '@ViewBag.JobName';
var detailTable = '@ViewBag.DetailTable';
var filterBatchControl = '@ViewBag.FilterBatchControl';
var controlDate = '@ViewBag.ControlDate';
var controlTime = '@ViewBag.ControlTime';
var source = '@ViewBag.DetailSource';
var page = '@ViewBag.page';



function loadDetailData() {
    var param = new Object();
    param.BatchDate = controlDate;
    param.BatchTime = controlTime;
    param.JobGroup = jobGroup;
    param.JobName = jobName;
    param.DetailTable = detailTable;
    param.FilterBatchControl = filterBatchControl;
    param.Source = source;
    param.page = page;

    window.parent.loadingDetailsHeader();        

    $.ajax({
        url: "/control/detailgriddata",
        dataType: 'json',
        type: 'POST',
        data: param,
        async: false,
        success: function (response) {
            try {
                jgGridDetailColumnNames = response.JqGridDetailColumnNames;
                //jqGridDetailColumnData = response.JqGridDetailData;
                jqGridDetailColumnData = response.config;
                $('#detailGrid').jqGrid('setGridParam', {colNames: jgGridDetailColumnNames});
                $('#detailGrid').jqGrid('setGridParam', {data: jqGridDetailColumnData}).trigger('reloadGrid');
                parent.loadingDetailsHeaderComplete();
            }
            catch(e) {
                window.parent.loadingDetailsHeaderException(e.Message);
            }
            return false;
        },
        error: function (xhr, ajaxOptions, thrownError) {
            alert(xhr.status);
            alert(thrownError);
        }
    });
}

function exportdetails(date) {
    var param = new Object();
    param.db = source;
    param.jobGroup = jobGroup;
    param.jobName = jobName;
    param.detailTable = detailTable;
    param.filterBatchControl = filterBatchControl;          
    param.filterDate = date;
    param.filterTime = "NULL";

    $.ajax({
        type: 'POST',
        contentType: 'application/json; charset=utf-8',
        url: '@Url.Action("ExportDetailsCsv", "Control")',
        dataType: 'json',
        data: $.toJSON(param),
        async: false,
        success: function (response) {
            window.location.assign(response.fileName);
        },
        error: function (xhr, ajaxOptions, thrownError) {
            alert("Details Export Exception: " + xhr.status);
        }
    });
}

//<![CDATA[
$(document).ready(function () {
    'use strict';

    $(window).resize(function () {
        $("#detailGrid").setGridWidth($(window).width());
    }).trigger('resize');

    var dgrid = $("#detailGrid");

    $('#detailGrid').jqGrid('clearGridData');
    loadDetailData();

    dgrid.jqGrid({
        datatype: 'json',
        data: jqGridDetailColumnData,
        colNames: jgGridDetailColumnNames,
        colModel: [ @Html.Raw(@ViewBag.ColModelDetail) ],
        rowNum: 25,
        rowList: [25, 50, 100],
        pager: '#detailPager',
        gridview: true,
        autoencode: false,
        ignoreCase: true,
        viewrecords: true,
        altrows: false,
        autowidth: true,
        shrinkToFit: true,
        headertitles: true,
        hoverrows: true,
        height: 300,
        onSelectRow: function (rowId) {
            //This is a demo dialog with a jqGrid embedded
            //use this as the base for viewing detail data of details
            //$('#dialogGrid').dialog();
            //gridDialog();
        },
        loadComplete: function (data) {},
        gridComplete: function (data) {
            //if (parseInt(data.records,10) < 50) {
            $('#detailPager').show();
            //} else {
            //$('#detailPager').show();
            //}
        }
    }).jqGrid('navGrid', '#detailPager', { edit: false, add: false, del: false, search: false }, {});
});
 //]]>
 </script>
 <table id="detailGrid">
<tr>
    <td />
</tr>
</table>

 <div id="detailPager"></div>

 <div id="dialogGrid"></div>

score 0 · Accepted Answer · answered Jan 09 '13 at 17:41

0

Probably you should consider to use server side paging instead of returning 10000 rows to the client? Server side paging of SQL data can be implemented much more effectively as client side paging (sorting of large non-indexed data in JavaScript program).

One more option which you have is the usage of another JSON serializer. For example it can be protobuf-net, ServiceStack.Text (see here too), Json.NET and other. In the way you can additionally improve performance of your application comparing with JavaScriptSerializer.

answered Jan 09 '13 at 17:41

Oleg

220,925
34
403
798

Hi Oleg, yes that was my next step is to do paging, I am successfully returning data from server in pages and then return Json result to client however it is not populating in the JqGrid. I have put the code above, any help you can offer will really appreciate it. Thank you very much. – CharlesMighty Jan 09 '13 at 18:47
@CharlesMighty: Sorry, but the code which you posted shows that you try to fill grid in absolutely wrong way. You use `datatype: 'json'` together with `data: jqGridDetailColumnData` and without usage of `url` option. The option `data` work only with `datatype: 'local'` and alternative usage with `datatype: 'json'` required specifying of `url` option. I recommend you to use `datatype: 'json'` and specify as `url` the URL of MVC action which provide the page of data. See [the answer](http://stackoverflow.com/a/5501644/315935) for the code example. – Oleg Jan 10 '13 at 07:36
Thanks Oleg, as always your answers provide clarity and helps me learn more. Thanks a lot really appreciate your help. – CharlesMighty Jan 10 '13 at 16:25

JqGrid trying to send large data from server to grid but getting:Error during serialization or deserialization using the JSON JavaScriptSerializer

1 Answers1