Dynamically add and remove resources

Question

Hi,I want to dynamically add/remove multiple resources for the list below on the scheduler. Dropdown menu for classes and checkbox for students. is that possible? ObjectClasses: Array(4)0: {Code: "Biology", Students: Array(1)}1: {Code: "History", Students: Array(9)}2: {Code: "Math", Students: Array(7)}3: {Code: "CS", Students: Array(9)}

Vengatesh Maniraj · Accepted Answer

Hi Muzaffer, 

Greetings from Syncfusion Support. 

We have checked your requirement “dynamically add/remove multiple resources” at our end and we have prepared the sample by making use of addResource and removeResource methods. 

scheduleObj.addResource( 
      students, 
      "Students", 
      scheduleObj.resourceBase.resourceCollection[1].dataSource.length - 1 
    ); 

scheduleObj.removeResource(selectedStudents.value, "Students"); 

Sample: https://stackblitz.com/edit/9hmbzw-xxfymd?file=index.js 

For the better experience, we have used the multiselect dropdown for the students.  

Kindly check the above sample and get back to us if you would require any further assistance. 

Regards, 
Vengatesh

Muzaffer Birben · Answer

Hi,I am trying to implement something like this and place the dropdown list on the header bar. On the scheduler, there should be only selected students so no need for grouping.   Thank you,

Vengatesh Maniraj · Answer

Hi Muzaffer, 

Thanks for the update. 

Based on your requirement, we have prepared a separate sample to render the dropdown in the header bar. The sample is available in the below link. 

Sample: https://stackblitz.com/edit/multiselect-dropdown-in-toolbar-ezcwuu?file=index.js 

In this sample. While selecting the resources it will be added into the scheduler and the same if you un-select the checkbox the corresponding resource will be removed from the scheduler. 

Kindly refer to the above sample and get back to us if you need any further assistance. 

Regards, 
Vengatesh

Muzaffer Birben · Answer

Hi,

I added a multiselect dropdown menu to the header bar but I wasn't able to implement the change function. the function below adds resources to the scheduler but it clears the multiselect list. I can select the same resource again because of the refresh function. If I don't refresh the scheduler, it doesn't add resources to the scheduler.

public onChange = (args: MultiSelectChangeEventArgs) => {

for (let i = 0; i < args.value.length; i++) {

this.teachers.find(item => {

if (item.Code == args.value[i]) {

this.ActivityScheduler.TeachersDataManager.insert(item);

this.ActivityScheduler.Schedule.refresh();

}

});

}

Thank you for your great support,

Muzaffer

Vengatesh Maniraj · Answer

Hi Muzaffer, 

Thanks for the update. 

We checked the shared codes by you and we suspect that you have pushed the resources in the multiselect dropdown data source which may the cause for your problem. We suggest you please use the query option to overcome this issue. Please refer to our previously provided sample. 

If the problem still exists, please replicate your problem in our provided sample to serve you better. 

Regards, 
Vengatesh

Muzaffer Birben · Answer

Hi,Unfortunately, the query option doesn't work in my case. However, I am able to add/remove resources dynamically to the scheduler. My only problem is that after refreshing the scheduler, it just destroys the selected items. multiselect.values has the selected items but it doesn't display the items on the bar. Also, it sets the multiselect.isDestroyed as true. I tried multiselect.refresh and it didn't work. Is there a way to display selected items on the bar?

Vengatesh Maniraj · Answer

Hi Muzaffer, 

Sorry for the inconvenience. 

We checked your reported problem and found the cause for this problem is you have refreshed the scheduler control which destroyed the multiselect control values. So we suggest you please use the dataBound event instead of using the refresh method to overcome this problem like the below code. 

function onChange(args) { 
  var resource = []; 
  for (var a = 0; a < args.value.length; a++) { 
    resource.push(calendarCollections[args.value[a]-1]); 
  } 
  scheduleObj.resources[0].dataSource = resource; 
  scheduleObj.dataBound; 
} 
    
Sample: https://stackblitz.com/edit/multiselect-dropdown-in-toolbar-ph82nn?file=index.js 

Kindly check the above sample and if you still face the problem please replicate the issue in the above sample to serve better. 

Regards, 
Vengatesh

Muzaffer Birben · Answer

Hi Vengatesh,Thank you for your great support. You've been really helpful. Lastly, in order to avoid event overlapping, I check isSlotAvailable. However, I have to pass the groupIndex. Otherwise, it returns false for an available time slot because there is an event at that time slot on another resource.  ActionEventArgs doesn't provide groupIndex or cellIndex. How can I get the cell details? or is there any configuration for the scheduler so one cell can't get more than one event?   public onActionBegin = async (event: ActionEventArgs): Promise<void> => {        if (event.requestType == "eventChange") {            this.ActivityScheduler.Schedule.isSlotAvailable(startDate, endDate);Thank you,

Vengatesh Maniraj · Answer

Hi Muzaffer, 

Thanks for the update. 

We checked your requirement “avoid the events overlapping ” at our end and the best solution is to achieve this requirement is that “isSlotAvailable”. We checked your shared code what you have tried in your project and we suggest you please pass the entire event object in the event change action instead of passing the start time, end time, and group index. Please refer to the below code snippet. 

 actionBegin: function(args) { 
    if (args.requestType === "toolbarItemRendering") { 
      var userIconItem = { 
        align: "Left", 
        type: "Input", 
        template: multiselectObj 
      }; 
      args.items.push(userIconItem); 
    } 
    if ( 
      args.requestType === "eventCreate" || 
      args.requestType === "eventChange" 
    ) { 
      var data = void 0; 
      if (args.requestType === "eventCreate") { 
        data = args.data[0]; 
      } else if (args.requestType === "eventChange") { 
        data = args.data; 
      } 
      if (!scheduleObj.isSlotAvailable(data)) { 
        args.cancel = true; 
      } 
    } 
  } 

Sample: https://stackblitz.com/edit/multiselect-dropdown-in-toolbar-ph82nn?file=index.js 

For more reference, we already have done the same scenario in our online sample demo. Kindly refer to the below sample for more reference. 

Online sample: https://ej2.syncfusion.com/javascript/demos/#/material/schedule/timeline-resources.html 

Kindly try the above solution and get back to us if you need any further assistance. 

Regards, 
Vengatesh