Post
Ask Question

Kendo Multi Column Combo Box With Remote Data Binding

Introduction

Kendo multi-column combo box control is used to display the data in multiple column Views within the combo box. In this article, we are going to see how to do a remote binding in Kendo multi-column combobox.

WEB API Service 

I'm going to use the following Web API Service which is developed using ASP.NET Core to construct the data source for Kendo multi-column combobox.

Customer.cs

  1. public class Customer  
  2.    {  
  3.        public int CustomerID { get; set; }  
  4.        public string CustomerName { get; set; }  
  5.   
  6.        public Customer(int customerID, string customerName)  
  7.        {  
  8.            CustomerID = customerID;  
  9.            CustomerName = customerName;  
  10.        }  
  11.    }  

CustomerController.cs

  1. [Produces("application/json")]  
  2.     [Route("api/Customer")]  
  3.     public class CustomerController : Controller  
  4.     {  
  5.         [HttpGet]  
  6.         [Route("CustomerDetails")]  
  7.   
  8.         public List<Customer> GetCustomers()  
  9.         {  
  10.             List<Customer> customers = new List<Customer>();  
  11.             customers.Add(new Customer(1, "Arun"));  
  12.             customers.Add(new Customer(2, "Raj"));  
  13.             return customers.ToList();  
  14.         }  
  15.   
  16.   
  17.     }  

The GetCustomer action will return the customer list.

Testing the API in Postman

/api/Customer/CustomerDetails
 
Kendo Multi Column Combo Box With Remote Data Binding
 
This API will return the Customer List.

KendoMultiColumnCombo.html

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <style>  
  5.         html {  
  6.             font-size: 14px;  
  7.             font-family: Arial, Helvetica, sans-serif;  
  8.         }  
  9.     </style>  
  10.     <title></title>  
  11.     <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.common-material.min.css" />  
  12.     <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.material.min.css" />  
  13.     <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.material.mobile.min.css" />  
  14.   
  15.     <script src="https://kendo.cdn.telerik.com/2018.3.1017/js/jquery.min.js"></script>  
  16.     <script src="https://kendo.cdn.telerik.com/2018.3.1017/js/kendo.all.min.js"></script>  
  17.   
  18.   
  19. </head>  
  20. <body>  
  21.   
  22.     <div id="example">  
  23.         <div class="demo-section k-content">  
  24.             <h4>Customers</h4>  
  25.             <input id="customers" style="width: 50%;" />  
  26.               
  27.         </div>  
  28.         <script>  
  29.         $(document).ready(function () {  
  30.             $("#customers").kendoMultiColumnComboBox({  
  31.                 dataTextField: "customerName",  
  32.                 dataValueField: "customerID",  
  33.                 height: 400,  
  34.                 columns: [  
  35.                     {  
  36.                         field: "customerID", title: "Customer ID", width: 200  
  37.                     },  
  38.                     {  
  39.                         field: "customerName", title: "Customer Name", width: 200  
  40.                     },  
  41.   
  42.                 ],  
  43.                 footerTemplate: 'Total #: instance.dataSource.total() # items found',  
  44.                 filter: "contains",  
  45.                 filterFields: ["customerID", "customerName"],  
  46.                 dataSource: {  
  47.                     type: "json",  
  48.                     transport: {  
  49.                         read: "http://localhost:11207/api/Customer/CustomerDetails"  
  50.                     }  
  51.                 }  
  52.             });  
  53.         });  
  54.         </script>  
  55.         <style type="text/css">  
  56.               
  57.         </style>  
  58.     </div>  
  59. </body>  
  60. </html>  

The kendoMultiColumnComboxBox function is used to initialize the control with the following properties.

  • dataTextField – Provide the field which you want to bind with the combobox
  • dataValueField – Provide the ID field of your data source
  • datasource – Provide the URI of your API in transport read
Result
Kendo Multi Column Combo Box With Remote Data Binding 
 
From the above figure, you can notice that in combobox, the customer list is displayed in multi-column View. 

Let us include the footer template which will give a number of records in multicolumn.

 KendoMultiColumnCombo.html
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <style>  
  5.         html {  
  6.             font-size: 14px;  
  7.             font-family: Arial, Helvetica, sans-serif;  
  8.         }  
  9.     </style>  
  10.     <title></title>  
  11.     <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.common-material.min.css" />  
  12.     <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.material.min.css" />  
  13.     <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.material.mobile.min.css" />  
  14.   
  15.     <script src="https://kendo.cdn.telerik.com/2018.3.1017/js/jquery.min.js"></script>  
  16.     <script src="https://kendo.cdn.telerik.com/2018.3.1017/js/kendo.all.min.js"></script>  
  17.   
  18.   
  19. </head>  
  20. <body>  
  21.   
  22.     <div id="example">  
  23.         <div class="demo-section k-content">  
  24.             <h4>Customers</h4>  
  25.             <input id="customers" style="width: 50%;" />  
  26.               
  27.         </div>  
  28.         <script>  
  29.         $(document).ready(function () {  
  30.             $("#customers").kendoMultiColumnComboBox({  
  31.                 dataTextField: "customerName",  
  32.                 dataValueField: "customerID",  
  33.                 height: 400,  
  34.                 columns: [  
  35.                     {  
  36.                         field: "customerID", title: "Customer ID", width: 200  
  37.                     },  
  38.                     {  
  39.                         field: "customerName", title: "Customer Name", width: 200  
  40.                     },  
  41.   
  42.                 ],  
  43.                 footerTemplate: 'Total #: instance.dataSource.total() # items found',  
  44.                 filter: "contains",  
  45.                 filterFields: ["customerID", "customerName"],  
  46.                 dataSource: {  
  47.                     type: "json",  
  48.                     transport: {  
  49.                         read: "http://localhost:11207/api/Customer/CustomerDetails"  
  50.                     }  
  51.                 }  
  52.             });  
  53.         });  
  54.         </script>  
  55.         <style type="text/css">  
  56.               
  57.         </style>  
  58.     </div>  
  59. </body>  
  60. </html>  

The footerTemplate property is used to define the template for the footer which gives the count of the total records in multi-column using total functions from dataSource (instance.dataSource.total() ) as given in the above code.

Result

Kendo Multi Column Combo Box With Remote Data Binding 
The footer template is included in multi-column View of the combobox which is used to display the total number of records. 
Kendo Multi Column Combo Box With Remote Data Binding 
Summary
 
From this article, we have seen how to perform remote data binding in Kendo multi-column combobox and working with templates in it. We will see more features of this control in my next article.


Similar Articles