Articles in this section
Category / Section

How to customize the controls inside menu filter dialog

1 min read

We can override the ejAutocomplete control in the menu filter dialog as ejDropDownList control by using create event of Grid. The following code example shows the way to override the ejAutocomplete in the filter menu.

  1. Render the Grid


                // the datasource "window.gridData" is referred from jsondata.min.js
                dataSource: window.gridData,
                allowPaging: true,
                create: "onCreate",
                allowFiltering: true,
                filterSettings: {filterType: "menu"},
                columns: [
                      { field: "OrderID", headerText: "Order ID" },
                      { field: "CustomerID", headerText: "Customer ID" },
                      { field: "Freight", width: 100, format: "{0:C}" },
                      { field: "ShipCountry", headerText: "Ship Country" },
                      { field: "ShipCity", headerText: "Ship City" }


            .FilterSettings(f => f.FilterType(FilterType.Menu))
            .Columns(col =>
                 col.Field("OrderID").HeaderText("Order ID").Add();
                 col.Field("CustomerID").HeaderText("Customer ID").Add();
                 col.Field("ShipCountry").HeaderText("Ship Country").Add();
                 col.Field("ShipCity").HeaderText("Ship City").Add();
        .ClientSideEvents(eve => eve.Create("onCreate"))


<ej:Grid ID="Grid" runat="server" AllowPaging="true" AllowFiltering="true">
            <FilterSettings FilterType="Menu"></FilterSettings>
                 <ej:Column Field="OrderID" HeaderText="Order ID" />                
                <ej:Column Field="CustomerID" HeaderText="Customer ID" />
                <ej:Column Field="Freight" HeaderText="Freight" Format="{0:C}"  />
                <ej:Column Field="ShipCountry" HeaderText="Ship Country" />    
                <ej:Column Field="ShipCity" HeaderText="Ship City" />                            
            <ClientSideEvents Create="onCreate" />    
  1. Before override, we need to bind open event for filter dialog in the create event of Grid control then destroy the existing ejAutocomplete and render the ejDropDownList in the open event like as below.
function onCreate(args) { 
            $("#" + this._id + "_" + "stringDlg").ejDialog({ 
                //bind the open event for the filter dialog 
                open: function (args) { 
                    var gridObj = $("#Grid").ejGrid("instance"), 
                    curField = $(".e-autocomplete").ejAutocomplete("model.fields.text");
                    data = ej.distinct(window.gridData, curField);
                    //Render the ejDropDownList instead of ejAutoComplete 
                    $("#"+ gridObj._id + "_acString").ejDropDownList({dataSource: data, width:"100%"}); 


The following screenshot display the default values while adding the record.

Figure 1: Dropdownlist is rendered for Filter value

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