DayPilot » Knowledge Base » How to implement fast AJAX event filtering in the calendar

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 = '';
    filter();
}


function filter() {

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

function key(e) {
    var keynum  = (window.event) ? event.keyCode : e.keyCode;
    if (keynum === 13) {
        filter();
        return false;
    }
    return true;     
}
</script>

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>
</div>

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);
                DayPilotScheduler1.DataBind();
                DayPilotScheduler1.Update(CallBackUpdateType.EventsOnly);
                return; 
            // ...
        }
    }

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

Fast Filter demos

• DayPilot Month
• DayPilot Scheduler