Filter Client Side Event|UI Control for ASP.NET AJAX, C#, VB.NET

Filter Client Side Event in ASP.NET

Home > How to > Filter Client Event

This Filter control is one of the consisting components that are included in the Kettic UI suite for ASP.NET AJAX. This control is mainly developed to help users create complicated and advanced filtering expressions for your application with ease.

In this user manual, we will get to know some of the useful client side events provided by this Filter control. Developers will be guided to get this Filter client object in the first place, and then be introduced to some crucial events, methods, properties, and so on.

To begin with client event settings and all, users should firstly get the Kettic Filter client object to begin with. Using the ASP.NET AJAX demo codes, which will demonstrated in the later sections, users can easily get reference of Kettic Filter control client side object.

When it is all set, now it is time for you to learn some of the important properties and client side events for this Filter control customization. In the following sections, we will proceed with a brief introduction of the related client side events. Please read on, and, if any questions, feel free to drop us a line for service support.

OnFilterCreated: You can fire this client side event after a Kettic Filter is created. You can only proceed with further filter customization after you have added a filter to your project.

OnFilterCreating: Please note that you can only fire this client side event before the Kettic Filter is created, which means you can apply this event when you want to integrate a filtering functionality.

OnFilterDestroying: When the Kettic Filter object is destroyed, users can fire this client side event. A sample scenario would be when you have destroyed the filter object on each window.

OnMenuShowing: This client side event is fired before the Kettic Filter context menu is shown. In other words, you can simply fire this event to show the filter context menu.

OnMenuShown: When the Kettic Filter context menu is already shown, you can try firing this client side event.

ASPX sample codes:

<kettic:PerFilter runat="server" ID="PerFilter1"
                
                <ClientSettings>
                    <ClientEvents OnFilterCreated="FilterCreated" />
                </ClientSettings>
            </kettic:PerFilter>

Javascript codes:

var filter;

function FilterCreated(sender, args)
{
    filter = sender;
    var menu = filter.get_contextMenu();
    menu.add_showing(FilterMenuShowing);
}

function FilterMenuShowing(sender, args)
{
    var currentExpandedItem = sender.get_attributes()._data.ItemHierarchyIndex;
    var fieldName = filter._expressionItems[currentExpandedItem];
    var allFields = filter._dataFields;
    if (fieldName == "Country")
    {
        for (var i = 0, j = allFields.length; i < j; i++)
        {
            if (allFields[i].FieldName == fieldName)
            {
                sender.findItemByValue("StartsWith").set_visible(false);
                sender.findItemByValue("EndsWith").set_visible(false);
                sender.findItemByValue("GreaterThan").set_visible(false);
                sender.findItemByValue("GreaterThanOrEqualTo").set_visible(false);
                sender.findItemByValue("LessThan").set_visible(false);
                sender.findItemByValue("LessThanOrEqualTo").set_visible(false);
                sender.findItemByValue("Contains").set_visible(false);
                sender.findItemByValue("DoesNotContain").set_visible(false);
                sender.findItemByValue("Between").set_visible(false);
                sender.findItemByValue("NotBetween").set_visible(false);
            }
        }
    }
    else if (fieldName == "HomePhone")
    {
        for (var i = 0, j = allFields.length; i < j; i++)
        {
            if (allFields[i].FieldName == fieldName)
            {
                sender.findItemByValue("Between").set_visible(false);
                sender.findItemByValue("NotBetween").set_visible(false);
                sender.findItemByValue("GreaterThan").set_visible(false);
                sender.findItemByValue("GreaterThanOrEqualTo").set_visible(false);
                sender.findItemByValue("LessThan").set_visible(false);
                sender.findItemByValue("LessThanOrEqualTo").set_visible(false);
            }
        }
    }
    else if (fieldName == "HireDate")
    {
        for (var i = 0, j = allFields.length; i < j; i++)
        {
            if (allFields[i].FieldName == fieldName)
            {
                sender.findItemByValue("Contains").set_visible(false);
                sender.findItemByValue("DoesNotContain").set_visible(false);
                sender.findItemByValue("StartsWith").set_visible(false);
                sender.findItemByValue("EndsWith").set_visible(false);
                sender.findItemByValue("IsEmpty").set_visible(false);
                sender.findItemByValue("NotIsEmpty").set_visible(false);
            }
        }
    }
}

ASP.NET AJAX UI Controls