FilterBar AutoComplete behaviour

[Henryk]

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

[Mani Sankar Durai]

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. 

Link: http://www.syncfusion.com/downloads/support/forum/128746/ze/Sample-277411924 

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: 

Link: https://help.syncfusion.com/api/js/ejautocomplete#events:select 

Please let us know if you need further assistance. 

Regards, 

Manisankar Durai.