JsGrid Sorting not working

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; 
}

        }