Slickgrid Sort Call

Question

In slickgrid, I can set the sort column and its sort direction using grid.SetSortColumn(colName,true/false) . This sets only the sort glyph, but does not sort. Is there a way to call a sort event handler. I defined the sorting handler as grid.onSort.subscribe(function(){});

Answer 1

The behavior you observe is correct.

  grid.setSortColumn(columnId, isAsc); 

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

  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 did I come to this decision?

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

Answer 2

dataView.fastSort is doing the job. Then you can use setSortColumn to set the sort glyph.

Answer 3

I have multiple sorting of columns, I had to change the function to pass the correct sorting column.

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

Answer 4

You can trigger a click event on the column heading ... which does the sorting

I fixed a problem like this ...

 $('.slick-header-columns').children().eq(0).trigger('click'); // for first column 

Answer 5

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 the whole grid.setSortColumn .

  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 6

I cannot leave comments because of the reputation, and this would be most appropriate, however my answer concerns the answers of @Premshankar Tiwari and @Siddharth.

I preferred the dataView.fastSort option in Siddhart's answer, which works for me in all browsers except IE7 and 8. I have not tested it in IE9 or higher. Unfortunately, most of my network runs IE7 or 8 due to compatibility issues for legacy applications. BUT, Premshankar 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". Note that this is the reverse order in the dataView.fastSort method. I also use a function that detects the IE browser version and assigns it to msie .

My only complaint about using the .trigger method is that if you set your grid to dynamically hide / show columns, the indexed function will potentially sort by unexpected columns, unless you only call it during initialization, when the hidden / displayed capabilities are present .

Answer 7

Perhaps it will help you. It seems that SlickGrid starts sorting by itself, so you can run it manually if you want.

Answer 8

I use multi-column sorting and load the saved sort data when initializing the grid.

As expected, setSortColumns sets the sort, but doesn't actually apply it, and dataView.reSort () or .fastSort () doesn't seem to help, no matter what loading point I called them (I must have I missed it, but just could not get it to work).

In the end, it worked for me. I call this right after populating my dataView from an ajax call. He's probably not the worst, so happy to accept feedback on board!

 function forceResort() { var sortColumns = grid.getSortColumns(); var cols = []; $.each(sortColumns, function(index, value) { var columnId = value.columnId; var sortAsc = value.sortAsc; var sortCol = { field: columnId }; var col = { sortCol: sortCol, sortAsc : sortAsc}; cols.push(col); }); dataView.sort(function (dataRow1, dataRow2) { var sortResult = 0; for (var i = 0, l = cols.length; i < l; i++) { if (sortResult !== 0) { break; } var field = cols[i].sortCol.field; var sign = cols[i].sortAsc ? 1 : -1; var value1 = dataRow1[field] || ''; //handle nulls - otherwise erratic sorting var value2 = dataRow2[field] || ''; //handle nulls - otherwise erratic sorting if ($.inArray(field, dateTypeColumns) > -1) { sortResult = compareDates(value1, value2) * sign; } else { if ($.inArray(field, numericColumns) > -1) { sortResult = compareSimple(value1, value2) * sign; } else { sortResult = compareAlphaNumeric(value1, value2) * sign; } } } return sortResult; }); grid.invalidate(); grid.render(); } 

Answer 9

A cleaner solution is to not rely on onSort arguments, but instead call getSortColumns:

  function gridSorter() { var scol=grid.getSortColumns(); if (scol.length===0) return; var scolId=scol[0].columnId, asc=scol[0].sortAsc; data.sort(function(a, b) { var result = a[scolId] > b[scolId] ? 1 : a[scolId] < b[scolId] ? -1 : 0; return asc ? result : -result; }); grid.invalidate(); } 

Then do:

  grid.onSort.subscribe(gridSorter); 

This will allow you to restore sorting at any time (from the example after reloading data using ajax) just call gridSorter ()