Articles in this section
Category / Section

How to customize Custom Filter elements?

1 min read


Using actionComplete event, we can customize custom filter. This event will trigger before open of custom filter dialog. In this event, we need check condition requestType and isCustomFilter using arguments.


In the below example, we are going to customize custom filter with single condition.


$(function () {
                // the datasource "window.gridData" is referred from jsondata.min.js
                dataSource: window.gridData,
                allowPaging: true,
                allowFiltering: true,
                enableHeaderHover: true,
                filterSettings: { filterType: "excel" },
                actionComplete: "Complete",
                columns: [
                        { field: "OrderID", isPrimaryKey: true, headerText: "Order ID", textAlign: ej.TextAlign.Right, width: 75 },
                        { field: "CustomerID", headerText: "Customer ID", width: 90 },
                        { field: "EmployeeID", headerText: "Employee ID", textAlign: ej.TextAlign.Right, width: 90 },
                        { field: "Freight", headerText: "Freight", textAlign: ej.TextAlign.Right, format: "{0:C2}", width: 80 },
                        { field: "ShipCity", headerText: "Ship City", width: 90 },
                        { field: "Verified", headerText: "Verified", width: 90 }




        .FilterSettings(filter => { filter.FilterType(FilterType.Excel); })
        .Columns(col =>
            col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(75).Add();
            col.Field("CustomerID").HeaderText("Customer ID").Width(90).Add();
            col.Field("EmployeeID").HeaderText("Employee ID").Width(90) .TextAlign(TextAlign.Right).Add();
            col.Field("ShipCity").HeaderText("Ship City").Width(90).Add();
            col.Field("Verified").HeaderText("Ship City").Width(90).Add();
         .ClienSideEvents(eve => { eve.ActionComplete("Complete"); })



<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">
        <ej:Grid ID="OrdersGrid" runat="server" AllowPaging="True" >
                <ej:Column Field="OrderID" HeaderText="Order ID" IsPrimaryKey="true" TextAlign="Right" Width="75">
                <ej:Column Field="CustomerID" HeaderText="Customer ID" Width="90">
                <ej:Column Field="EmployeeID" HeaderText="Employee ID" TextAlign="Right"  Width="90" />
                <ej:Column Field="Freight" HeaderText="Freight" TextAlign="Right" Width="80" Format="{0:C}">
                <ej:Column Field="ShipCity" HeaderText="Ship City" Width="90" />
                <ej:Column Field="Verified" HeaderText="Verified" Width="90" />
<FilterSettings FilterType="Excel"></FilterSettings>


// actionComplete event of ejGrid
function Complete(args) {
            if (args.requestType == "filterafteropen" && args.isCustomFilter) {
                $("#" + this._id + args.columnType + "_CustomFDlg").find(".e-optable .e-predicate").css("display", "none");
                var element = $("#" + this._id + args.columnType + "_CustomFDlg").find(".e-optable .e-fields")[1];
                $(element).css("display", "none");



                             Single condition in custom filter

Did you find this information helpful?
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment