javascript html5 scheduler row filtering

Behavior:

  • You can apply the row filter by calling the rows.filter() with the filter parameter object as an argument.

  • The row visibility will be determined using the onRowFilter event handler (the param value from the rows.filter(param) method call will be available as args.filterParam).

  • Resource hierarchy is supported. Use the rowFilterParentsAlwaysVisible property to specify whether the parent rows should always be visible.

JavaScript

The JavaScript Scheduler supports client-side row filtering since build 7.9.1246.

Example: Filtering based on row name

<div class="space">
  Filter: <input id="filter" />
  <a href="#" id="clear">Clear</a>
</div>

<div id="scheduler"></div>

<script>
  const scheduler = new DayPilot.Scheduler("scheduler", {
    onRowFilter: (args) => {
      const filter = args.filterParam;

      if (args.row.name.toUpperCase().indexOf(filter.toUpperCase()) === -1) {
        args.visible = false;
      }
    },
    // ...
  });
  scheduler.init();

  const app = {
    elements: {
      filter: document.querySelector("#filter"),
      clear: document.querySelector("#clear")
    },
    filter() {
      const query = app.elements.filter.value.trim();
      scheduler.rows.filter(query);
    },
    init() {
      app.elements.filter.addEventListener("keyup", () => app.filter());
      app.elements.clear.addEventListener("click", (e) => {
        e.preventDefault();
        app.elements.filter.value = "";
        scheduler.rows.filter();
      });
    }
  };
  app.init();
</script>

Example: Show all children of matching parents

Note that the hiddenUsingFilter property is supported since version 2019.3.3985.

onRowFilter: (args) => {
    if (args.row.name.toUpperCase().indexOf(args.filter.toUpperCase()) === -1) {
        args.visible = false;
    }
    const parent = args.row.parent();
    if (parent && !parent.hiddenUsingFilter) {
      args.visible = true;
    }
}

Example: Filtering based on custom data (tags)

Custom row tags are supported since build 8.0.1545.

Specifying custom row data (tags):

const resources = [
   { name: "Room A", id: "A"},
   // ...
   { name: "Room J", id: "J" },
   { name: "Room K", id: "K", tags: {alwaysVisible: true} }
];

scheduler.update({resources});

Using tags during filtering:

onRowFilter: (args) => {
  if (args.row.name.toUpperCase().indexOf(args.filter.toUpperCase()) === -1) {
    args.visible = args.row.tags && args.row.tags.alwaysVisible;
  }
};

Example: Complex filter (by name, hide empty rows checkbox)

javascript html5 scheduler row filtering complex

This example combines two filter parameters (search string and "hide empty rows" checkbox):

<div class="space">
    Filter: <input id="filter" /> <a href="#" id="clear">Clear</a>
    <input type="checkbox" id="hideEmpty"> Hide empty
</div>

<div id="scheduler"></div>

<script>

    const scheduler = new DayPilot.Scheduler("scheduler", {
        onRowFilter: (args) => {
          const query = args.filterParam.query;
          const hideEmpty = args.filterParam.hideEmpty;

          if (args.row.name.toUpperCase().indexOf(query.toUpperCase()) === -1) {
            args.visible = false;
          }
          else if (hideEmpty && args.row.events.isEmpty()){
            args.visible = false;
          }
        },

        // ...

    });
    scheduler.init();


    const app = {
      elements: {
        filter: document.querySelector("#filter"),
        hideEmpty: document.querySelector("#hideEmpty"),
        clear: document.querySelector("#clear")
      },
      filter() {
        scheduler.rows.filter({
          query: app.elements.filter.value,
          hideEmpty: app.elements.hideEmpty.checked
        });
      },
      init() {
         app.elements.filter.addEventListener("keyup", () => app.filter());
         app.elements.hideEmpty.addEventListener("change", () => app.filter());
         app.elements.clear.addEventListener("click", (e) => {
           e.preventDefault();
           app.elements.filter.value = "";
           app.filter();
         });
      }    
    };
    app.init();

</script>

Demo

Tutorials

Angular

Tutorials:

Availability

Availability of this feature in DayPilot editions:

LitePro
DayPilot for JavaScript
DayPilot for ASP.NET WebForms
DayPilot for ASP.NET MVC
DayPilot for Java