The rows.filter() method applies a row filter to the JavaScript Scheduler component rows.
DayPilot.Scheduler.rows.filter(params)
params
- custom object (or a simple string value) that will be passed to onRowFilter
event as args.filterParam
.
To clear the filter, use a null
value or call rows.update()
without arguments.
onRowFilter event
<div class="space">
Filter: <input id="filter" /> <a href="#" id="clear">Clear</a>
</div>
<div id="dp"></div>
<script>
const dp = new DayPilot.Scheduler("dp", {
onRowFilter: (args) => {
if (args.row.name.toUpperCase().indexOf(args.filter.toUpperCase()) === -1) {
args.visible = false;
}
},
// ...
});
dp.init();
const app = {
elements: {
filterInput: document.getElementById('filter'),
clearLink: document.getElementById('clear'),
},
init() {
app.elements.filterInput.addEventListener('keyup', () => {
const query = app.elements.filterInput.value;
dp.rows.filter(query); // see onRowFilter handler above
});
app.elements.clearLink.addEventListener('click', (event) => {
event.preventDefault();
app.elements.filterInput.value = "";
dp.rows.filter(null);
});
}
};
app.init();
</script>