Articles in this section
Category / Section

How to change the default filter operator type to "Contains" in filter menu?

1 min read

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”.

 

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