Our pure JavaScript Scheduler component


Post by thomaso »

Hey,

We are trying to have one row (containing the main events) from our scheduler always at the top, even when we sort. For that we need custom sorting.

Planner config:

{
[...]
sortFeature: true,
[...]
}

According to the docs (https://bryntum.com/docs/scheduler/api/Core/data/mixin/StoreSort) I should be able to do something like this:

instance.resourceStore.sort({
    fn : (recordA: any, recordB: any) => {
      console.log('recordA', recordA);
      console.log('working...');
      return recordA?.name?.length < recordB?.name?.length ? -1 : 1;
    }
});

If I do this, my logs are not shown in the console and the (default) sorting still works.

If I do it like this:

instance.resourceStore.sort = (recordA: any, recordB: any) => {
      console.log('recordA', recordA);
      console.log('working...');
      return recordA?.name?.length < recordB?.name?.length ? -1 : 1;
    }

My logs DO show up in the console.
My recordA and recordB are not what I'd expect it to be.
The sorting does NOT work anymore, so I somehow did manage to override it.

Can you help me out here?

Kind regards,
Thomas Opdebeeck


Post by Maxim Gorkovsky »

Hello.
Where did you find such method signature? I checked docs and we show totally different code snippets to use custom sorter fn. Please see this one: https://bryntum.com/docs/scheduler/api/Core/data/Store#function-sort

store.sort((recordA, recordB) => {
    // apply custom logic, for example:
    return recordA.name.length < recordB.name.length ? -1 : 1;
});

Post by thomaso »

Hello.

I used this documentation: https://bryntum.com/docs/scheduler/api/Core/data/mixin/StoreSort

I tried your snippet as well but that does not work either:

	instance.resourceStore.sort((recordA: any, recordB: any) => {
      console.log('recordA', recordA);
      console.log('working...');
      return recordA?.value < recordB?.value ? -1 : 1;
    })

-> Sorting works, but it's the default one, since i don't see no logs in the console.
-> recordA is logged like this: {columnOwned: true, field: 'value'}

If I do it like this:

instance.store.sort = (recordA: any, recordB: any) => {
      console.log('recordA', recordA);
      console.log('working...');
      return recordA?.value < recordB?.value ? -1 : 1;
    }

-> Sorting stops working
-> logs are displayed, so I actually override the default sorting with something
-> recordA looks like this: {columnOwned: true, field: 'value'}

This is how we add the periods:

instance.resourceStore.insert(0, newResources)		//these should be sorted

//This should remain on top when sorted:
instance.resourceStore.insert(0, {
      id: resourceIds.events,
      type: resourceIds.events,
      rowHeight: 30,
      barMargin: 5,
      resourceMargin: 10,
      eventStyle: 'line'
    }, true)

Post by Maxim Gorkovsky »

Ok, I see. I just checked this API on our basic grid demo by adding buttons to toolbar, they work just as expected:

tbar : {
    items : {
        sort1 : {
            type : 'button',
            text : 'sort fn',
            onClick() {
                grid.store.sort({
                    fn(a, b) {
                        console.log('fn');
                        return 0;
                    }
                });
            }
        },
        sort2 : {
            type : 'button',
            text : 'sort fn',
            onClick() {
                grid.store.sort((a, b) => {
                    console.log('fn arg');
                    return 0;
                });
            }
        }
    }
}

Probably filter doesn't work because it gets removed or store gets reinstantiated which is more likely. This works in the grid basic react demo if you add this short snippet:

useEffect(() => {
    grid.current.instance.store.sort((a, b) => {
        console.log('fn arg');
        return 0;
    });
});

Check how you create stores or provide a runnable test case for us to inspect.


Post by thomaso »

Hey Maxim,

Thanks for the replies so far.
However I am not talking about the Grid-component, but about the Scheduler-component.

To reproduce what we are doing; it boils down to this:


useEffect(() => {
    if (!schedulerRef?.current?.instance) {
      return;
    }
    
const { instance } = schedulerRef.current; //All kinds of setup instance.store.sort = (recordA: any, recordB: any) => { console.log('recordA', recordA); console.log('working...'); return recordA?.value < recordB?.value ? -1 : 1; } /*This function is in fact triggered when I click the default sort button; I see the logs, but recordA & B is not what I expect it to be, so the actual filtering does not work.*/ }, []) return <Scheduler schedulerRef={schedulerRef} config={{ ...config, tbar: toolbar, eventRenderer }} title={plan?.title} />

Could you have this working and maybe share relevant snippets?

Thank you very much,
Thomas Opdebeeck

Attachments
bryntum-support-question.png
bryntum-support-question.png (50.25 KiB) Viewed 773 times

Post by alex.l »

Are you sure you have data loaded when you call sort method? I checked with our online examples, all works as expected.
Try to log instance.store.count before your sort method call to check that.

Please post a runnable test case if you still have that problem.

All the best,
Alex


Post by thomaso »

I managed to get it working. It does in fact work as expected :-)

 columns: [{
    field: 'value', text: 'Name',
    width: 130,
    sortable: (rec1: any, rec2: any) => {
      const data1 = rec1?.data;
      const data2 = rec2?.data;

  const {type: type1, value: value1} = data1 || {};
  const {type: type2, value: value2} = data2 || {};

  if (value1 < value2 || type1 === resourceIds.events) {
    return -1;
  } else if (value1 > value2) {
    return 1;
  }
  return 0;
}
  }]

Post Reply