[CLOSED] TemplateColumn sorting

Can we sort a Template column? I have a Template column with a custom tpl and it does not seem to be sortable. Is the resolution to use a regular column and a renderer?
/Z

Hello @Z!

Sorting is done in the store level, so there are two issues:

- If you don't bind a DataIndex to the column, it won't be sortable.
- When using a template column you may have mixed up a series of columns altogether, sorting then would not sort by the combination and disposition of the columns' data in the cells, but by the value of the record in whichever DataIndex you gave to the column.

So while you can attain a certain level of sorting, it may not work as intended in some situations:
- DataIndex bound to the column is not the first information in the template you built: you can easily manipulate it so that the first reference of the template be the DataIndex
- DataIndex bound to the column as first information, but its value can repeat across the data; and the second reference would not be sorted.

So if you need it to sort by all (or more than one) involved columns in the template or any other level of complexity, then you need to use a custom sorter.

Using this, you don't need the DataIndex at all, just give your column a block like this:

Code:

---

<Sorters>
    <SorterFn Fn="myCustomSort" />
</Sorters>

---

then write your custom sort function like this:

Code:

---

var myCustomSort = function(nextRecord, prevRecord) {
  if (prevRecord.data.modelField1 > nextRecord.data.modelField1) {
    return 1; /* signals previous record should be switched with next record */
  } else if (prevRecord.data.modelField1 == nextRecord.data.modelField1) {
    if (prevRecord.data.modelField2 < nextRecord.data.modelField2) {
      return 1;
    }
  } else {
    return -1;
  }
}

---

So, literally you will need to implement your custom ordering algorithm. The code above is a very simplified and you might consider treating equals, and descend to as many fields you consider in the comparison, and maybe also return 0; when all data fields are considered equally/neutrally sorted.

Here's a bit more documentation on the sorter function if that's still not clear for you:
- Documentation on Ext.util.Sorter.sorterFn config option

Unfortunately there's no way to sort by a custom template's contents in the cell (even if you used a renderer pulling data off other records, would be equivalent). You won't get a reference to the cells being sorted, but to the records being sorted.

Of course, from the record, you can identify where in the DOM it is printed, then crawl the page to get the cell and its value, but it won't be guaranteed, say, if the cell is not even drawn on the page's DOM (side effect of a buffered grid, which is on by default). I will not deepen in this option as it will be somewhat complexer than anything else we can think, and it would be limited to string sorting (or a lot of work trimming out fields), as I'll explain in the next paragraph.

If you are wondering of an option to use no custom function, you could just concatenate whatever your template field takes in a record -- build the "formatted" record straight off the data or code behind -- so you could just DataBind that field. This will be limited to string sorting, as if you had, say Mike,2,4/12/18 and Mike,11,5/1/19, the 11th "Mike" would be sorted -after- the 2nd one. In this case you would need again a custom sorter and split all those "fields", which would be much slower than picking up the correct fields and doing type-bound comparisons correctly.

Well, hope this helps!