1
Answer

Kendo Grid filter with autocomplete textbox text and value

Nigel Fernandes

Nigel Fernandes
7y
7.9k
1
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?
 
 Sample Code:
  1. @(Html.Kendo().Grid<abcModel>()  
  2.                 .Name("abc")  
  3.                 .DataSource(dataSource => dataSource  
  4.                     .Ajax()  
  5.                     .Model(model => model.Id(i => i.id))  
  6.                     .Read(read => read.Action("Load", "abccontroller"))  
  7.                     .PageSize(100)  
  8.                 )                
  9.                 .Filterable(filter => filter.Enabled(true))  
  10.                 .Pageable(pager => pager.Enabled(true))  
  11.                 .Resizable(resize => resize.Columns(true))  
  12.                 .Columns(columns =>  
  13.                 {                    
  14.                     columns.Bound(m => m.employeeID).Title("Employee Name").Filterable(f => f.UI("empFilter").Extra(false));                     
  15.                 })  
  16.             )  
  17.               
  18.               
  19.   
  20. <script type="text/javascript">  
  21.                 function empFilter(element) {  
  22.                     element.kendoAutoComplete({  
  23.                         dataTextField: "Name",  
  24.                         dataValueField: "employeeID",  
  25.                         minLength: 3,  
  26.                         filter: "contains",  
  27.                         dataSource: {                              
  28.                             serverFiltering: true,  
  29.                             serverSorting: true,  
  30.                             transport: {  
  31.                                 read: "@Url.Action("Fetch", "abccontroller")",  
  32.                                 type: "GET",  
  33.                                 dataType: "json",  
  34.                                 parameterMap: function (data, action) {  
  35.                                     if (action === "read") {  
  36.                                         return {  
  37.                                             text: data.filter.filters[0].value  
  38.                                         };  
  39.                                     }  
  40.                                 }  
  41.                             }                              
  42.                         }  
  43.                     });  
  44.                 }  
  45.             </script> 
 
Answers (1)
Next Recommended Forum