html5-scheduler-row-filtering.png

Behavior:

  • You can filter the rows by calling dp.rows.filter(param)
  • The row visibility will be determined using onRowFilter event handler (the rows.filter() method parameter will be available as args.filter)
  • Resource hierarchy is supported

JavaScript

The 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="dp"></div>

<script>
    $(document).ready(function() {
        $("#filter").keyup(function() {
            var query = $(this).val();
            dp.rows.filter(query); // see dp.onRowFilter below
        });

        $("#clear").click(function() {
            $("#filter").val("");
            dp.rows.filter(null);
            return false;
        });
    });
     
    var dp = new DayPilot.Scheduler("dp");
    
    // ...

    dp.onRowFilter = function(args) {
        if (args.row.name.toUpperCase().indexOf(args.filter.toUpperCase()) === -1) {
            args.visible = false;
        }
    };

    dp.init();
    
</script>

Demo:

Example: Filtering based on custom data (tags)

Custom row tags are supported since build 8.0.1545.

Specifying custom row data (tags)

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

Using tags during filtering

dp.onRowFilter = function(args) {
  if (args.row.name.toUpperCase().indexOf(args.filter.toUpperCase()) === -1) {
    args.visible = false || (args.row.tags && args.row.tags.alwaysVisible);
  }
};

Angular 2+

Tutorials: