Question about sort comparator implementation

[mparisi76]

Hi, I need to use the sort comparator functionality that was added in #219. I'm wondering if there are examples of this in action or any documentation about how to use it.

Thanks!

[wyuenho]

No documentation yet, but here's an example:

var columns: [
 {
    name: "name",
    label: "Name",
    sortValue: function (model, sortKey) {
        return model.get("sortKey").toLowerCase();
    }
 }
];

[thomasfl]

You can also try out custom comparators. This makes text sorting case insensitive:

var caseInsensitiveComparator = function (left, right) {
  left = left.toLowerCase();
  right = right.toLowerCase();
  if(left === right) return 0;
  if(left > right) return -1;
  return 1;
};

var columns: [
 {
    name: "name",
    label: "Name",
    comparator: caseInsensitiveComparator
    }
 }
];

[wyuenho]

Why would you want that?

[thomasfl]

To get custom comparator I guess? The real problem is case sensitive sort ordering.

[wyuenho]

Backgrid and Backbone sorts case-sensitively by default. If not, use the above example to extract a value for sorting. A custom comparator will be generated automatically by Backgrid to attach to the backing collection. backbone-pageable does something similar.

[thomasfl]

Thanks a lot! Adding a sortValue property works perfectly.

[kriswill]

My solution was to move the comparator factory to the Column instead of the HeaderCell. This made it easier for me to restore the sort state from a saved version of the column settings. One modification from an ordinary string sort was packing all of the values to the top of the sort in both directions, effectively pushing the empty cells to the bottom, which is a more spread sheet-like behavior:

Backgrid.Column.prototype.makeCaseInsensitiveComparator = function (order, sortValue) {
  var attr = this.get('name'),
      sortValue = sortValue || this.get("sortValue") || function (model, attr) { return model && model.has(attr) && model.get(attr) || model.cid }

  return function(left, right) {
    var t, l = sortValue(left, attr) || null, r = sortValue(right, attr) || null

    // causes sort to put empty values at the bottom 
    if (l && r === null) return -1
    if (r && l === null) return 1

    // swap if order is descending
    if (order === 1) t = l, l = r, r = t

    if (_.isString(l) && _.isString(r)) {
      l = l.toLocaleUpperCase()
      r = r.toLocaleUpperCase()
      if (l.localeCompare(r) === 0) return 0
      else if (l.localeCompare(r) < 0) return -1
    }
    return 1
  }
}