Possibility to Search and Filter data in SchedulerComponent

[Harsha Ramamurthy]

Hi,

We are trying to explore the possibility of search and filtering in react ScheduleComponent.

For example consider data fed to Scheduler Component as below:

[

    {

      Id: 45769803,

      Subject: 'CT Spine',

      Location: 'Emergency Room',

      Description : 'Procedure to have a CT Spine',

      StartTime: new Date(2020, 10, 15, 5, 0),

      EndTime: new Date(2020, 10, 15, 5, 15),

      IsAllDay: false

    },

    {

      Id: 1234,

      Subject: 'CT Lungs',

      Location: 'Emergency Room',

      Description : 'Procedure to have a CT Lungs',

      StartTime: new Date(2020, 10, 16, 5, 0),

      EndTime: new Date(2020, 10, 16, 6, 30),

      IsAllDay: false

    }

]  

And we have instantiated Scheduler Component as below

      <ScheduleComponent width='100%' height='100%' agendaDaysCount={8} selectedDate={new Date(2020, 10, 15)}

        eventSettings={{ dataSource : this.localData }} 

Scheduler is already rendered and now if user wants to search for say "Lungs", how this search input to be passed to ScheduleComponent, so it can display only intended events.

Regards,

Harsha

[Hareesh Balasubramanian]

Hi Harsha, 

Greetings from Syncfusion Support..! 

We have prepared a sample based on your shared query “need to filter the events based on the event fields and those filtered events to be assigned as a data source for the Scheduler” which can be viewed from the following link. 

Sample: https://stackblitz.com/edit/react-customed-search-events-sample?file=index.js  

  searchOnclick() { 

    let searchObj = []; 

    let startDate; 

    let endDate; 

    let formElements = [].slice.call( 

      document.querySelectorAll(".event-search .search-field") 

    ); 

    formElements.forEach(node => { 

      let fieldOperator; 

      let predicateCondition; 

      let fieldValue; 

      let fieldInstance; 

      if ( 

        node.value && 

        node.value !== "" && 

        !node.classList.contains("e-datepicker") 

      ) { 

        fieldOperator = "contains"; 

        predicateCondition = "or"; 

        fieldValue = node.value; 

        searchObj.push({ 

          field: node.getAttribute("data-name"), 

          operator: fieldOperator, 

          value: fieldValue, 

          predicate: predicateCondition, 

          matchcase: true 

        }); 

      } 

      if ( 

        node.classList.contains("e-datepicker") && 

        node.ej2_instances[0].value 

      ) { 

        fieldInstance = node.ej2_instances[0]; 

        fieldValue = fieldInstance.value; 

        if (node.classList.contains("e-start-time")) { 

          fieldOperator = "greaterthanorequal"; 

          predicateCondition = "and"; 

          startDate = new Date(+fieldValue); 

        } else { 

          fieldOperator = "lessthanorequal"; 

          predicateCondition = "and"; 

          let date = new Date(+fieldInstance.value); 

          fieldValue = new Date(date.setDate(date.getDate() + 1)); 

          endDate = fieldValue; 

        } 

        searchObj.push({ 

          field: node.getAttribute("data-name"), 

          operator: fieldOperator, 

          value: fieldValue, 

          predicate: predicateCondition, 

          matchcase: false 

        }); 

      } 

    }); 

    if (searchObj.length > 0) { 

      let filterCondition = searchObj[0]; 

      let predicate = new Predicate( 

        filterCondition.field, 

        filterCondition.operator, 

        filterCondition.value, 

        filterCondition.matchcase 

      ); 

      for (let i = 1; i < searchObj.length; i++) { 

        predicate = predicate.and( 

          searchObj[i].field, 

          searchObj[i].operator, 

          searchObj[i].value, 

          searchObj[i].matchcase 

       ); 

      } 

      let result = new DataManager( 

        this.scheduleObj.getEvents(startDate, endDate, true) 

      ).executeLocal(new Query().where(predicate)); 

      this.showSearchEvents("show", result); 

    } else { 

      this.showSearchEvents("hide"); 

    } 

  } 

  clearOnClick() { 

    document.getElementById("schedule").style.display = "block"; 

    document.getElementById("form-search").reset(); 

    this.showSearchEvents("hide"); 

  } 

  showSearchEvents(type, data) { 

    if (type === "show") { 

      this.scheduleObj.eventSettings.dataSource = data; 

    } else { 

      this.scheduleObj.eventSettings.dataSource = this.data; 

    } 

  } 

Kindly try the above solution and get back to us if you need any further assistance. 

We will be happy to assist you..! 

Regards, 

Hareesh  

[Harsha Ramamurthy]

Thanks for your reply.

Am wondering if we can have an option similar to one explained here for react compoents.

https://help.syncfusion.com/api/js/ejschedule#methods:searchappointments

This we feel would avoid having a Query and reassigning the datasource back to scheduler.

Regards,

Harsha

[Hareesh Balasubramanian]

Hi Harsha, 

Sorry for the inconvenience caused. 

In our previously updated sample, we have prepared a sample with all the fields (Subject, Location, StartTime, EndTime) for the customize filtering for the events. So we have modified our previously updated sample by simply filtering the events using a single query and assigned those filtered events as a data source for the Scheduler, which can be viewed from the following link. 

Sample: https://stackblitz.com/edit/react-customized-filtered-events-sample?file=index.js  

  btnClick() { 

    var keyWork = "Lungs"; 

    new DataManager(this.scheduleObj.getEvents(null, null, true)) 

      .executeQuery( 

        new Query().search( 

          keyWork, 

          ["Subject", "Location", "Description"], 

          null, 

          true, 

          true 

        ) 

      ) 

      .then(e => { 

        this.scheduleObj.eventSettings.dataSource = e.result; 

      }); 

  } 

Kindly try the above solution and let us know if this meets your requirement. 

Regards, 

Hareesh