Remote Binding Of Combo Box In Kendo UI Using ASP.NET WEB API

Main Objective of this Article

Before going through this article ensure that you have a basic understanding of the MVC Architecture, ASP.NET Web API and jQuery.

Description

I am going to use the following REST service to explain how to perform remote binding in Kendo Combo box.

REST service end point: api/products.

Please refer my previous article Export grid data to excel in advance Kendo UI using MVC WEB API and Entity Framework to get an idea about how to create an ASP. NET WEB API Service.

The api/products service response in POSTMAN as in the following figure 1.

Figure 1

Now it’s time to consume the REST service in the Kendo UI.

Using a Kendo Combo box with remote binding

Create an HMTL page in your project, in my case I named it KendoCombo.html.

Design in KendoCombo.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.default.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.dataviz.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.dataviz.default.min.css" />
<script src="http://cdn.kendostatic.com/2014.3.1316/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1316/js/kendo.all.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1029/js/jszip.min.js"></script>
<title></title>
</head>
<body>
<div class="container" id="example">
<div class="row">
<input data-role="combobox"
data-placeholder="Type a product"
data-text-field="ProductName"
data-value-primitive="true"
data-value-field="ProductID"
data-bind="value: selectedProduct,source: products”
}"
style="width: 50%" />
</div>
</div>
</body>
</html>

JavaScipt with MVVM Model

var viewModel = kendo.observable({
selectedProduct: null,
isPrimitive: false,
isVisible: true,
isEnabled: true,
products: new kendo.data.DataSource({
transport: {
read: {
url: "api/Products",
dataType: "json"
}
}
})
});
kendo.bind($("#example"), viewModel);

Result in browser as shown in figure 2 & 3

Figure 2

Figure 3

Events in Kendo Combo Box

The main events in kendo combo box is listed below:

Change
Open
Close

Change event handling in kendo combo box

Usually this event is fired when the value of the combo box is changed by the user.

Design in KendoCombo.html

<input data-role="combobox"
data-placeholder="Type a product"
data-text-field="ProductName"
data-value-primitive="true"
data-value-field="ProductID"
data-bind="value: selectedProduct,source: products,events: {
change: onChange,
}"
style="width: 50%" />

JavaScipt with MVVM Model

var viewModel = kendo.observable({
selectedProduct: null,
isPrimitive: false,
isVisible: true,
isEnabled: true,
onChange: function () {
alert("Change Event");
},
products: new kendo.data.DataSource({
transport: {
read: {
url: "api/Products",
dataType: "json"
}
}
})
});
kendo.bind($("#example"), viewModel);

Result in browser as shown in figure 4

Figure 4

Open event handling in kendo combo box

This Event is fired when the popup of the Kendo combo box is opened by the user.

Design in KendoCombo.html

<input data-role="combobox"
data-placeholder="Type a product"
data-text-field="ProductName"
data-value-primitive="true"
data-value-field="ProductID"
data-bind="value: selectedProduct,source: products,events: {
open: onOpen,
}"
style="width: 50%" />

JavaScipt with MVVM Model

var viewModel = kendo.observable({
selectedProduct: null,
isPrimitive: false,
isVisible: true,
isEnabled: true,
onOpen: function () {
alert("Open");
},
products: new kendo.data.DataSource({
transport: {
read: {
url: "api/Products",
dataType: "json"
}
}
})
});
kendo.bind($("#example"), viewModel);

Result in browser as shown in figure 5

Figure 5

Close event handling in kendo combo box

This event fired when the popup of the combo box is closed.

Design in KendoCombo.html

<input data-role="combobox"
data-placeholder="Type a product"
data-text-field="ProductName"
data-value-primitive="true"
data-value-field="ProductID"
data-bind="value: selectedProduct,source: products,events: {
close: onClose
}"
style="width: 50%" />

JavaScipt with MVVM Model

var viewModel = kendo.observable({
selectedProduct: null,
isPrimitive: false,
isVisible: true,
isEnabled: true,
onClose: function () {
alert("Close");
},
products: new kendo.data.DataSource({
transport: {
read: {
url: "api/Products",
dataType: "json"
}
}
})
});
kendo.bind($("#example"), viewModel);

Result in browser as shown in figure 6

Figure 6

Conclusion

We have seen how to perform remote binding and handling the events of combo box in Kendo UI

I hope you have enjoyed this article.

14 Comments

Join the conversation! Your thoughts help the community grow.

Arul R11y ago
Nice share!!!
Santhakumar Munuswamy11y ago
Good one
Mohammed Ibrahim11y ago
nice
- Gowtham K11y ago
  Thank You
Rakesh11y ago
Good share sir
- Gowtham K11y ago
  Thank You
Sibeesh Venu11y ago
Nice Share
- Gowtham K11y ago
  Thank You
Nilesh Jadav11y ago
Good article sir
- Gowtham K11y ago
  Thank You
Mukesh Kumar11y ago
Good article
- Gowtham K11y ago
  Thank You
Harshad Pansuriya11y ago
Nice one
- Gowtham K11y ago
  Thank You