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. Image for the cookie policy date

FilterBar AutoComplete behaviour

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?

Cheers,
H

1 Reply

MS Mani Sankar Durai Syncfusion Team 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. 
[GridFeatures.cshtml] 
@(Html.EJ().Grid<MvcApplication14.OrdersView>("FlatGrid") 
... 
                          .AllowFiltering() 
... 
        .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(); 
            ... 
 
        }) 
    ) 
<script> 
     
    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) 
        } 
</script> 

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. 

Regards, 
Manisankar Durai. 


Loader.
Live Chat Icon For mobile
Up arrow icon