Simple Slickgrid Sorting Doesn't Work

Question

Is there an obvious reason why this Slickgrid example should not work. Basically it does not sort by clicking columns.

var grid; var columns = [ {id:"title", name:"Title", field:"title", sortable: true}, {id:"duration", name:"Duration", field:"duration", sortable: true}, {id:"%", name:"% Complete", field:"percentComplete", sortable: true}, {id:"start", name:"Start", field:"start", sortable: true}, {id:"finish", name:"Finish", field:"finish", sortable: true}, {id:"effort-driven", name:"Effort Driven", field:"effortDriven", sortable: true} ]; var options = { enableCellNavigation: true, enableColumnReorder: false }; $(function() { var data = []; for (var i = 0; i < 500; i++) { data[i] = { id: i, title: "Task " + i, duration: "5 days", percentComplete: Math.round(Math.random() * 100), start: "01/01/2009", finish: "01/05/2009", effortDriven: (i % 5 == 0) }; } var dataView = new Slick.Data.DataView(); grid = new Slick.Grid("#myGrid", dataView, columns, options); function comparer(a,b) { var x = a[sortcol], y = b[sortcol]; return (x == y ? 0 : (x > y ? 1 : -1)); } var sortcol = "json_number"; var sortdir = 1; grid.onSort.subscribe(function(e, args) { sortdir = args.sortAsc ? 1 : -1; sortcol = args.sortCol.field; // using native sort with comparer // preferred method but can be very slow in IE with huge datasets dataView.sort(comparer, args.sortAsc); }); dataView.beginUpdate(); dataView.setItems(data); dataView.endUpdate(); grid.invalidate(); grid.render(); $("#myGrid").show(); }) 

Answer 1

Try adding this listener that re-renders the grid when the rows are moving around:

 dataView.onRowsChanged.subscribe(function(e,args) { grid.invalidateRows(args.rows); grid.render(); }); 

Original example here: http://mleibman.github.com/SlickGrid/examples/example4-model.html

Answer 2

Despite the fact that there is already an accepted answer that undoubtedly solved the initial question, I wanted to point out a general error in stackoverflow when processing the Slickgrid subscription method.

Imagine that our grid is in a variable called a "grid", as in most other examples. This happens in most accepted and / or pending responses:

 dataView.onRowsChanged.subscribe(function(e,args) { grid.invalidateRows(args.rows); grid.render(); }); 

or

  grid.onSort.subscribe(function(e, args){ var cols = args.sortCols; data.sort(function(dataRow1, dataRow2){ 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; }) grid.invalidate() grid.render() }) 

Do these examples perform as intended? Yes, they ... in certain circumstances.

Imagine a function that adds Slickgrid to the Slickgrids list:

 var m_grids = [] function anyName(){ var grid; //..run code //..run subscribe m_grids.push(grid) } 

So, what happens now when we try to call any subscription function, while the subscription function contains a variable grid? It simply affects the last assigned grid, regardless of which subscription was made to them. The correct way to sign these functions is with the args parameter:

 dataView.onRowsChanged.subscribe(function(e,args) { args.grid.invalidateRows(args.rows); args.grid.render(); }); 

or

  grid.onSort.subscribe(function(e, args){ var cols = args.sortCols; args.grid.getData().sort(function(dataRow1, dataRow2){ 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; }) args.grid.invalidate() args.grid.render() }) 

This may be a minor case, as this usually requires more than one Slickgrid, but why not make a mistake if we can do this very easily :)