Sorting / filtering dropdown columns by rendered text

[studds]

Hello, loving the Bryntum Grid.

Couple of questions.

We've got a dropdown column configured along these lines:

const idValueMap = {
  id1: 'One',
  id2: 'Two'
};
const items = [
  { value: 'id1', text: 'One' },
  { value: 'id2', text: 'Two' }
];
const column = {
  field: 'assignedTo',
  text: 'Assigned to',
  editor: {
    items: items,
    type: 'dropdown',
    filterOperator: '*'
  },
  renderer: ({ value }) => idValueMap[value]
}

This works fine, the right value is displayed and we can change it using the dropdown.

The challenge comes when we want to either sort or filter.

When sorting, we expect the column to be sorted by the displayed value returned by the renderer (ie One, Two), but it's actually sorted by the underlying value (id1, id2). (In this example, no difference, in the real app there is differences).

When filtering, we expect the filter editor to display the value returned from the renderer (eg 'One'), but it actually displays the underlying value (eg id1).

[pmiklashevich]

Column accepts sortable config which can be a function, for example:

sortable : function(recA, recB) {
    return idValueMap[recA.assignedTo] < idValueMap[recB.assignedTo] ? -1 : 1;
},

The same is for filtering.

[studds]

Ah! Sorry, missed that. That sorts out the sorting. What about the filtering?