How to change the default filter operator type to "Contains" in filter menu?
You can change the default filter operator type “startswith” of the filter menu to other operators like contains, lessthan and etc. in dataBound event of the Grid. The following code example shows the way to change the default operator type to “contains” in the filter menu.
1. Render the Grid control.
JS
<div id="Grid"></div> <script type="text/javascript"> $(function () {// Document is ready. $("#Grid").ejGrid({ dataSource: window.gridData, allowPaging: true, allowFiltering: true, filterSettings: { filterType: "menu" }, columns: [ { field: "OrderID", headerText: "Order ID", width: 75 }, { field: "CustomerID", headerText: "Customer ID", width: 90 }, { field: "EmployeeID", headerText: "Employee ID", width: 75 }, { field: "Freight", headerText: "Freight", width: 75, format: "{0:C}" }, { field: "ShipCity", headerText: "ShipCity", width: 80 } ], dataBound: "databound", }); }); </script>
MVC
[In View] @(Html.EJ().Grid<object>("Grid") .Datasource((IEnumerable<object>)ViewBag.data)) .AllowPaging() .AllowFiltering() .FilterSettings(filter => filter.FilterType(FilterType.menu)) .Columns(col => { col.Field("OrderID").HeaderText("Order ID"). Width(75).Add(); col.Field("CustomerID").HeaderText("Customer ID").Width(90).Add(); col.Field("EmployeeID").HeaderText("Employee ID").Width(75).Add(); col.Field("Freight"). HeaderText("Freight").Width(75).Format("{0:C}").Add(); col.Field("ShipCity").HeaderText("ShipCity").Width(80).Add(); }) .ClientSideEvents(eve => { eve.DataBound("databound"); }) ) [Controller] namespace EJGrid.Controllers { public class HomeController : Controller { public ActionResult Index() { var DataSource = OrderRepository.GetAllRecords(); ViewBag.data = DataSource; return View(); } } }
ASP.NET
[aspx] <ej:Grid ID="OrdersGrid" runat="server" AllowFiltering="True" AllowPaging="True"> <ClientSideEvents DataBound="databound" /> <FilterSetting FilterType="Menu" /> <Columns> <ej:Column Field="OrderID" HeaderText="Order ID Width=”90” /> <ej:Column Field="CustomerID" HeaderText="Customer ID" Width=”90” /> <ej:Column Field="CustomerID" HeaderText="Customer ID" Width=”75” /> <ej:Column Field="Freight" HeaderText="Freight" Format="{0:C}" Width=”75” /> <ej:Column Field="ShipCity" HeaderText="ShipCity" Width=”80” /> </Columns> </ej:Grid> [CS] public partial class _Default : Page { protected void Page_Load(object sender, EventArgs e) { this.OrdersGrid.DataSource = new NorthwindDataContext().Orders; this.OrdersGrid.DataBind(); } }
2. In the dataBound event of the Grid, bound the mousedown jQuery event to menu filter icon. In the beforeOpen event of ejDialog you have to set “selectedIndex” property of “ejDropDownList” as “2” to get the Default filter value as “Contains”.
<script type="text/javascript"> function databound(args) { this.element.on("mousedown", ".e-gridheader .e-filtericon", function () { $("#Grid_stringDlg").ejDialog({ //beforeOpen event of the filter menu dialog beforeOpen: function (e) { // set the default option in selectedIndex property $("#Gridstring_ddinput").ejDropDownList({ selectedIndex: 2 }); } }); }) } </script>
Thus you can change the default filter operator type of the filter menu to other operators like contains, lessthan and etc.
Note :- You can also bind RemoteData to the grid and you can change the default filter operator of the filtermenu to other operators by following these above mentioned steps.
The following output is displayed as a result of the above code example.
Figure: Filtering with filter operator Type “contains”.