CODEWITHSUNDEEP
javascriptjqueryajaxjqgrid
arb
arb

Reputation: 7863

JQGrid Client Side Sorting

This is a question that I know has been asked here and several other places on the internet. I have tried all of the solutions I could find on the StackOverflow site with the same result, nothing solved my problem.

I want to load the data from the database once, and then do all of the sorting operations on the client. The loadonce property sounds like it is supposed to handle this, but it doesn't seem to be working for me. I've also tried setting the datatype to local in various event handlers with no success.

Here is the code I am using to instantiate the grid.

        $('#people_SelectedContacts').jqGrid({
        ajaxGridOptions:{
            type: "POST"
        },
        datatype: function(data){
            $.ajax(klg.getAppRoot()+"AJAX/GetMatterProfileContacts",{
                            data: JSON.stringify({
                MatterProfileID: $('#MatterProfileID').val()
            }),
            success: function(data){
                var contacts = data.ReturnValues;
                var mygrid = $("#people_SelectedContacts")[0];
                mygrid.addJSONData(contacts);
            },
            complete: function(){
                $("#people_SelectedContacts").setGridParam({datatype:'local'});
            }});
        },
        loadonce: true,
        colNames:['lecID','lrlID','mjID','Role','Name','Company/Court', 'Business Phone', 'Email', 'Docket #'],
        colModel:[
            {name:'LegalEntityContactID', hidden:true},
            {name:'LegalRoleLookupID', hidden:true},
            {name:'MatterJurisdictionID', hidden:true},
            {name:'LegalRoleLookupName', index:'legalrole'},
            {name:'FullName',index:'name'},
            {name:'Company',index:'company'},
            {name:'BusinessPhone',index:'bussphone'},
            {name:'Email',index:'email'},
            {name:'DocketNumber',index:'email'}
        ],
        sortable: true,
        jsonReader: {
            root:'MatterProfileContacts',
            repeatitems: false,
            id:"MatterProfileContactID"
        }
    });

The data loads into the grid correctly, but as I said, the sorting commands all go and hit the server again. Can anyone point my in the right direction? The only reason I switched from a standard HTML table to the JQGrid is for sorting and grouping. If I can't get client-side sorting to work, it's useless.

Thank you Stack Overflow community.

Upvotes: 0

Views: 4685

Answers (2)

arb
arb

Reputation: 7863

I changed the grid to use datatype: 'json' as you suggested by Oleg. I still had the sorting problem but I realized that it was because of the index values I was using in the column model. The index values of the column model has to match the property names of the JSON objects being returned from the server.

Upvotes: 0

Oleg
Oleg

Reputation: 221997

The reason of your problem is that you use datatype as function which is not needed in 99,9% of cases. The problem is that setting datatype: 'local' is not the only thing which jqGrid do in case of loadonce: true. The most important thing is that the data and _index parameters will be filled with the data returned from the server. The internal parameters hold the data and will be used during local sorting and paging. You current implementation don't fill data and _index, so loadonce: true can't work.

Instead of usage datatype as function you can use

datatype: 'json',
serializeGridData: function (data) { return JSON.stringify(data); },
postData: { MatterProfileID: function () { return $('#MatterProfileID').val(); } }

You should additionally modify jsonReader to include ReturnValues in the root. I think after the changes you will be able to use loadonce: true. Probably there are some other small things which you need to do additionally, but the most important that you should use any standard datatype instead of datatype as function.

Upvotes: 1

Related Questions