Kendo Autocomplete is looking for multiple columns

Question

I used kendo Auto Complete in my KendoGrid, while it is working fine, but it only searches or retrieves data from only one column,

I want it to search across multiple columns.

Here is my autocomplete code in KendoGrid.

$(function(){ $("#EmployeeGrid").kendoGrid({ dataSource:{ serverPaging: true, serverFiltering: true, pageSize: 5, transport: { read: "<?php echo base_url() ?>index.php/hr_management/manage_hr/list_view" }, schema:{ data: "data", total: "total" } }, toolbar: kendo.template($("#toolbarTemplate").html()), pageable: { input:true, numeric:false }, columns: [ { field: "EmployeeID", hidden:true }, { field: "FileNo", title: "File Number" }, { template:"#= FirstName # #= LastName #", title: "Full Name" }, { field:"City", title:"City" }, { field:"AddressLine1", title:"Address 1" }, { field:"WorkPhone", title:"WorkPhone" }, { field:"MobileNo", title:"Mobile No" }, {command: { text: "View", click: showDetails }, title: " ", width: "140px"}, {command: { text: "Edit", click: EditUserDetails }, title: " ", width: "140px"} ] }); }); var autoCompleteUsers = $("#employees").kendoAutoComplete({ minLength: 3, dataTextField: "FileNo", dataSource: { serverFiltering: true, transport: { read: { type: "GET", dataType: "json", contentType:'application/json; charset=utf-8', url: "<?php echo base_url() ?>index.php/hr_management/manage_hr/search_employee/", data: function (arg){ return {FileNo : autoCompleteUsers.data("kendoAutoComplete").value()}; } } } }, change: onChangeAutoComplete }); function onChangeAutoComplete(){ var value = this.value(); var grid = $('#EmployeeGrid'); if (value) { grid.data("kendoGrid").dataSource.filter({ field: "FileNo", operator: "Contains", value: value }); } else { grid.data("kendoGrid").dataSource.filter({}); } } function showDetails(e) { e.preventDefault(); $('.action_button').html(''); var row = $(e.target).closest("tr"); var item = $("#EmployeeGrid").data("kendoGrid").dataItem(row); $.ajax({ type: "POST", url: "<?php echo base_url().'index.php/hr_management/manage_hr/view_employee_profile/'?>"+JSON.parse(item.EmployeeID), success: function(output_string){ var data = output_string.split("MyMark_Employee"); $('.second_column_content_container').html(data[0]); $('.action_button').html(data[1]); $("#createEmployee").hide(); }, error: function(data){ alert("error"); } }); } function EditUserDetails(e) { e.preventDefault(); $('.action_button').html(''); var row = $(e.target).closest("tr"); var item = $("#EmployeeGrid").data("kendoGrid").dataItem(row); $.ajax({ type: "POST", url: "<?php echo base_url().'index.php/hr_management/manage_hr/edit_employee_details/'?>"+JSON.parse(item.EmployeeID), success: function(output_string){ var data = output_string.split("MyMark_Employee"); $('.second_column_content_container').html(data[0]); if(data[1]!= " ") { $('.action_button').html(data[1]); } }, error: function(data){ alert("error"); } }); } 

What to do? Do I need to define multiple dataTextField: :? Need suggestions.

Answer 1

Good question. I wondered the same thing.

Looking at the Kendo code (kendo.web.min.js), it doesn't seem like you can define multiple fields for the dataTextField property. It seems that only one field is allowed.

A workaround is to add a field to your model that includes (in string form) all the fields you want to look for. Then set dataTextField for this field. This is not an ideal solution, but it works.