Premium support for our pure JavaScript UI components


Post by gantteveryday »

Hi,

When resource has eventLayout "stack", overlapping events are sorted by startDate by default.

Default sort
Default sort
default1.png (12.25 KiB) Viewed 399 times

What we would like to do, is to sort them by the OrderNumber value (shown in the image), so that events and predecessors would only be sorted by that value when overlapping and startDate would be ignored. The preferred outcome would look like this:

Preferred sort
Preferred sort
example3.png (12.51 KiB) Viewed 399 times

We already tried using groupBy, but for our case it would take too much space.

When using custom overlappingEventSorter function:

function customSorter(a, b) {
       return a.orderNumber - b.orderNumber;
   }

We get the following sort:

Custom sort #1
Custom sort #1
example2.png (12.96 KiB) Viewed 399 times

It seems that overlappingEventSorter doesn't sort just the overlapping events but all events on the timeline. Would it be possible to use overlappingEventSorter to only sort the overlapping events to achieve the desired result?

Alternatively, overlappingEventSorter examples only show returning either negative or positive value. When sorting predecessors and successors of a same orderNumber, would it be possible for example to return 0, and not sort them above and below each other as in image 3.


Post by tasnim »

Hi,

It seems that overlappingEventSorter doesn't sort just the overlapping events but all events on the timeline. Would it be possible to use overlappingEventSorter to only sort the overlapping events to achieve the desired result?

I don't see that it is sorting the non-overlapped events. Do you see anything like this? How to reproduce it?

Alternatively, overlappingEventSorter examples only show returning either negative or positive value. When sorting predecessors and successors of a same orderNumber, would it be possible for example to return 0, and not sort them above and below each other as in image 3.

Does it also sorting the predecessors and successors? Could you please provide the steps to reproduce it.
Please check the attached gif

Attachments
chrome_0U16UD6G74.gif
chrome_0U16UD6G74.gif (1.75 MiB) Viewed 360 times

Post by gantteveryday »

Thank you!

So, in demo https://bryntum.com/products/scheduler/examples/layouts/ using settings stack and custom sorter.
If I edit the code from default to this:

function customSorter(a, b) {
    return a.name - b.name;
}

I get results like this:

image1.png
image1.png (6.55 KiB) Viewed 357 times

The position on the timeaxis seems to affect the sorting as seen in the image. What we are trying to get is for the events to be compressed vertically when possible. So in this case the first 5 event would be at top, and the first 4 event one level higher. Also in this case the sorting didn't work for the second 3, 4 and 5 events.


Post by alex.l »

Hi,

Yes it may affect on all events, not only those that has actual overlap. To have predictable result please follow recommendations from docs https://bryntum.com/products/scheduler/docs/api/Scheduler/view/mixin/SchedulerEventRendering#config-overlappingEventSorter

NOTE: The algorithms (stack, pack) that lay the events out expects them to be served in chronological order, be sure to first sort by startDate to get predictable results.

All the best,
Alex


Post by gantteveryday »

Thank you,

I would like to ask a couple more follow-up questions about this.

So, when using stack layouts eventStore should be in chronological order. How is this connected to the vertical sort of events in the timeline. For example in the above comments overlappingEventSorter was overrode to sort event's by some numeric value, does this change the order of events in the eventStore? Or is the vertical position of events determined by some value that gets calculated incorrectly, because events are served to overlappingEventSorter in wrong order, resulting in what can be seen in the image in my previous comment?


Post by johan.isaksson »

Hi,

The sorting order of the eventStore is not relevant to the layout. The overlappingEventSorter is applied to the events within a resource during the layout process, similar to resource.events.sort(overlappingEventSorter). The result of that is then feed to the layout algorithm, which expects input that is in chronological order, aka sorted first by startDate (the default sorter sorts by startDate, endDate, name).

This limits what you can achieve with an overlappingEventSorter, if you need more control over the layout Scheduler Pro lets you take full control of it by suppling a layout function that gets to arrange the events (not an easy thing to implement though). A very rudimentary one is shown in here https://bryntum.com/products/schedulerpro/examples/custom-layouts/

Best regards,
Johan Isaksson

Post by gantteveryday »

Thank you for the comprehensive answers, I think we can proceed with this information.


Post Reply