Grid Sorting

(requires jqxgrid.sort.js)

The sortable property enables or disables the data sorting. The Grid sorting logic is implemented in the jqxgrid.sort.js and you need to reference that javascript file. In the code example below, the Grid data sorting is enabled.

To enable or disable the sorting of a Grid column, you can set its sortable property to false. In the code example below, the sorting of the "ShipName" column is disabled.

When the sorting data type is Date, Number or Boolean, the 'type' property in the 'datafields' array should be set.
In this code example, the data type of the ShippedDate column is Date and the "type" property is set to "date". The Freight column displays floating-point numbers and the 'type' property is set to 'float'.
The 'sortcolumn' property specifies the default Grid sort column, i.e. when the grid is displayed, the data will be sorted. The 'sortdirection' property specifies the sort order of the sort column.

Sorting with the Grid API.

The sortby function can be used to sort the Grid through the API. This function should be called when the grid data is fully loaded. The first parameter is the Column's DataField. The second parameter is the sort order - 'asc' or 'desc'.

To remove the sorting, call the "removesort" function.
When the data is sorted, the Grid raises the 'sort' event.

By default, when the sorting is enabled and the user clicks a column's header, the sort order is changed. The jqxGrid 'sorttogglestates' property can be used to modify this behavior. The possible values of this property are:

0 - disables toggling. The Grid is sortable only through the API.
1 - enables togging. Click on a column header toggles the sort direction. In this mode, there are 2 possible sort direction values - 'asc', and 'desc'.
2 - default toggle mode. Click on a column header toggles the sort direction. In this mode, there are 3 possible sort direction values - 'asc', 'desc' and null. When the sort direction is null, the sorting is cleared.

Custom Sorting

To override the default sorting logic, you need to set the 'sort' member of the Grid's source object to a custom sorting function. The Grid will pass two parameters to this function - the sort column's datafield and the sort direction.
var customsortfunc = function (column, direction) { var sortdata = new Array(); if (direction == 'ascending') direction = true; if (direction == 'descending') direction = false; if (direction != null) { for (i = 0; i < data.length; i++) { sortdata.push(data[i]); } } else sortdata = data; var tmpToString = Object.prototype.toString; Object.prototype.toString = (typeof column == "function") ? column : function () { return this[column] }; if (direction != null) { sortdata.sort(compare); if (!direction) { sortdata.reverse(); } } source.localdata = sortdata; $("#jqxgrid").jqxGrid('databind', source); Object.prototype.toString = tmpToString; } // custom comparer. var compare = function (value1, value2) { value1 = String(value1).toLowerCase(); value2 = String(value2).toLowerCase(); try { var tmpvalue1 = parseFloat(value1); if (isNaN(tmpvalue1)) { if (value1 < value2) { return -1; } if (value1 > value2) { return 1; } } else { var tmpvalue2 = parseFloat(value2); if (tmpvalue1 < tmpvalue2) { return -1; } if (tmpvalue1 > tmpvalue2) { return 1; } } } catch (error) { var er = error; } return 0; }; var source = { localdata: data, sort: customsortfunc, datatype: "array" };

For Server-Side sorting, see the Server-side processing with PHP and MySQL help topic.