Behavior:
You can filter the rows by calling rows.filter()
The row visibility will be determined using onRowFilter event handler (the
param
value from therows.filter(param)
method call will be available asargs.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)
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: