JsGrid Sorting not working - sorting

Question

Following is part of my JsGrid code, which I think something is missing in order for me to sort my data like any other examples on Fiddle.
autoload: true,
inserting: false,
editing: false,
paging: true,
pageIndex: 1,
pageSize: 5,
pageLoading: true,
autoload: true,
filter: true,
sorting: true,
controller: {
loadData: function(filter) {
return $.ajax({
type: "GET",
url: BASE_URL,
data: filter,
dataType: "json",
cache: false
});
},
},
I have tried with sorting:"number".

Answer 1

Below logic of sorting on the basis of number
$("#Grid2").jsGrid({
height: "auto",
width: "100%",
filtering: false,
editing: false,
sorting: true,
paging: true,
autoload: true,
inserting: false,
pageSize: 15,
pageButtonCount: 5,
controller: {
loadData: function(filter) {
var d = $.Deferred();
$.ajax({
cache: false,
type: 'GET',
url: "http://" + servername + ":" + portnumber + "/api,
data: filter,
dataType: "json",
success: function(data) {
filteredData = $.grep(data, function(item) {
//filtering logic
;
});
d.resolve(filteredData);
testdata = JSON.stringify(data);
$("#Grid2").jsGrid("sort", 1);
HistoricData = data;
},
error: function(e) {
console.log(e);
console.log(e.responseText);
var errorMsg = e.responseText;
var msg = errorMsg + " for this particular combination";
showError(msg);
$("#displayingHistoryValues").hide();
$("#ExportGrid2").hide();
$("#Grid2").hide();
d.resolve();
}
});
return d.promise();
}
},
fields: [{
title: "Value",
name: "MeasureValue",
type: "number",
width: "5%",
css: "custom-field",
sorting: true,
itemTemplate: function(value, item) {
if (item.MeasureValue != null && item.MeasureValue != '' && item.MeasureValue.trim().length > 0) {
var mesval = FormatValeur(item.MeasureUnit, item.MeasureValue);
return "<div>" + mesval + "</div>";
}
}
}, {
type: "control",
editButton: false,
deleteButton: false,
width: "5%"
}]
})
Another way to sort, get the filteredData or loaded data
and call onRefresing of JSGrid .
Way to sort JS grid on column after grid load :
onRefreshing: function (args) {
fundCodeList = [];
jsonNumLst = [];
jsonNANLst = [];
if(this._visibleFieldIndex(this._sortField) == -1
|| this._visibleFieldIndex(this._sortField)==1){
$.each(filteredData, function(inx, obj) {
if($.isNumeric(obj.fundCode)){
jsonNumLst.push(obj);
}else{
jsonNANLst.push(obj);
}
});
if(this._sortOrder == undefined || this._sortOrder == 'asc'){
jsonNumLst.sort(sortByNumFCAsc);
jsonNANLst.sort(sortByNANFCAsc);
}else if(this._sortOrder == 'desc'){
jsonNANLst.sort(sortByNANFCDesc);
jsonNumLst.sort(sortByNumFCDesc);
}
if(jsonNumLst.length>0 || jsonNANLst.length>0){
filteredData = [];
if(this._sortOrder == undefined || this._sortOrder == 'asc'){
$.each(jsonNumLst, function(inx, obj) {
filteredData.push(obj);
});
if(filteredData.length == jsonNumLst.length){
$.each(jsonNANLst, function(inx, obj) {
filteredData.push(obj);
});
}
}else if(this._sortOrder == 'desc'){
$.each(jsonNANLst, function(inx, obj) {
filteredData.push(obj);
});
if(filteredData.length == jsonNANLst.length){
$.each(jsonNumLst, function(inx, obj) {
filteredData.push(obj);
});
}
}
}
if((filteredData.length>0) && filteredData.length==(jsonNumLst.length+jsonNANLst.length)){
$("#measureImportGrid3").data("JSGrid").data = filteredData;
//isSortGrid = false;
//saveEffectControlData = $('#saveEffectiveControlGrid').jsGrid('option', 'data');
}
}
//Ascending order numeric
function sortByNumFCAsc(x,y) {
return x.fundCode - y.fundCode;
}
//Ascending order nonnumeric
function sortByNANFCAsc(x,y) {
return ((x.fundCode == y.fundCode) ? 0 : ((x.fundCode > y.fundCode) ? 1 : -1 ));
}
//Descending order numeric
function sortByNANFCDesc(x,y) {
return ((x.fundCode == y.fundCode) ? 0 : ((y.fundCode > x.fundCode) ? 1 : -1 ));
}
//Descending order non-numeric
function sortByNumFCDesc(x,y) {
return y.fundCode - x.fundCode;
}
}