We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

FilterBar AutoComplete behaviour

Thread ID:





128746 Feb 9,2017 04:37 AM UTC Feb 10,2017 12:49 PM UTC ASP.NET MVC 1
Tags: Grid
Asked On February 9, 2017 04:37 AM UTC

Just tried out the autocomplete option on the filterbar following this example... http://mvc.syncfusion.com/demos/web/grid/filtering

And I found that the filter will not kick in until you move focus away from the input field.

Is it possible to make the filter engage after selecting the customer from the autocomplete list or perhaps even after the customer is selected, and still in the field we hit the enter key, to be consistent with the default filter bar input field behaviour.

Also, is it possible to have Filterbar and FilterMenu both enabled?


Mani Sankar Durai [Syncfusion]
Replied On February 10, 2017 12:49 PM UTC

Hi Henryk, 

Thanks for contacting Syncfusion support. 

We have analyzed your query and we suggest you to use select event of AutoComplete when using FilterbarTemplate Write method. 
Please refer the below code example. 
        .Columns(col => 
            col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Add(); 
            col.Field("CustomerID").HeaderText("Customer ID").FilterBarTemplate(filterbar => filterbar.Create("autoComplete_create").Write("autoComplete_write").Read("autoComplete_read")).Add(); 
    function autoComplete_create(args) { 
            return "<input>" 
        function autoComplete_write(args) { 
            var gridObj = $("#FlatGrid").ejGrid("instance"); 
            var data = ej.DataManager(gridObj.model.dataSource).executeLocal(new ej.Query().select("CustomerID")); 
            args.element.ejAutocomplete({ width: "100%", dataSource: data, enableDistinct: true, select: ej.proxy(args.column.filterBarTemplate.read, this, args) }); 
        function autoComplete_read(args) { 
            this.filterColumn(args.column.field, "equal", args.element.val(), "and", true) 

In the online sample we have used focusOut event of autoComplete. So after focus out the input field it filters the value. When using select event of autoComplete it will filter after selecting the value from the autoComplete. 
We have also prepared a sample that can be downloaded from the below link. 

Note: Also we can use the menu filter and excel filter at a time using filterType property in columns. But it is not possible to use filterBar and menu filter at the same time. 

Please refer the documentation link: 

Please let us know if you need further assistance. 

Manisankar Durai. 


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon