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

4 posts, 0 answers
  1. Nigel
    Nigel avatar
    11 posts
    Member since:
    Nov 2016

    Posted 25 Feb Link to this post

    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>

     

  2. Tsvetina
    Admin
    Tsvetina avatar
    2162 posts

    Posted 27 Feb Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Nigel
    Nigel avatar
    11 posts
    Member since:
    Nov 2016

    Posted 27 Feb Link to this post

    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

  4. Tsvetina
    Admin
    Tsvetina avatar
    2162 posts

    Posted 01 Mar Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top