sortingjsgrid

JsGrid Sorting not working


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".


Solution

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