JQGrid Custom Sorting

Question

I have a JQGrid populated with data working correctly. The default sorting functionality is working as expected. However, I would like to sort by the clicked column, and the by a name column; every time. I think the onSortCol is where I should start, but there isn't much in the documentation about how to sort the contents of the table. Ideally, I would like to not have to write my own sorting algorithm and just plug into the JQGrid API somehow. All of the data is on the client and I would like to avoid a trip to the server if at all possible.

Here is the code I'm using to create the grid:

$jqGrid = $('#people_SelectedContacts').jqGrid({
    ajaxGridOptions: {
        type: "POST"
    },
    url: 'AJAX/GetContacts',
    datatype: "json",
    postData: JSON.stringify({ ID: $('#ID').val() }),
    loadonce: true,
    sortable: true,
    caption: "Selected Contacts",
    hidegrid: false,
    autowidth: true,
    rowNum: 10000,
    height: "100%",
    loadui: 'block',
    colNames: ['lecID', 'lrlID', 'mjID', 'Role', 'Name', 'Entity', 'Contact', 'D #', ''],
    colModel: [
        { name: 'LECID', hidden: true },
        { name: 'LRLID', hidden: true },
        { name: 'MJID', hidden: true },
        { name: 'RoleLookupName', index: 'RoleLookupName' },
        { name: 'FullName', index: 'FullName' },
        { name: 'Entity', index: 'Entity' },
        { name: 'ContactInformation', index: 'ContactInformation' },
        { name: 'DNumber', index: 'DNumber' },
        { name: 'Remove', sortable: false, width: 25 }
    ],
    jsonReader: {
        root: 'ReturnValues.Contacts',
        repeatitems: false
    },
    beforeProcessing: function (data, status, xhr) {
        if (!data.ReturnValues.Contacts) {
            data.ReturnValues.Contacts = new Array();
        }
        $.each(data.ReturnValues.Contacts, function (index, value) {
            value.Entity = FormatAddress(value);
            value.ContactInformation = FormatContact(value);
            value.DNumber = FormatDocket(value);
        });
    },
    gridComplete: function () {
        var ids = $jqGrid.jqGrid('getDataIDs');
        for (var i = 0; i < ids.length; i++) {
            removeButton = $('<span>').addClass('remove-contact jqui-button-fix');
            $jqGrid.jqGrid('setRowData', ids[i], { Remove: $('<div>').append(removeButton).html() });
        }
    },
    loadComplete: function (data) {

    },
    onSortCol: function (index, iCol, sortorder) {

    }
});

Punchboard

which datatype you use? Do you use loadonce: true? It would be good if you include the code of the grid definition. – Pollywog

Answer 1

In your grid you have 5 column which are visible and sortable: 'RoleLookupName', 'FullName', 'Entity', 'ContactInformation', 'DNumber'. After the loading of grid data from the server the datatype will be changed from 'json' to 'local' corresponds the behavior of the parameter loadonce: true. From now the sorting will be work locally. Because you don't define sorttype property in any column the default sorttype: 'text' will be used.

How I understand the data in columns 'RoleLookupName', 'Entity' and so on can contain duplicates, so you would like to sort the grid by combination of the main sorting column (like 'RoleLookupName' for example) and the second column ('FullName' for example). In the case of duplicates in the main sorting column the grid will be still sorted by the second criteria from the second column. To implement the behavior you should use custom sorting. You can implement it by the usage of sorttype as function (see the answer).

The idea of sorttype as function is easy. The sorttype should return string or integer which should be used instead of the main cell contain. For example you can define 'RoleLookupName' as following

{ name: 'RoleLookupName', index: 'RoleLookupName',
    sorttype: function (cell, obj) {
        return cell + '_' + obj.FullName;
    }}

Another answer which includes the demo could you find probably also interesting for understanding. It demonstrates even more advanced technique where it is implemented not only custom sorting, but also custom searching.

Pollywog

No I did not yet. I did know about defining sorttype as a function. I had hoped I would be able to do it using the onSortCol callback. However, if doing it the way you suggested is the only way, I guess I'll just have to get to it. Thank you for including code that I'm sure will help. I'm hoping to get to this later today, I'll be sure to mark your answer when it works. – Punchboard

@Zero21xxx: You are welcome! The onSortCol can be helpful to deny sorting or to do some additional actions on clicking of the column headers. To define how the data should be sorted so to define some costom sorting behavior only sorttype as a function or index as a function can be used. The best for datatype: 'local' is sorttype as a function. In the answer which I referenced in my answer on your question you'll find links to discussion on the subject. – Pollywog

@Zero21xxx: By the way, if you plan to award bounty you have to do this explicitly. See "How do I award a bounty?" in the answer. – Pollywog