How to filter the grid string column using customized notcontains operator
The Grid has default filter operators for string column like as follows,
- ej.FilterOperators.startsWith
- ej.FilterOperators.endsWith
- ej.FilterOperators.contains
- ej.FilterOperators.equal
- ej.FilterOperators.notEqual
We can also have filtered the column using customized “notcontains” operator externally by clicking the button. Please refer to following code example to achieve this.
JS
<input type="button" value="filter" onclick="buttonClick()" />
$("#Grid").ejGrid({
dataSource: window.gridData,
allowPaging: true,
allowFiltering: true,
filterSettings: { filterType: "excel" },
create:"create",
columns: [
{ field: "OrderID", headerText: "Order ID", textAlign: ej.TextAlign.Right, width: 75 },
{ field: "CustomerID", headerText: "Customer ID", width: 90 },
{ field: "EmployeeID", headerText: "Employee ID", textAlign: "right", width: 75 },
{ field: "Freight", headerText: "Freight", textAlign: "right",format:"{0:C2}", width: 75 }
]
});
MVC
<input type="button" value="filter" onclick="buttonClick()" />
@(Html.EJ().Grid<object>("Grid")
.Datasource((IEnumerable<object>)ViewBag.dataSource1)
.AllowPaging()
.AllowFiltering()
.FilterSettings(filter => { filter.FilterType(FilterType.Excel); })
.Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").TextAlign(TextAlign.Right).Width(90).Add();
col.Field("CustomerID").HeaderText("Customer ID").Width(80.Add();
col.Field("EmployeeID").HeaderText("Employee ID").TextAlign(TextAlign.Right).Width(90).Add();
col.Field("Freight").TextAlign(TextAlign.Right).Width(75).Format("{0:C}").Add();
}).ClientSideEvents(eve =>
{
eve.Create("create");
})
)
ASP
<input type="button" value="filter" onclick="buttonClick()" />
<ej:Grid runat="server" ID="Grid" AllowPaging="true" AllowFiltering="true" >
<ClientSideEvents Create="create" ></ClientSideEvents>
<Columns>
<ej:Column Field="OrderID" HeaderText="Order ID" TextAlign="Right" Width="75" />
<ej:Column Field="CustomerID" HeaderText="Customer ID" Width="80" />
<ej:Column Field="EmployeeID" HeaderText="Employee ID" TextAlign="Right" Width="75" />
<ej:Column Field="Freight" TextAlign="Right" Width="75" Format="{0:C}" />
</Columns>
<FilterSettings FilterType="Excel"></FilterSettings>
</ej:Grid>
In the create event we can set the customized filter operator and its definition. After that we can merge the customized operator into default operator like as following
Create event
function create(args){
var isNull = function (val) {
return val === undefined || val === null;
};
var toLowerCase = function (val) {
return val ? val.toLowerCase ? val.toLowerCase() : val.toString().toLowerCase() : (val === 0 || val === false) ? val.toString() : "";
};
var b = {
//set the customized filter operator
notcontains: function (actual, expected, ignoreCase) {
if (ignoreCase)
return !(!isNull(actual) && !isNull(expected) && toLowerCase(actual).indexOf(toLowerCase(expected)) != -1);
return !(!isNull(actual) && !isNull(expected) && actual.toString().indexOf(expected) != -1);
}
}
//add the customized filter operator to default filters
var a=$.extend(true,ej.data.fnOperators,b);
}
Here, we can push the new filter objects in filteredColumn arrays and then refresh the grid content by calling the refreshContent API. Because, if we directly filter the customized operator using filter column API then it’s removes the already filteredColumn arrays. Please refer to the following code example to push the new filter objects in filteredColumn arrays,
Button click
function buttonClick() {
var gridObj = $("#Grid").ejGrid("instance");
gridObj.model.filterSettings.filteredColumns.push({ field: "CustomerID", operator: "notcontains", value: "ET" });//filter the column based on customized operator
gridObj.refreshContent();//refresh the grid
}
Output:
Note: Above figure shows the filtered results which Customer ID column doesn’t contains ‘ET’.
