Refresh Scheduler Columns

[Arturo Martinez]

I have some icons loaded on the scheduler after initialization, and i also have a button that on trigger must change this icons, the database values changes correctly after clicking my button but i dont know how to tell the scheduler to re-build again to ve able to construct itselft on demand

How can i tell the scheduler to like 'delete itself' and rebuild again, not only refreshing the events but all the columns and groups

[Vijay Ravi]

Hi Arturo,
 

Based on your requirement, the onClick method is bound to the button click event. We suggest calling the refresh() method on the Scheduler. When the button is clicked, the onClick method will be triggered, which in turn calls the refresh() method on scheduleObj to refresh the Scheduler.

[app.component.html]
 

<ejs-schedule #scheduleObj width='100%'  resourceHeaderTemplate="resourceHeaderTemplate">

      <ng-template #resourceHeaderTemplate let-data>

        <div>

          <i [ngClass]="getIconClass(data.resourceData.text)"></i>

          {{data.resourceData.text}}

        </div>

      </ng-template>

    </e-resource>

  </e-resource>

</ejs-schedule>

<button (click)="onClick()">Refresh Scheduler</button>

[app.component.ts]

 

import { ScheduleComponent } from '@syncfusion/ej2-angular-schedule';

import { ViewChild } from '@angular/core';

export class YourComponent {

  @ViewChild('scheduleObj', { static: false }) public scheduleObj: ScheduleComponent;

 

  useAlternateIcons = false;

 

  getIconClass(text: string): string {

    if (this.useAlternateIcons) {

      // Return the alternate set of icons

      if (text === 'Nancy') {

        return 'e-icons e-edit';

      } else if (text === 'Steven') {

        return 'e-icons e-edit';

      } else if (text === 'Robert') {

        return 'e-icons e-edit';

      } else if (text === 'Smith') {

        return 'e-icons e-edit';

      } else if (text === 'Michael') {

        return 'e-icons e-edit';

      } else if (text === 'Root') {

        return 'e-icons e-edit';

      }

    } else {

      if (text === 'Nancy') {

        return 'e-icons e-people';

      } else if (text === 'Steven') {

        return 'e-icons e-emoji';

      } else if (text === 'Robert') {

        return 'e-icons e-people';

      } else if (text === 'Smith') {

        return 'e-icons e-emoji';

      } else if (text === 'Michael') {

        return 'e-icons e-people';

      } else if (text === 'Root') {

        return 'e-icons e-emoji';

      }

    }

    return '';

  }

  onClick(): void {

    // Toggle the flag when the button is clicked

    this.useAlternateIcons = !this.useAlternateIcons;

    // Refresh the scheduler

    this.scheduleObj.refresh();

  }

}

Sample link: https://stackblitz.com/edit/resource-header-customize-9bshws?file=src%2Fapp.component.ts,src%2Fapp.component.html

Please let us know if you need any further assistance.

Regards,

Vijay

[Arturo Martinez]

exactly what i needed thanks!

[Swathi Ravi]

Hi Arturo,

We are glad to hear that our provided solution is working for you. Please feel free to reach out if you need any further assistance.

Regards,
Swathi Ravi

[pandrik sukkin]

Thanks for answering, you made my day.

[Swathi Ravi]

Hi Pandrik,

We are glad that our provided solution was helpful for you. Please feel free to reach out if you need any further assistance.

Regards,

Swathi