Premium support for our pure JavaScript UI components


Post by Leonardo »

Hello!

I've got a resource model that has nested fields. For example foo.bar.

On the column definition, I set as field the value foo.bar.
The value is displayed properly, but sorting the column by clicking on the header does not work (does nothing, no sorting and no errors).

I can reproduce it on the Basic demo.

Just add an extra field to some resources, for example:

    resources = [
        { id : 'r1', name : 'Mike', foo: { bar: 1} },
        { id : 'r2', name : 'Linda', foo: { bar: 4} },
        { id : 'r3', name : 'Don', foo: { bar: 10} },
        { id : 'r4', name : 'Karen', foo: { bar: 5} },
        { id : 'r5', name : 'Doug' },
        { id : 'r6', name : 'Peter' },
        { id : 'r7', name : 'Sam' },
        { id : 'r8', name : 'Melissa' },
        { id : 'r9', name : 'John' },
        { id : 'r10', name : 'Ellen' }
    ]
    

And show it on the columns, like:

    columns : [
        { text : 'Name', field : 'name', width : 130 },
        { text : 'Foo.Bar', field : 'foo.bar', width : 130 }
    ]
    
sort.png
sort.png (10.11 KiB) Viewed 345 times

Post by alex.l »

Thank you for the report! I was able to reproduce the issue, here is a ticket: https://github.com/bryntum/support/issues/3220 . Meanwhile as a workaround you could define your own sort function using https://bryntum.com/docs/grid/#Grid/column/Column#config-sortable config.

const grid = new Grid({
[...]
    columns : [
         {
            text  : 'Foo.Bar',
            field : 'foo.bar',
            flex  : 1,
            sortable(rec1, rec2) {
                return rec1.foo.bar < rec2.foo.bar ? -1 : 1;
            }
[...]

All the best,
Alex

All the best,
Alex


Post Reply