javascript html5 scheduler row filtering

Behavior:

  • You can filter the rows by calling rows.filter()

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

  • Resource hierarchy is supported

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="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>

Example: Show all children of matching parents

Note that the hiddenUsingFilter property is supported since version 2019.3.3985.

dp.onRowFilter = function(args) {
    if (args.row.name.toUpperCase().indexOf(args.filter.toUpperCase()) === -1) {
        args.visible = false;
    }
    var 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)

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

<script>
    $(document).ready(function() {

        function filter() {
            // see dp.onRowFilter below
            dp.rows.filter({
              query: $("#filter").val(),
              hideEmpty: $("#hideEmpty").is(":checked")
            });
        }

        $("#filter").keyup(function() {
            filter();
        });

        $("#hideEmpty").change(function() {
            filter();
        });

        $("#clear").click(function() {
            $("#filter").val("");
            filter();
            return false;
        });
    });
</script>

<script type="text/javascript">

    var dp = new DayPilot.Scheduler("dp");

    dp.onRowFilter = function(args) {
      var query = args.filter.query;
      var hideEmpty = args.filter.hideEmpty;

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

    // ...

    dp.init();

</script>

Demo

Tutorials

Angular

Tutorials: