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

public class Customer
{
public int CustomerID { get; set; }
public string CustomerName { get; set; }
public Customer(int customerID, string customerName)
{
CustomerID = customerID;
CustomerName = customerName;
}
}

CustomerController.cs

[Produces("application/json")]
[Route("api/Customer")]
public class CustomerController : Controller
{
[HttpGet]
[Route("CustomerDetails")]
public List<Customer> GetCustomers()
{
List<Customer> customers = new List<Customer>();
customers.Add(new Customer(1, "Arun"));
customers.Add(new Customer(2, "Raj"));
return customers.ToList();
}
}

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

<!DOCTYPE html>
<html>
<head>
<style>
html {
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
}
</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.material.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div class="demo-section k-content">
<h4>Customers</h4>
<input id="customers" style="width: 50%;" />
</div>
<script>
$(document).ready(function () {
$("#customers").kendoMultiColumnComboBox({
dataTextField: "customerName",
dataValueField: "customerID",
height: 400,
columns: [
{
field: "customerID", title: "Customer ID", width: 200
},
{
field: "customerName", title: "Customer Name", width: 200
},
],
footerTemplate: 'Total #: instance.dataSource.total() # items found',
filter: "contains",
filterFields: ["customerID", "customerName"],
dataSource: {
type: "json",
transport: {
read: "http://localhost:11207/api/Customer/CustomerDetails"
}
}
});
});
</script>
<style type="text/css">
</style>
</div>
</body>
</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

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

<!DOCTYPE html>
<html>
<head>
<style>
html {
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
}
</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.material.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div class="demo-section k-content">
<h4>Customers</h4>
<input id="customers" style="width: 50%;" />
</div>
<script>
$(document).ready(function () {
$("#customers").kendoMultiColumnComboBox({
dataTextField: "customerName",
dataValueField: "customerID",
height: 400,
columns: [
{
field: "customerID", title: "Customer ID", width: 200
},
{
field: "customerName", title: "Customer Name", width: 200
},
],
footerTemplate: 'Total #: instance.dataSource.total() # items found',
filter: "contains",
filterFields: ["customerID", "customerName"],
dataSource: {
type: "json",
transport: {
read: "http://localhost:11207/api/Customer/CustomerDetails"
}
}
});
});
</script>
<style type="text/css">
</style>
</div>
</body>
</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

The footer template is included in multi-column View of the combobox which is used to display the total number of records.

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.