Jquery grid working only for 8400 rows to load.

Question

Not sure what's wrong my jquery grid loading only 8400 records. Initially I though there may be some data related Issue in tables. But I try to remove each column and tried to load entire ( around 15k ) its not loading its showing only empty grid..

   jQuery("#list47").jqGrid({
            url: '/vunerability/GetResult/',
            //data: mydata,
            datatype: 'JSON',
            height: 250,
            width: 1150,
            rowNum: 1000,
            rowTotal: 20000,
            jsonReader: {
                root: "rows",
                page: "page",
                total: "total",
                records: "records",
                repeatitems: true,
                id: "0",
            },

            colNames: ['Vunlerability_Id','Vunlerability_Title','Security_Level','IPAddress','Operating_System','Environment', 'Location', 'Status'],
            colModel: [
                { name: 'Vunlerability_Id', width: 80, sorttype: "int" },
                { name: 'Vunlerability_Title',  width: 100, sorttype: "int" },
                { name: 'Security_Level', width: 90 },
                { name: 'IPAddress', width: 50 },
                { name: 'Operating_System', width: 100, sorttype: "int" },
                { name: 'Environment',  width: 60 },
                { name: 'Location',  width: 50 },
                { name: 'Status',  width: 30 }
            ],
            pager: "#plist47",
            rowList: [1000, 2000, 3000],
            mtype: "Get",
            repeatitems: true,
            loadonce: true,
            rownumbers: true,
            autoencode: true,
            gridview: true,
            caption: "Open Results"

        });

        jQuery("#list47").jqGrid('navGrid', '#plist47', { del: false, add: false, edit: false }, {}, {}, {}, { multipleSearch: true });

    });

My json Action Result

  public JsonResult GetResult()
        {

            var result = _db.tblVulnerabilities.Where(x => x.Status == "Open").ToList().Take(8500);
            var VunList = result
                      .Select(c => new VunerabilityViewModel.vulnerabilitylistOpenVsClose()
                      {
                          Vunlerability_Id = c.Vulnerability_Id,
                          Vunlerability_Title = c.Vulnerability_Title,
                          Security_Level = c.Security_Level,
                          IPAddress = c.AssetIP_Address,
                          Operating_System = c.Operating_System,
                          Environment = c.Environment,
                          Location = c.Location,
                          Status = c.Status
                      });
            //string json = JsonConvert.SerializeObject(VunList);
            return Json(VunList, JsonRequestBehavior.AllowGet);
        }

can anyone help me out what I am doing wrong here?

Thanks in advance.

Answer 1

The problem seems to me pure server side problem because of the usage of old ASP.NET MVC with either old JavaScriptSerializer for JSON serialization of because of usage very old version of Newtonsoft.Json. The solution will depends on ASP.NET MVC which you use and from the JSON serializer.

For example you can try to replace the line return Json(VunList, JsonRequestBehavior.AllowGet); to the following

return new JsonResult {
    Data = VunList,
    JsonRequestBehavior = JsonRequestBehavior.AllowGet,
    MaxJsonLength = Int32.MaxValue
);

One more tip would be to open NuGet console in the Visual Studio and execute Update-Package Newtonsoft.Json to update to more recent version of Newtonsoft.Json.

There are some solution of increasing the limit of the JSON size by adding sections in web.config. You can search for jsonSerialization and maxJsonLength.

Additionally I'd recommend you to change rowNum: 1000 to rowNum: 20 or rowNum: 25. It has no sense to make web page many times slowly by filling the part of the page which the uses can's see without scrolling. 20-25 rows is the maximum which can display the monitor. In case of usage loadonce: true you will have very quick responsible page with local paging.

I recommend you additionally to replace height: 250 to height: "auto", which works very good if you manage the height of the grid via rowNum. Then you should replace jsonReader to jsonReader: { id: "Vunlerability_Id" }.

I'd recommend you to use the latest 4.13.2 version of free jqGrid fork of jqGrig - the fork which I develop. It have many new features like the usage of Font Awesome icons (see here), the usage of forceClientSorting: true (see UPDATED part of the answer), the option reloadGridOptions: { fromServer: true } of navGrid (see here) and many other features described in the READMEs to every published version and in the wiki.