Category / Section
How to customize Custom Filter elements?
1 min read
Solution
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.
Example
In the below example, we are going to customize custom filter with single condition.
JavaScript
$(function () {
$("#Grid").ejGrid({
// 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 }
]
});
});
MVC
@(Html.EJ().Grid<SampleDemo.Order>("Grid")
.Datasource((IEnumerable<object>)ViewBag.datasource)
.AllowFiltering()
.AllowPaging()
.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("Freight").HeaderText("Freight").TextAlign(TextAlign.Right).Width(80).Format("{0:C}").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.NET
<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">
<div>
<ej:Grid ID="OrdersGrid" runat="server" AllowPaging="True" >
<Columns>
<ej:Column Field="OrderID" HeaderText="Order ID" IsPrimaryKey="true" TextAlign="Right" Width="75">
</ej:Column>
<ej:Column Field="CustomerID" HeaderText="Customer ID" Width="90">
</ej:Column>
<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>
<ej:Column Field="ShipCity" HeaderText="Ship City" Width="90" />
<ej:Column Field="Verified" HeaderText="Verified" Width="90" />
</Columns>
<FilterSettings FilterType="Excel"></FilterSettings>
</ej:Grid>
</div>
</asp:Content>
// 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");
}
}
Result:
Single condition in custom filter
