DayPilot Knowledge Base

AJAX Calendar/Scheduling Controls
DayPilot Pro (AJAX Calendar Control)
» DayPilot ASP.NET Calendar
DayPilot Pro (AJAX Monthly Calendar Control)
» DayPilot ASP.NET Monthly Calendar
DayPilot Pro (AJAX Scheduler Control)
» DayPilot ASP.NET Scheduler
DayPilot » Knowledge Base » How to implement fast AJAX event filtering in the calendar

How to implement fast AJAX event filtering in the calendar

Last revision: May 17, 2012

scheduler fast ajax event filter blue

This example uses .commandCallBack() to refresh the calendar and .clientState to store the filter condition:

JavaScript helpers (.aspx)

<script type="text/javascript">
/* Fast filter helpers */

function clear() {
    var filterBox = document.getElementById("TextBoxFilter");
    filterBox.value = '';

function filter() {
    var filterBox = document.getElementById("TextBoxFilter");
    var filterText = filterBox.value;
    dps1.clientState = {"filter": filterText};

function key(e) {
    var keynum  = (window.event) ? event.keyCode : e.keyCode;
    if (keynum === 13) {
        return false;
    return true;     

Search box (.aspx)

<div style="margin-bottom:5px">
    <b>Fast filter:</b> <input type="text" id="TextBoxFilter" onkeypress="return key(event);" />&nbsp;<a href="javascript:filter();" style="font-weight:bold">Apply</a>&nbsp;<a href="javascript:clear();">Clear</a>

Command event handler (.aspx.cs)

    protected void DayPilotScheduler1_Command(object sender, DayPilot.Web.Ui.Events.CommandEventArgs e)
        switch (e.Command)
            // ...
            case "filter":
                string filter = (string)DayPilotScheduler1.ClientState["filter"];
                DayPilotScheduler1.DataSource = getData(DayPilotScheduler1.StartDate, DayPilotScheduler1.EndDate.AddDays(1), filter);
            // ...

This example uses clientState field to make the filter box content available on the server side in all CallBack requests.

Fast Filter demos


How to use clientState property
How to show a modal dialog in ASP.NET MVC 3 Razor
How to show one month per cell in Scheduler (CellDuration = Month)
How to implement Copy & Paste in the Calendar