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

[Nigel]

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?

 

@(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));
                })
            )


<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>

 

[Tsvetina]

Hi Nigel,

It would be easier to use a ForeignKey column in your Grid, as shown in this demo:
Grid / ForeignKey column

Look at the Category column, which is bound to the CategoryID field and the filter displays a dropdown with the category text values.

If you prefer to keep the custom approach, you can check this example to see how to apply the selected value as a Grid filter:
Use MultiSelect for Column Filtering

Regards,
Tsvetina
Progress Telerik

[Nigel]

Hi Tsvetina,

The main purpose is to avoid loading all the data in a dropdown (as the data is too large) and have it fill in an autocomplete textbox

[Tsvetina]

Hi Nigel,

In this case, keep the AutoComplete and follow the example from this article to apply the selected value as a filter in the Grid:
Use MultiSelect for Column Filtering

Regards,
Tsvetina
Progress Telerik

[Chris]

Hello Tsvetina,

It seems the link here in the comments is broken. Also is that solution still applicable?

 

Thanks,

Chris

[Martin]

Hello, Chris,

Here you will find the example mentioned. It is working correctly with the latest version.

Let me know if you have any questions.