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.
- Render the Grid
JS
$("#Grid").ejGrid({
// 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" }
]
});
MVC
@(Html.EJ().Grid<object>("Grid")
.Datasource((IEnumerable<object>)ViewBag.data)
.AllowPaging()
.AllowFiltering()
.FilterSettings(f => f.FilterType(FilterType.Menu))
.Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").Add();
col.Field("CustomerID").HeaderText("Customer ID").Add();
col.Field("Freight").Format("{0:C}").Add();
col.Field("ShipCountry").HeaderText("Ship Country").Add();
col.Field("ShipCity").HeaderText("Ship City").Add();
})
.ClientSideEvents(eve => eve.Create("onCreate"))
)
ASP
<ej:Grid ID="Grid" runat="server" AllowPaging="true" AllowFiltering="true">
<FilterSettings FilterType="Menu"></FilterSettings>
<Columns>
<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" />
</Columns>
<ClientSideEvents Create="onCreate" />
</ej:Grid>
- 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
$(".e-autocomplete").ejAutocomplete("destroy");
$("#"+ 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
