Our state of the art Gantt chart


Post by peteg »

Hello,
I would like to know whether there is a way to keep x top rows (2 or 3) always at the top - regardless of the sorting (either default/initial sorting) or sorting based on user clicking on the column header.

We would like to have always a few rows "sticked" to the top - in other words they should be unaffected by sorting.

Edit:
Currently I dealt with this issue by specyfing custom sorting function on column (sortable) which treats those elements a bit different. The only problem is that the default/initial sorting does not seem to use this function (even though I set the priorititzeColumns setting to true).

Thank you for help!

Attachments
Screenshot 2022-11-25 132343.png
Screenshot 2022-11-25 132343.png (11.9 KiB) Viewed 240 times
Screenshot 2022-11-25 132200.png
Screenshot 2022-11-25 132200.png (19.11 KiB) Viewed 240 times

Post by Animal »

When you say "initial", do you mean sorting that comes from state?

Because state cannot store sorters with a custom sort function.


Post by peteg »

I resolved my problem by adding the custom function to the sorters array to override the default sorting. There are two different ways to sort - default sorting and sorting based on a custom sortable function set on the column level.
By initial, I meant the sorting applied on the first render (without the user interaction - clicking on a header).

If there is a more straightforward way - then please let me know. I will leave that - it may help someone else.

sortByStartDate - this is a custom sort function that takes care of keeping certain elements always at the top. This is how I achieved "freezing" the position of specific rows when sorting is applied.

Attachments
Screenshot 2022-11-25 142152.png
Screenshot 2022-11-25 142152.png (41.63 KiB) Viewed 223 times

Post by joakim.l »

This can be solved by overriding the createSorterFn on store.

Example below is tested in this demo https://bryntum.com/products/grid/examples/basic/
It will put the ones where age is 14 always on top.

class MyStore extends Store {
    createSorterFn(sorterConfigs) {
        const originalSorter = super.createSorterFn(sorterConfigs);

    return (a, b) => {
        if (a.age === 14 || b.age == 14) {
            return (a.age === 14 ? -1 : 1);
        }
        return originalSorter(a, b);
    }
}
}

new Grid({
    ...
    store : new MyStore({
        data    : DataGenerator.generateData(50),
        sorters : [{ field : 'name' }]
    })

});

Regards
Joakim


Post by peteg »

Thank you very much! That is precisely what I needed.


Post Reply