Calling sort on slickgrid

Question

In the slickgrid I\'m able to set the sort column and it\'s sort direction using the grid.SetSortColumn(colName,true/false). This only sets the sorting glyph but do

Answer 1

If you want multiple column sorting:

function grid_sorter(args, grid, dataView) {
    let cols = args.sortCols;
    console.log(cols)
    dataView.sort(function (dataRow1, dataRow2) {
        for (let i = 0, l = cols.length; i < l; i++) {
            let field = cols[i].sortCol.field;
            let sign = cols[i].sortAsc ? 1 : -1;
            let value1 = dataRow1[field], value2 = dataRow2[field];
            let result = (value1 === value2 ? 0 : (value1 > value2 ? 1 : -1)) * sign;
            if (result !== 0) {
                return result;
            }
        }
        return 0;
    });
    grid.invalidate();
    grid.render();
}

grid_sorter(default_sorting, grid_2, dataView_2);

cols is an object like this:

- sortCols {
  - length: 2
  - 0 : {
       "sortAsc: true,
       "sortCol": {
           "field: column_id
        }
      }
  - 1: {..}
}

Answer 2

dataView.fastSort does the job. You can then use setSortColumn to set the sorting glyph.

Answer 3

The behavior you are observing is correct.

    grid.setSortColumn(columnId, isAsc);

only updates the glyph on the sort column. In your case, you will initially need to sort the data, and then use setSortColumn to update the glyph on sortColumn. You can reuse sorter used in onSort event like this:

   var gridSorter = function(columnField, isAsc, grid, gridData) {
       var sign = isAsc ? 1 : -1;
       var field = columnField
       gridData.sort(function (dataRow1, dataRow2) {
              var value1 = dataRow1[field], value2 = dataRow2[field];
              var result = (value1 == value2) ?  0 :
                         ((value1 > value2 ? 1 : -1)) * sign;
              return result;
       });
       grid.invalidate();
       grid.render();
   }
   var grid = new Slick.Grid($gridContainer, gridData, gridColumns, gridOptions);

   //These 2 lines will sort you data & update glyph while loading grid     
   //columnField is field of column you want to sort initially, isAsc - true/false
   gridSorter(columnField, isAsc, grid, gridData);

   //I had the columnField, columnId same else used columnId below
   grid.setSortColumn(columnField, isAsc); 

   grid.onSort.subscribe(function(e, args) {
        gridSorter(args.sortCol.field, args.sortAsc, grid, gridData);
   });

How I arrived on this solution?

Read comments here. https://github.com/mleibman/SlickGrid/issues/325

Answer 4

I was inspired by Mr.Hunts answer but I took a slightly different approach to extend the current grid.setSortColumn(columnId, isAsc) to grid.setInitialSortColumn(columnId, isAsc). This will apply the sort and do everything grid.setSortColumn does.

    var thisGrid = { //Your grid obj
        columns: , // Your columns object
        grid: , // new Slick.Grid....
    }



    thisGrid.grid.onSort.subscribe(function (e, args) { // ar  var cols = args.sortCols;]
            thisGrid.grid.customSort(args);
        });

    thisGrid.grid.customSort = function (args) {
        var cols = args.sortCols;
        thisGrid.dataView.sort(function (dataRow1, dataRow2) {
                if (cols) {
                    for (var i = 0, l = cols.length; i < l; i++) {
                        var field = cols[i].sortCol.field;
                        var sign = cols[i].sortAsc ? 1 : -1;
                        var value1 = dataRow1[field],
                            value2 = dataRow2[field];
                        var result = (value1 == value2 ? 0 : (value1 > value2 ? 1 : -1)) * sign;
                        if (result != 0) {
                            return result;
                        }
                    }
                }
                return 0;
            });
    }
    thisGrid.grid.setInitialSortColumn = function (columnId, ascending) {
        thisGrid.grid.setInitialSortColumns([{
                    columnId: columnId,
                    sortAsc: ascending
                }
            ]);
    };
    thisGrid.grid.setInitialSortColumns = function (cols) {
        sortColumns = cols;
        $.each(sortColumns, function (i, col) {
                var columnIndex = thisGrid.grid.getColumnIndex(col.columnId);
                var column = thisGrid.columns[columnIndex];
                if (col.sortAsc == null) {
                    col.sortAsc = true;
                }
                var args = {
                    grid: thisGrid.grid,
                    multiColumnSort: true,
                    sortCols: [{
                            sortCol: column,
                            sortAsc: col.sortAsc
                        }
                    ]
                }
                thisGrid.grid.setSortColumn(col.columnId, col.sortAsc);
                thisGrid.grid.customSort(args);

            });
    };

    // Trigger 
    thisGrid.grid.setInitialSortColumn("dateDue", true);

Answer 5

I can't leave comments due to reputation, which is where this would be most appropriate, however, my answer is in regard to @Premshankar Tiwari and @Siddharth answers.

I preferred the dataView.fastSort option in Siddharth's answer, which works for me in all browsers except IE7 and 8. I didn't test it in IE9 or above. Unfortunately, most on my network run IE7 or 8 due to compatibility issues for legacy applications. BUT, Premshankar's answer works in IE7 and 8.

So, I ended up doing something like this:

if (msie > 0) {
    $(".slick-header-columns").children().eq(5).trigger("click");
    $(".slick-header-columns").children().eq(4).trigger("click");
} else {
    dataView.fastSort('process','unit');
}

where column index (5) = 'unit' and column index (4) = 'process'. Notice that is the reverse order in dataView.fastSort method. I am also using a function that detects IE browser version and assigns it to msie.

My only complaint about utilizing the .trigger method is that if you set up your grid to dynamically hide/show columns, the indexed feature would potentially sort on unintended columns unless you are only calling it on initialization when hide/show capabilities are present.

Answer 6

I have multiple column sort enabled, I had to change the function to pass the correct sort column.

grid.onSort.subscribe(function(e, args) {
    gridSorter(**args.sortCols[0].sortCol.field**, **args.sortCols[0].sortAsc**, grid, gridData);
});