DayPilot Knowledge Base

AJAX Calendar/Scheduling Controls
DayPilot Pro (AJAX Calendar Control)
» DayPilot AJAX Calendar
DayPilot Pro (AJAX Monthly Calendar Control)
» DayPilot AJAX Monthly Calendar
DayPilot Pro (AJAX Scheduler Control)
» DayPilot AJAX 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.png

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

Related

How to use clientState property
How to show a modal dialog in ASP.NET MVC 3 Razor
How to implement Copy & Paste in the Calendar
Event Calendar for jQuery (ASP.NET MVC)