How to Implement Custom Sort to a Specific Column After Jqgrid Has Been Generated

How do I implement custom sort to a specific column after jqgrid has been generated?

The usage of sorttype as the function can be useful for any local datatype of jqGrid or in case of the usage loadonce:true jqGrid paremter with the "remote" datatypes 'json' or 'xml'. If it is needed you can change the sorttype of any column dynamically.

I made the new demo for you to demonstrate the feature. At the begining the grid will be sorted by 'Client' column and the column contain will be interpret as the text string. The results are displayed below

Wenn we check the checkbox "Set custom sorttype function" the grid will be sorted as displayed on the next picture

To implement such sorting I defined the function

var myCustomSort = function(cell,rowObject) {
    if (typeof cell === "string" && /^test(\d)+$/i.test(cell)) {
        return parseInt(cell.substring(4),10);
    } else {
        return cell;
    }
}

and the 'change' event handler on the checkbox

$("#customsorttype").change(function() {
    var isChecked = $(this).is(':checked');
    if (isChecked) {
        cm.sorttype = myCustomSort;
    } else {
        cm.sorttype = "text";
    }
    grid.trigger("reloadGrid");
});

where grid is $("#list").

If one click on the checkbox one more time the original sorting method with sorttype:"text" will be used.

jqgrid: how to sort on a different column

If you define the onSortCol function you could test for the column being sorted and then change the value.

Ex.

onSortCol: function (index, iCol, sortorder) {    
    if(index === "Amount"){
        index = "AmountPayable";              
    }
},

JQGrid Custom Sorting

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.

jqGrid sorting a column while grouping consider grouping header

If I correctly understand your problem you can solve your problem by adding custom sorting function (see here, here and here) on the column DocGroup where you do the grouping:

sorttype: function (cellvalue, rowObject) {
    return cellvalue? cellvalue : rowObject.Documents;
}

As the result the input data which have empty DocGroup will be sorted and so grouped by Documents. You will see the results on Fiddle

jQGrid sorting data locally two columns grouping

If you use local datatype then you can use simple and flexible solution of the problem. You need define sorttype property as function in the second placement_inv_code ('Name') column. The function sorttype have two parameters. The second parameter (for example obj) allow you to access to all other columns of the row (like obj.ymd). The value returned by sorttype function will be used by jqGrid during sorting. You will find examples of such implementation here, here, here and other old answers.

UPDATED: The demo uses the following sorttype for the placement_inv_code column

sorttype: function (cellValue, item) {
    return cellValue + '_' + item.ymd;
}

As the result if the user clicks on the placement_inv_code column jqGrid uses item.placement_inv_code + '_' + item.ymd string to deternine the order of the rows during the sorting. As the result you will see

By the way the format of item.ymd will be the same (like "2013-09-19") even if we displays the date column in another format. See modified demo to demonstrate this. If you set breakpoint inside of sorttype callback you will still see the item.ymd in the same ISO 8601 date format like in the input data. So the sorttype callback will help jqGrid to sort the data in correct way.

Is there a way to override the default sorting behavior in JQGrid?

What you can do is to use template property of colModel or the usage of cmTemplate option of jqGrid to define default sorttype property for all columns of the grid. If you would set cmTemplate option in $.jgrid.defaults you will change the default sorttype property for all columns of all grids:

$.extend($.jgrid.defaults, {
    cmTemplate: {
        sorttype: 'int' // you can use functions in the same way
                        // to define custom sorting
                        // see https://stackoverflow.com/a/5296935/315935
                        // for the code example
    }
});

Look at the answer for more details. For example if you want to define custom sorting like function from the answer

How do i sort a column that has multiple types of values? [Trirand JQGrid 4.6]

jqGrid contains multiple possibilities to customize the sorting. First of all it's important to mention that all the below possibilities have sense only if you use datatype: "local" or some remote datatype ("json", "jsonp", "xml") in combination with loadonce: true. In the last case the datatype will be changed to the "local" after the first loading of data from the server.

To sort the local data in the column jqGrid have to compare the values. It does some preliminary steps. First of all if fills the array with items, which maps the content from one column to the rowid. Thus you can define

sorttype: function (cellValue, item) {
    return cellValue; // another value as cellValue can be returned
}

It gives you the first way of custom sorting. You can for example use RegEx to extract the "number"-part of the information from the callValue and to return it from sorttype (which you can define in colModel for the column notes). See the old demo created for the answer for more details.

The second way: defining of sortfunc callback in colModel. The callback has the prototype

sortfunc: function (a, b, direction) {
    // should return 0, 1 or -1
}

in old versions of jqGrid and

sortfunc: function (a, b, direction, aItem, bItem) {
    // should return 0, 1 or -1
}

in free jqGrid. The sortfunc allows you to implement any custom sorting behavior which you need. See the demo created for the issue for the code example.

---

Related Topics