How to show too many rows data with JSON in jqGrid

Question

I have a list with 15 column and 60000 rows that I reach it by JSON in ASP.NET MVC so my jqGrid cannot load data and show them in grid but when row counts decrease to 30000, it shows correctly.

Please help me how can I solve that

jQuery("#jqgrid").jqGrid({
            url: '@Url.Action("_FillGridProjectCodingCompanyCode", "Letter")' + '?ProjectId=' + ProjectIdVal,
            jsonReader: {
                repeatitems: false,
                root: function (obj) {

                    return obj.records;
                }
            },
            datatype: "json",
            height: 'auto',
            colNames: ['', 'Archive_DCC_Coding_Id', 'SubProject'
                , 'Plant', 'PlantUnit', 'SubUnit', 'Discipline', 'Facility', 'Activity Code',
                'Activity', 'FIECo. DOC No.', 'Revision', 'Document title & Description', ' Client No',
                ' transmittal No', 'transmittal'
                ,'transmittal status', 'status', 'Latest Respansibility'
            ],
            colModel: [
                {
                    name: 'act',
                    index: 'act',
                    sortable: false,
                    width: 25,
                    search:false
                },
                {
                    name: 'Archive_DCC_Coding_Id',
                    index: 'Archive_DCC_Coding_Id',
                    hidden: true,
                    search: false,
                    searchoptions: { sopt: ['eq', 'ne', 'le', 'lt', 'gt', 'ge'] }//عدد

                },
                {
                    name: 'Sub_Proj_Code',
                    index: 'Sub_Proj_Code',
                    width: 70,
                    hidden: true,
                    search:true,
                    searchoptions: { sopt: ['eq', 'bw', 'bn', 'cn', 'nc', 'ew', 'en'] }
                },
                {
                    name: 'Plant_Code',
                    index: 'Plant_Code',
                    width: 70,
                    hidden: true,
                    searchoptions: { sopt: ['eq', 'bw', 'bn', 'cn', 'nc', 'ew', 'en'] }
                },
                    {
                        name: 'Plant_unit_code',
                        index: 'Plant_unit_code',
                        width: 70,
                        hidden: true,
                        searchoptions: { sopt: ['eq', 'bw', 'bn', 'cn', 'nc', 'ew', 'en'] }
                    }
                    ,
                    {
                        name: 'sub_unit_code',
                        index: 'sub_unit_code',
                        width: 70,
                        hidden: true,
                        searchoptions: { sopt: ['eq', 'bw', 'bn', 'cn', 'nc', 'ew', 'en'] }
                    },
                    {
                        name: 'discipline',
                        index: 'discipline',
                        width: 70,
                        searchoptions: { sopt: ['eq', 'bw', 'bn', 'cn', 'nc', 'ew', 'en'] }
                    },
                    {
                        name: 'facility',
                        index: 'facility',
                        width: 70,
                        searchoptions: { sopt: ['eq', 'bw', 'bn', 'cn', 'nc', 'ew', 'en'] }
                    },
                    {
                        name: 'Act_PrimaveraId',
                        index: 'Act_PrimaveraId',
                        width: 70,
                        searchoptions: { sopt: ['eq', 'bw', 'bn', 'cn', 'nc', 'ew', 'en'] }
                    },
                    {
                        name: 'Act_Name',
                        index: 'Act_Name',
                        width: 100,
                        searchoptions: { sopt: ['eq', 'bw', 'bn', 'cn', 'nc', 'ew', 'en'] }
                    },
                    {
                        name: 'comp_code',
                        index: 'comp_code',
                        width: 100,
                        searchoptions: { sopt: ['eq', 'bw', 'bn', 'cn', 'nc', 'ew', 'en'] }
                    },
                    {
                        name: 'Comp_Revision',
                        index: 'Comp_Revision',
                        width: 50,
                        searchoptions: { sopt: ['eq', 'bw', 'bn', 'cn', 'nc', 'ew', 'en'] }
                    },

                    {
                        name: 'comp_subject',
                        index: 'comp_subject',
                        width: 150,
                        searchoptions: { sopt: ['eq', 'bw', 'bn', 'cn', 'nc', 'ew', 'en'] }

                    },
                    {
                        name: 'client_document_no',
                        index: 'client_document_no',
                        searchoptions: { sopt: ['eq', 'bw', 'bn', 'cn', 'nc', 'ew', 'en'] }
                    },
                    {
                        name: 'trans_ref_no',
                        index: 'trans_ref_no',
                        width: 100,
                        searchoptions: { sopt: ['eq', 'bw', 'bn', 'cn', 'nc', 'ew', 'en'] }
                    },
                    {
                        name: 'ChkMain_Subject',
                        index: 'ChkMain_Subject',
                        searchoptions: { sopt: ['eq', 'bw', 'bn', 'cn', 'nc', 'ew', 'en'] }
                    },                   
                    {
                        name:'chkMain_status',
                        index: 'chkMain_status',                    
                        width: 50,
                        searchoptions: { sopt: ['eq', 'bw', 'bn', 'cn', 'nc', 'ew', 'en'] }
                    },
                    {
                        name: 'last_status',
                        index: 'last_status',
                        width: 100,
                        searchoptions: { sopt: ['eq', 'bw', 'bn', 'cn', 'nc', 'ew', 'en'] }
                    },
                    {
                        name: 'last_receiver',
                        index: 'last_receiver',
                        searchoptions: { sopt: ['eq', 'bw', 'bn', 'cn', 'nc', 'ew', 'en'] }
                    }
            ],
            rowNum: 5,
            rowList: [5,10,15, 20,25, 30],
            toppager: true,
            pager: '#pjqgrid',
            sortname: 'comp_code',
            toolbarfilter: true,
            viewrecords: true,
            sortable: true,
            sortorder: "asc",
            loadonce: true,
            gridview: true,           
            shrinkToFit: true,

            gridComplete: function () {

                var ids = jQuery("#jqgrid").jqGrid('getDataIDs');
                for (var i = 0; i < ids.length; i++) {
                    var cl = ids[i];

                    ed = "<button class='btn btn-xs btn-default' type='button' onclick=\"EditLetter('" + cl + "');\" data-toggle='modal' data-target='#EditLetterModal'><i class='fa fa-pencil'></i></button>";
                    ins = "<button class='btn btn-xs btn-default' type='button'  onclick=\"InsertLetter('" + cl + "');\" data-toggle='modal' data-target='#LetterModal'><i class='fa fa-plus'></i></button>";
                    chain = "<button class='btn btn-xs btn-default' type='button' onclick=\"ViewLetter('" + cl + "');\" data-toggle='modal' data-target='#LetterChainModal'><i class='fa fa-chain'></i></button>";

                    jQuery("#jqgrid").jqGrid('setRowData', ids[i], {
                        act: ed + ins+chain
                    });
                }
            },
            editurl: "dummy.html",
            caption: "Document ",

            width: '100%'

        }).jqGrid('navGrid', '#pjqgrid', { edit: false, add: false, del: false, refresh: true, view: false, cloneToTop: true },
                {}, {}, {}
                , {
                    multipleSearch: true,
                    multipleGroup: true,
                    showQuery: true
                }
                )
        ;

score 0 · Answer 1 · answered Feb 01 '17 at 09:28

0

jqGrid had problem with high range of rows before. I don't know It has could solve this problem yet. So I suggest you try last version of library and also check your rowNum: 5. May be by changing it to rowNum: '' it become solved.

answered Feb 01 '17 at 09:28

Siamak Ferdos

3,181
5
29
56

score 0 · Accepted Answer · edited May 23 '17 at 12:33

0

You don't posted which version of ASP.NET MVC you use and which JSON serializer. In the same way you don't posted which version of jqGrid you use and from which fork of jqGrid (free jqGrid, commercial Guriddo jqGrid JS or an old jqGrid in version <=4.7). You can verify on the demo the performance of the grid with 60000 rows of data and 15 columns. I used in the demo free jqGrid 4.13.6 - the fork which I develop.

I suppose that your problem is pure server-side problem with the limit of the size of JSON serialized data. For example one have to increase the value of globally property MaxJsonLength if ASP.NET MVC uses old JavaScriptSerializer serializer. See the old answer and for more detailes. It could be that another answer would be even better for you.

Additionally I would recommend you to verify your requirements. It could be that the usage of server-side paging, sorting and filtering the date would be better in case of your data, because the number or rows is large enough.

edited May 23 '17 at 12:33

Community

1
1

answered Feb 01 '17 at 12:53

Oleg

220,925
34
403
798

@Saman: Do you tried to set `JsonResult.MaxJsonLength`? See http://stackoverflow.com/a/13961055/315935, which I referenced in my answer? Another option would be to use Newtonsoft.Json by including NuGet package [Newtonsoft.Json](https://www.nuget.org/packages/Newtonsoft.Json/). – Oleg Feb 01 '17 at 14:08
@Saman: If you don't sure which JSON serializer you use you can use it explicitly. You need just convert the data to string and then use `return Content(jsonString, "application/json" );` – Oleg Feb 01 '17 at 14:12
thanks,Your answer help me. I set MaxJsonLength to MaxValue and it works for me(like your sample link) – Saman Feb 04 '17 at 11:07
@Saman: You are welcome! I'd recommend you additionally to reduce your code essentially by usage `template` in `colModel` and removing all unneeded `index` properties from `colModel`. You need just define new variable with common settings, which you use, like `var myColTemplate = {searchoptions: { sopt: ['eq', 'bw', 'bn', 'cn', 'nc', 'ew', 'en']};` and use, tor example, `{ name:'chkMain_status', template: myColTemplate, width: 50 }`. See [the old post](http://stackoverflow.com/a/6047856/315935). – Oleg Feb 04 '17 at 11:14
@Saman: You should consider to upgrade to [free jqGrid](https://github.com/free-jqgrid/jqGrid), which has native support of Font Awesome 4.x (see [here](https://free-jqgrid.github.io/getting-started/index.html#type_of_data)), Bootstrap (see [here](https://free-jqgrid.github.io/getting-started/index.html#bootstrap)) and you can use custom buttons of `formatter: "actions"` additionally (see [the answer](http://stackoverflow.com/a/29735149/315935) and [the wiki](https://github.com/free-jqgrid/jqGrid/wiki/Enhancement-of-formatter:%22actions%22)) and many other features additionally. – Oleg Feb 04 '17 at 11:19

How to show too many rows data with JSON in jqGrid

2 Answers2

Linked