Schedule - Show/Hide resource

[Ivan]

Hello.

I made custom dropdown list for resources. Purpose of this list is to enable selecting one of resource or to show all resources side-by-side. 

actionBegin:

let employeeDropdown = {
   align: 'Center', cssClass: 'e-schedule-employee-dropdown-parent'
};
args.items.push(employeeDropdown);

actionComplete:

let employeeDropdownParentDiv = _scheduler.element.querySelector('.e-schedule-employee-dropdown-parent');
employeeDropdownParentDiv.appendChild(new ej.base.createElement('div', {
   className: 'e-schedule-employee-dropdown'
}));

let employeeDropdownDiv = _scheduler.element.querySelector('.e-schedule-employee-dropdown');
resourcesDropDownListObject.appendTo(employeeDropdownDiv);

So, in this dropdownlist I have: 

• All staff
• Resource 1
• Resource 2

Dropdown list has predefined value All Staff or first available resource ( in above config Resource 1).

On initial setup I made config in way that based on predefined value I have resources variable with one or all values

let _resourcesData = _resources;
if (_initialEmployee !== "allStaff") {
   _resourcesData = _resources.filter(function (resource) {return resource.id === _initialEmployee; });
}

and resources:

resources: [{
   field: 'EmployeeId',
   title: 'Employee',
   name: _resourcesGroupId,
   allowMultiple: false,
   dataSource: _resourcesData,
   textField: 'name',
   idField: 'id',
   colorField: 'calendarColor'
}],

That all works fine at initial load.

The problem lies in change event on dropdown element. I used your example https://ej2.syncfusion.com/javascript/demos/#/material/schedule/add-remove-resources.html

but addResource and removeResource method triggers data fetch on every call.

//resourcesSelectObject - all resources + AllStaff item
//resourcesObject - all resources ( Resource1, Resource2, ... )

let resourcesDropDownListObject = new ej.dropdowns.DropDownList({
   dataSource: resourcesSelectObject,
   fields: {value: 'id', text: 'name'},
   value: _initialEmployee,
   change: function (args) {
      _scheduler.removeResource(resourcesObject, _resourcesGroupId);

      if (args.value === "allStaff") {
         for (let i = 0; i < resourcesObject.length; i++) {
            _scheduler.addResource(resourcesObject[i], _resourcesGroupId);
         }
         _scheduler.currentView = "Day";
         return;
      }

      let resourceData = resourcesObject.filter(function (resource) {return resource.id === args.value; });
      _scheduler.addResource(resourceData[0], _resourcesGroupId);
   }
});

On change I want to remove all currently defined resources and set new set of resources.

On every call addResource or removeResource method I have one call to backend for data - this is problem. Eg. If I select AllStaff i have n+1 same request where n is number of resources. 

How can I change this behaviour and eliminate multiple data requests?

Attachment: showhide_63ed2136.zip

[Hareesh Balasubramanian]

Hi Ivan, 

Greetings from Syncfusion Support. 

We have validated your shared code snippets and kindly use the query to filter the data source for the resources instead of using addResource/removeResource method for filtering purpose and for further reference kindly refer the below code snippets, 

Code snippet: 

  onChange(args: MultiSelectChangeEventArgs) { 

    let resourcePredicate; 

    for (var a = 0; a < args.value.length; a++) { 

      var predicate = new Predicate("CalendarId", "equal", args.value[a]); 

      resourcePredicate = resourcePredicate ? resourcePredicate.or(predicate) : predicate; 

    } 

    let resourceQuery = resourcePredicate ? new Query().where(resourcePredicate) : new Query(); 

    this.scheduleObj.resources[0].query = resourceQuery; 

  } 

And for the same we have prepared a sample and it can be viewed from the following link, 

Sample: https://stackblitz.com/edit/angular-kzyhxb-4khnjy?file=app.component.ts 

Kindly try the above sample and get back to us for further assistance. 

Regards, 

Hareesh 

[Ivan]

Hello Hareesh,

I apply your proposed solution and it solves my problem.

Thanks!

[Vengatesh Maniraj]

Hi Ivan, 

You are most welcome. 

We are happy that your problem has resolved. 

Please get in touch with us if you would require any further assistance. 

Regards, 

Vengatesh 

[Ivan]

Can you check actionComplete and adding this dropdown to Schedule toolbar?

Currently solution, adds dropdown to toolbar, but on first opening dropdown it disappears after that it works normally until I click on some other buttons in toolbar. 

[Vengatesh Maniraj]

Hi Ivan, 

Thanks for the update. 

We have validated the reported scenario and we suggest kindly use the acrionBegin event to add the dropdown in Scheduler’s toolbar which work works perfectly. For the same, we have prepared the sample that can be available in below link. 

Sample: https://stackblitz.com/edit/multiselect-dropdown-in-toolbar?file=index.js 

Kindly check the above sample and get back to us if you would require any further assistance.  

Regards, 

Vengatesh 

[Ivan]

Hi Vengatesh,

it works! Thanks for answering!

KR,
Ivan

[Vengatesh Maniraj]

Hi Ivan, 

You are most welcome. 

We are happy that our solution has fulfilled your requirement. 

Please get in touch with us if you would require any further assistance. 

Regards, 

Vengatesh