Premium support for our pure JavaScript UI components


Post by pjbtsl »

Hi,
I'm trying to add additional sorting to the events on my scheduler. In my resource column, I have all my employees and I can easily sort by name, ... In my time axis, I have all my events linked to my employees.
Now I would like to be able to sort my scheduler based on the events. For example, I would like to show all the events chronologically or alphabetically. The employees would be sorted according to the events.

Say I have the following resources and events:
- Dave -> Event B (10AM - 6PM)
- Frank -> Event A (11AM - 5PM)
- Linda -> Event C (9AM - 4PM)

I can sort my scheduler according to my resources, but what if I want to sort by the name of the event? Like so:
- Frank -> Event A (11AM - 5PM)
- Dave -> Event B (10AM - 6PM)
- Linda -> Event C (9AM - 4PM)

I have tried calling scheduler.eventStore.sort('name') or scheduler.eventStore.sort('startDate') but nothing changes. I tried setting the sortable setting to true for the timeAxis, but that doesn't seem to change anything.

How can I achieve a event sorting? Thanks!

Post by saki »

  1. navigate to https://bryntum.com/examples/scheduler/basic/
  2. in the console execute
    rs = bryntum.query('scheduler').resourceStore
    es = bryntum.query('scheduler').eventStore
    es.sort('name')
    rids = es.getRange().map(r => r.resourceId)
    rs.sort((a, b) => rids.indexOf(a.id) - rids.indexOf(b.id))
    
Is that what you want?
Screen Shot 2020-02-28 at 11.53.33.png
Screen Shot 2020-02-28 at 11.53.33.png (468.11 KiB) Viewed 547 times

Post by pjbtsl »

Alright, thanks!
Had to make a small change, but got it working.
var rs = scheduler.resourceStore;
var es = scheduler.eventStore;
es.sort('name');
var rids = es.getRange().map(r => r.resourceId);
rs.sort({
    fn: (recordA, recordB) => {
        return rids.indexOf(recordA.id) < rids.indexOf(recordB.id) ? 1 : -1;
    }
});

Post Reply