1. Home
  2. Forum
  3. JavaScript - EJ 2
  4. Need help with Scheduler data showing or hidden when changing resource dynamically

Need help with Scheduler data showing or hidden when changing resource dynamically

Hello,

I have this sheduler and i am bringing data from the database.

In the example below i use static data and it works but when i bring data to the multiselect field and choose a resource it removes all the data the code has not changed i just changed the array list i use. Is it because the name of the data is ResourceId and i use the value as employeeID ?


I removed the coloring which i am not sure if that would play a role to this predicament. There is a difference in the resource id not showing up on the tooltip on my side here is a side by side example.



I do not get an error on the code it just seems when it queries the data it makes everything else disappear.

https://stackblitz.com/edit/js-ydgkes?file=index.js


3 Replies
SK Satheesh Kumar Balasubramanian Syncfusion Team November 26, 2021 09:02 AM UTC

Hi Marios, 
  
Thanks for using Syncfusion Products. 
  
We have checked your shared sample and let you know that we are facing below issue in shared sample. Can you please share issue replication sample with proper replicating steps to provide the prompt solution at earliest? 
  
 
  
Also, we suspect that field mapping is not properly given. 
  
Regards, 
Satheesh Kumar B 


MT Marios Tasou November 29, 2021 08:28 AM UTC

Good Morning Satheesh Kumar,




calendar data  array below


code used in the popup when it opens the modal 

         var processElement = args.element.querySelector('#ResourceId');

                if (!processElement.classList.contains('e-multiselect')) {

                    var multiSelectObject = new ej.dropdowns.MultiSelect({

                        placeholder: 'Select a Resource',

                        mode: 'CheckBox',

                        showSelectAll: true,

                        selectAllText: 'Select All',

                        dataSource: Calendardata,

                        fields: { text: 'full_Name', value: 'employeeID'},

                        value:

                            args.data.ResourceId instanceof Array

                                ? args.data.ResourceId

                                : [args.data.ResourceId]

                    });

                    multiSelectObject.appendTo(processElement);

                }


code for the change when changing resource

    function onbuttonChange(args) {

        debugger;

        var predicate;

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

            var Resourcvalue = a[i];

            if (predicate) {

                predicate = predicate.or(new ej.data.Predicate('employeeID', 'equal', Resourcvalue));

            } else {

                predicate = new ej.data.Predicate('employeeID', 'equal', parseInt(Resourcvalue));

            }

        }

        scheduleObj.eventSettings.query = predicate ? new ej.data.Query().where(predicate) :

            new ej.data.Query().where('employeeID', 'equal', 5);

    }


    var multiSelectObject = new ej.dropdowns.MultiSelect({

        placeholder: 'Select a Resource',

        mode: 'CheckBox',

        showSelectAll: true,

        selectAllText: 'Select All',

        dataSource: Calendardata,

        fields: { text: 'full_Name', value: 'employeeID' },

        change: onbuttonChange,

        value: [5]

    });


SK Satheesh Kumar Balasubramanian Syncfusion Team November 30, 2021 12:22 PM UTC

Hi Marios, 
  
Thanks for your update. 
  
We have validated your reported query "Need help with Scheduler data showing or hidden when changing resource dynamically" based on shared details and could reproduce the reported issue at our end. We let you know that you have not given EmployeeID in schedule event which is the cause for the reported issue. 
  
  
index.js:  
var Calendardata = [ 
  { EmployeeID: 3, full_Name: 'Miltiadous Aggelos' }, 
  { EmployeeID: 4, full_Name: 'Secretary Maria' }, 
  { EmployeeID: 5, full_Name: 'Agapiou Agapios' }, 
  { EmployeeID: 7, full_Name: 'Ali Hora' }, 
]; 
  
var data = new ej.base.extend([], window.scheduleData, null, true); 
var scheduleObj = new ej.schedule.Schedule({ 
  width: '100%', 
  height: '550px', 
  views: ['Day', 'Week', 'WorkWeek', 'Month'], 
  resources: [ 
    { 
      field: 'EmployeeID', 
      title: 'Calendardata', 
      name: 'Calendardata', 
      allowMultiple: true, 
      dataSource: Calendardata, 
      textField: 'full_Name', 
      idField: 'EmployeeID', 
    }, 
  ], 
  selectedDate: new Date(2019, 0, 7), 
  editorTemplate: '#EventEditorTemplate', 
  popupOpen: function (args) { 
    if (args.type === 'Editor') { 
      var startElement = args.element.querySelector('#StartTime'); 
      if (!startElement.classList.contains('e-datetimepicker')) { 
        new ej.calendars.DateTimePicker( 
          { value: new Date(startElement.value) || new Date() }, 
          startElement 
        ); 
      } 
      var endElement = args.element.querySelector('#EndTime'); 
      if (!endElement.classList.contains('e-datetimepicker')) { 
        new ej.calendars.DateTimePicker( 
          { value: new Date(endElement.value) || new Date() }, 
          endElement 
        ); 
      } 
      var processElement = args.element.querySelector('#ResourceId'); 
      if (!processElement.classList.contains('e-multiselect')) { 
        var multiSelectObject = new ej.dropdowns.MultiSelect({ 
          placeholder: 'Select a Resource', 
          mode: 'CheckBox', 
          showSelectAll: true, 
          selectAllText: 'Select All', 
          dataSource: Calendardata, 
          fields: { text: 'full_Name', value: 'EmployeeID' }, 
          change: onbuttonChange, 
          value: 
            args.data.EmployeeID instanceof Array 
              ? args.data.EmployeeID 
              : [args.data.EmployeeID], 
        }); 
        multiSelectObject.appendTo(processElement); 
      } 
    } 
  }, 
  eventSettings: { 
    dataSource: [ 
      { 
        Id: 1, 
        Subject: 'Explosion of Betelgeuse Star', 
        Location: 'Space Centre USA', 
        StartTime: '2019-01-06T04:00:00.000Z', 
        EndTime: '2019-01-06T05:30:00.000Z', 
        CategoryColor: '#1aaa55', 
        EmployeeID: 3, 
      }, 
    ], 
  }, 
}); 
scheduleObj.appendTo('#Schedule'); 
  
function onbuttonChange(args) { 
  var predicate; 
  if (args.value) { 
    for (var i = 0, a = args.value; i < a.length; i++) { 
      var Resourcvalue = a[i]; 
      if (predicate) { 
        predicate = predicate.or( 
          new ej.data.Predicate('EmployeeID', 'equal', Resourcvalue) 
        ); 
      } else { 
        predicate = new ej.data.Predicate( 
          'EmployeeID', 
          'equal', 
          parseInt(Resourcvalue) 
        ); 
      } 
    } 
  } 
  scheduleObj.eventSettings.query = predicate 
    ? new ej.data.Query().where(predicate) 
    : new ej.data.Query().where('EmployeeID', 'equal', 5); 
} 
  
Could you please check the above sample and confirm whether the above solution resolves the problem at your end?  
  
Regards, 
Satheesh Kumar B 


Loader.
Up arrow icon