[ANGULAR] scheduler groups custom sorting

[thomasb]

Is it possible to sort/order scheduler groups
for example when I group resources with team property, the groups always gets sorted Alphabetically.

I want to be able to group and order the groups depending on the user's choice something like
D B Z C A, not sorting the resources themselves, in my case the poeple

[tasnim]

Hi,

Yes, you can achieve custom sorting for scheduler groups by using the groupSortFn configuration in the Group feature. This allows you to define a custom sorting function for the groups.
https://bryntum.com/products/scheduler/docs/api/Grid/feature/Group#config-groupSortFn
Here's an example of how you can implement custom sorting:

const scheduler = new Scheduler({
    features : {
        group : {
            field : 'team',
            groupSortFn : (a, b) => {
                const order = ['D', 'B', 'Z', 'C', 'A'];
                return order.indexOf(a.team) - order.indexOf(b.team);
            }
        }
    }
});

In this example, the groupSortFn uses a predefined order array to sort the groups according to your custom order.

Let me know if you need further assistance!

[thomasb]

Thank you for the quick response, but is there is a way to trigger it programaticaly on event, not start the scheduler grouped

[tasnim]

Hi,

To trigger custom sorting programmatically, you can use the group method on the store associated with the scheduler. You can call this method in response to an event, such as a button click or any other user interaction. Here's an example:

https://bryntum.com/products/calendar/docs/api/Scheduler/data/ResourceStore#function-group

// Assuming you have a reference to the scheduler instance
const scheduler = ...; // Your scheduler instance

// Function to apply custom group sorting
function applyCustomGroupSorting() {
    scheduler.store.group({
        field: 'team',
        fn: (a, b) => {
            const order = ['D', 'B', 'Z', 'C', 'A'];
            return order.indexOf(a.team) - order.indexOf(b.team);
        }
    });
}

// Example: Trigger sorting on a button click
document.getElementById('sortButton').addEventListener('click', applyCustomGroupSorting);

This way, you can control when the sorting is applied based on user actions.