Our pure JavaScript Scheduler component


Post by aramirez »

Hello!

I'm having an issue with the Bryntum Scheduler where events are not immediately visible after being added. The events only become visible after I manually resize the screen or scroll a bit. I've tried several methods to resolve this issue, but none have been successful so far.

I have a dropdown where we can select which resources we want to see, when the user selects a new resource type we need to change both the columns and events so we do this:

We basically remove all columns and events and then add the new columns/events as follows:

private updateEventsData(): void {
    this.scheduler.eventStore.removeAll();
    this.scheduler.eventStore.add(JSON.parse(JSON.stringify(this.events)));
  }

Here we have an array of ids per resource type, so we loop that array and get the column config

  private handleColumnsByView(): void {
    this.scheduler.columns.removeAll();

const columns = this.viewColumnMapping[this.viewSelected]
  .map(columnId => {
    const columnConfig = this.allColumns.find(columnItem => (columnItem as any).id === columnId);
    if (columnConfig) {
      return columnConfig || null;
    }
  })
  .filter(columnConfig => columnConfig);

this.scheduler.columns.add(columns);
  }

Is there a way to refresh the layout?


Post by aramirez »

demo

Screen Recording 2024-06-07 at 5.07.45 PM.mov
(6.49 MiB) Downloaded 6 times

Post by mats »

Your code can be simplified a bit:

Replace:

private updateEventsData(): void {
    this.scheduler.eventStore.removeAll();
    this.scheduler.eventStore.add(JSON.parse(JSON.stringify(this.events)));
  }

with

private updateEventsData(): void {
    this.scheduler.eventStore.data = this.events;
  }

and same for the columns, no need to removeAll etc. Just do:

this.scheduler.columns data = columns;

Does that fix your rendering issues?


Post by aramirez »

Hi mats,

Thanks for your response,

assigning the events directly worked but it is throwing this error when I change the columns code to:

    this.scheduler.columns.data = columns;
Screenshot 2024-06-11 at 10.11.33 AM.png
Screenshot 2024-06-11 at 10.11.33 AM.png (222.69 KiB) Viewed 149 times
Screenshot 2024-06-11 at 10.11.23 AM.png
Screenshot 2024-06-11 at 10.11.23 AM.png (554.98 KiB) Viewed 149 times

Im not sure how that relates to the partner grid


Post by marcio »

Hey aramirez,

Is there any chance that you can share a runnable project for us to debug? That would facilitate a lot to identify what's happening there and assist you on this.

Best regards,
Márcio


Post by Animal »

Is it absolutely necessary to completely replace the columns?

Could you not just configure all possible columns, but then hide columns that you want to hide, and show those you want to show?


Post by Animal »

The column set must include the scheduler's own, generated timeAxisColumn,

so

myScheduler.columns = [...new columnset, myScheduler.timeAxisColumn];

Ensure you're handing it back its time axis column which is in its 'normal' subgrid as opposed to the locked one.


Post by aramirez »

Thanks Animal, yeah, Actually what I did was to query the columns first and then remove them, because the problem was the removeAll.

this way:

        
const visibleColumns = this.scheduler.columns.query(({ text }) => text); this.scheduler.columns.remove(visibleColumns);

Im not sure if there is a better way to query all the columns that are visible (I cannot use hidden because the users can hide/show the columns from the header menu)


Post by tasnim »

Hi,

(I cannot use hidden because the users can hide/show the columns from the header menu)

Then, you can hide that option from header menu to hide and show columns.
You can set this feature https://bryntum.com/products/scheduler/docs/api/Grid/feature/ColumnPicker to false

features : {
	columnPicker : false
}

Best regards,
Tasnim


Post by aramirez »

Hi tasnim,

I meant I cannot use the hidden prop to get all the visible columns, I still need the users to hide/show the columns, I cannot disable that feature.


Post Reply