Kendo Grid filter with autocomplete textbox with text and value in ASP.Net MVC

Question

I'm trying to create a grid filter for my kendo grid, the column shows an ID value and I want the filter to search based on the text.

For example: Column has employee ID and I want to search the grid with employee name but employee name is not a column. (This is as per the requirement)

I've managed to make the autocomplete work and load the employee names but how to I get the employee ID and filter the grid?

My Example code:

	<script type="text/javascript">
                function empFilter(element) {
                    element.kendoAutoComplete({
                        dataTextField: "Name",
                        dataValueField: "employeeID",
                        minLength: 3,
                        filter: "contains",
                        dataSource: {                            
                            serverFiltering: true,
                            serverSorting: true,
                            transport: {
                                read: "@Url.Action("Fetch", "abccontroller")",
                                type: "GET",
                                dataType: "json",
                                parameterMap: function (data, action) {
                                    if (action === "read") {
                                        return {
                                            text: data.filter.filters[0].value
                                        };
                                    }
                                }
                            }                            
                        }
                    });
                }
            </script>

@(Html.Kendo().Grid<abcModel>()
                .Name("abc")
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .Model(model => model.Id(i => i.id))
                    .Read(read => read.Action("Load", "abccontroller"))
                    .PageSize(100)
                )              
                .Filterable(filter => filter.Enabled(true))
                .Pageable(pager => pager.Enabled(true))
                .Resizable(resize => resize.Columns(true))
                .Columns(columns =>
                {                  
                    columns.Bound(m => m.employeeID).Title("Employee Name").Filterable(f => f.UI("empFilter").Extra(false));                   
                })
            )
			
			
		

Answer 1

Add an auto complete selection handler, which in turn applies the id of the selection as a filter on the grid. In this example I disallow a clearing of the autocomplete to cause a read of all the lookup data.

Things can be a little tricky because autocomplete allows typing in, and value of the component may not necessarily be a value corresponding to a specific item in the dropdown.

// autocomplete declaration
...
filtering: ac_Filtering,
change: ac_Change,
...


function ac_Filtering(e) {@* prevent autoComplete 'clear' from loading all remote data *@
    if (!e.filter.value) {@* if there is no filter value, clear has occurred and no further action should take place *@
        e.preventDefault();
    }
}

function ac_Change(e) {
    @* check if value is in dataSource *@
    var ac_value = this.value(); // should be the name showing in ac textbox, if not small tweak here
    var j = -1;
    for (var i = 0; i < this.dataSource.total(); i++) {
        if (this.dataSource.at(i).get('Name') == ac_value) {
            j = i;
        }
    }

    if (j == -1) return; // ac value is not yet a single employee

    // apply filter to grid data source here
    var grid = $("#abc").data("kendoGrid");
    var chosenId = this.dataSource.at(j).get('employeeID')
    grid.dataSource.filter(
      [
        { field: "employeeID", operator: "equals", value: chosenId }
      ]
    );

}

Not seeing more of the app framework, I speculate the autocomplete component would be outside the grid, or in the toolbar area.