Possibility to Search and Filter data in SchedulerComponent

Question

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 · Accepted Answer

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 · Answer

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:searchappointmentsThis we feel would avoid having a Query and reassigning the datasource back to scheduler.Regards,Harsha

Hareesh Balasubramanian · Answer

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