CODEWITHSUNDEEP
javascriptjquerysortingslickgrid
technomalogical
technomalogical

Reputation: 3002

Sorting Slickgrid by Multiple Columns?

I just started testing out Slickgrid for a project I'm working on and I'm very impressed with its performance. One requirement I have is sorting on multiple columns. I don't fully have my head wrapped around the Dataview in Slickgrid, so maybe I'm missing something obvious, but is there a way to sort a grid on multiple columns? Even if the UI can't handle sorting by more than one, I would like to be able to call a function with the columns in order, plus ascending or descending. I was able to do this with Datatables, but it doesn't have grouping (another requirement for the project).

In the worst case, I will resort to doing the sorting on the server and serving the content back to the client statically sorted.

Upvotes: 9

Views: 8588

Answers (4)

Narayana
Narayana

Reputation: 2744

I got it working for dataView with multi-column sort in the way. Was the easiest one to understand too. This is from the example in github, except that I've to pass one more parameter for dataView.sort(). It can always be true, and you can take care of the sort direction in your function.

grid.onSort.subscribe(function (e, args) {
    gridSorter(args.sortCols, dataView);
});

function gridSorter(sortCols, dataview) {
    dataview.sort(function (row1, row2) {
        for (var i = 0, l = sortCols.length; i < l; i++) {
            var field = sortCols[i].sortCol.field;
            var sign = sortCols[i].sortAsc ? 1 : -1;
            var x = row1[field], y = row2[field];
            var result = (x < y ? -1 : (x > y ? 1 : 0)) * sign;
            if (result != 0) {
                return result;
            }
        }
        return 0;
    }, true);
}

Just in case it helps someone.

Upvotes: 8

dashleysmith
dashleysmith

Reputation: 11

I spent a while trying to solve this with dataview (without shift key shenanigans) and I think I found the way to do it.

Use single column sort {multiColumnSort: false} and store the sort arguments in a closure. Defer to the previous comparitor if fields are equal. 

var currentSortCmp = null;  
grid.onSort.subscribe(function (e, args) {

    // declarations for closure
    var field = args.sortCol.field;
    var sign = args.sortAsc ? 1 : -1;
    var prevSortCmp = currentSortCmp;

    // store closure in global
    currentSortCmp = function (dataRow1, dataRow2) {

        var value1 = dataRow1[field], value2 = dataRow2[field];

        //if equal then sort in previous closure (recurs)
        if (value1 == value2 && prevSortCmp)
            return prevSortCmp(dataRow1, dataRow2);

        return (value1 == value2 ? 0 : (value1 > value2 ? 1 : -1)) * sign;
    };
    dataView.sort(currentSortCmp);

    grid.invalidate();
    grid.render();      
});

remembers all previous orders. just works. works as expected.

Upvotes: 1

ZiglioUK
ZiglioUK

Reputation: 2610

There's an example here that uses the 'multiColumnSort' option.

http://mleibman.github.com/SlickGrid/examples/example-multi-column-sort.html

I don't think it works though, because args.sortCols is always an array of 1.

[Edit] In order for it work, I need to hold shift before clicking on a column header (not very intuitive IMHO) See also: https://github.com/mleibman/SlickGrid/pull/276

Upvotes: 6

Tin
Tin

Reputation: 9082

You can chain sort comparers to do multiple column sorting. Instead of doing

function comparerOnCol1(a, b) {
  return a["col1"] - b["col1"];
}

function comparerOnCol2(a, b) {
  return a["col2"] - b["col2"];
}

you can do

// sort by col1, then col2
function combinedComparer(a, b) {
  return comparerOnCol1(a, b) || comparerOnCol2(a, b);  // etc.
}

or just implement it inline.

As far as reflecting the sort order in the UI, while you can't do directly, you can apply the sort indicators by setting "headerCssClass" on the column definitions you're sorting by and having them display the arrows (or however else you're indicating sort columns).

Upvotes: 6

Related Questions