Kendo Autocomplete doesn't filter DataSource after select in dropdown list

Question

I have DataSource on page and AutoComplete component and ListView. Both use DataSource. ListView show data from DataSource, and AutoComplete filter data in ListView.

When i type in AutoComplete component, it automatically filter dataSource, and content of ListView is changing because of filtering.

But when AutoComplete show dropDown with filter results and i select some of value, it didn't trigger filter event and content of ListView doesn't change

<div class="col-md-12 d-flex justify-content-center align-items-center">
                @(Html.Kendo().DataSource<ProjectQueue>()
                    .Name("projectDataSource")
                    .Ajax(dataSource => dataSource
                       .Read(read => read.Action("ProjectDataSource_Read", "Home"))
                       .ServerOperation(false)
                    )
                )
                @(Html.Kendo().AutoComplete()
                    .Name("autoComplete")
                    .DataTextField("Name")
                    .Filter(FilterType.Contains)
                    .MinLength(2)
                    .DataSource("projectDataSource")
                )

            </div>
            <div class="col-md-12 d-flex justify-content-center align-items-center">
                @(Html.Kendo().ListView<ProjectQueue>()
                    .Name("projectsListView")
                    .ClientTemplateId("template")
                    .TagName("div")
                    .HtmlAttributes(new { style = "width:100%;" })
                    .Scrollable()
                    .DataSource("projectDataSource")
                    .Selectable(selectable => selectable.Mode(ListViewSelectionMode.Single))
                    .Events(events => events.Change("onChangeProject"))
                )
            </div>

How to trigger filtering in DataSource and then in ListView after select event in AutoComplete?

Or can i disable dropdownlist in Aoutocomplete Component and only typing in it?

Answer 1

When you type in the autocomplete the filtering event is fired, indeed. However, when you select an item in the popup container with options, the select fires event followed by the change event, when the value of the widget changes.

You can add a select event handler to the AutoComplete, for example, and call the dataSource filter method to filter based on the selected item.

.Events(ev=>ev.Select("onSelect"))

function onSelect(e){
    projectDataSource.filter({field:"Name", operator: "eq", value: e.dataItem.Name})
}

Here is an example