Post
Ask Question

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
  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.common.min.css" />  
  5.     <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.default.min.css" />  
  6.     <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.dataviz.min.css" />  
  7.     <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.dataviz.default.min.css" />  
  8.     <script src="http://cdn.kendostatic.com/2014.3.1316/js/jquery.min.js"></script>  
  9.     <script src="http://cdn.kendostatic.com/2014.3.1316/js/kendo.all.min.js"></script>  
  10.     <script src="http://cdn.kendostatic.com/2014.3.1029/js/jszip.min.js"></script>  
  11.     <title></title>  
  12. </head>  
  13. <body>  
  14.     <div class="container" id="example">  
  15.         <div class="row">  
  16.   
  17.             <input data-role="combobox"  
  18.                    data-placeholder="Type a product"  
  19.                    data-text-field="ProductName"  
  20.                    data-value-primitive="true"  
  21.                    data-value-field="ProductID"  
  22.                    data-bind="value: selectedProduct,source: products”  
  23.                               }"  
  24.                    style="width: 50%" />  
  25.         </div>  
  26.      </div>  
  27.  </body>  
  28. </html>
JavaScipt with MVVM Model
  1. var viewModel = kendo.observable({    
  2.     selectedProduct: null,    
  3.     isPrimitive: false,    
  4.     isVisible: true,    
  5.     isEnabled: true,                        
  6.     products: new kendo.data.DataSource({    
  7.         transport: {    
  8.             read: {    
  9.                 url: "api/Products",    
  10.                 dataType: "json"    
  11.             }    
  12.         }    
  13.     })    
  14. });    
  15. 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:

  1. Change
  2. Open
  3. 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

  1. <input data-role="combobox"    
  2.      data-placeholder="Type a product"    
  3.      data-text-field="ProductName"    
  4.      data-value-primitive="true"    
  5.      data-value-field="ProductID"    
  6.      data-bind="value: selectedProduct,source: products,events: {    
  7.                   change: onChange,    
  8.                 }"    
  9.      style="width: 50%" /> 

JavaScipt with MVVM Model

  1. var viewModel = kendo.observable({    
  2.     selectedProduct: null,    
  3.     isPrimitive: false,    
  4.     isVisible: true,    
  5.     isEnabled: true,    
  6.     onChange: function () {    
  7.         alert("Change Event");    
  8.     },    
  9.     products: new kendo.data.DataSource({    
  10.         transport: {    
  11.             read: {    
  12.                 url: "api/Products",    
  13.                 dataType: "json"    
  14.             }    
  15.         }    
  16.     })    
  17. });    
  18. 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

  1. <input data-role="combobox"    
  2.     data-placeholder="Type a product"    
  3.     data-text-field="ProductName"    
  4.     data-value-primitive="true"    
  5.     data-value-field="ProductID"    
  6.     data-bind="value: selectedProduct,source: products,events: {    
  7.                                                  open: onOpen,    
  8.                                                }"    
  9.     style="width: 50%" />  

JavaScipt with MVVM Model

  1. var viewModel = kendo.observable({    
  2.     selectedProduct: null,    
  3.     isPrimitive: false,    
  4.     isVisible: true,    
  5.     isEnabled: true,    
  6.         
  7.   
  8.     onOpen: function () {    
  9.        alert("Open");    
  10.     },    
  11.         
  12.     products: new kendo.data.DataSource({    
  13.         transport: {    
  14.             read: {    
  15.                 url: "api/Products",    
  16.                 dataType: "json"    
  17.             }    
  18.         }    
  19.     })    
  20. });    
  21. 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

  1. <input data-role="combobox"    
  2.       data-placeholder="Type a product"    
  3.       data-text-field="ProductName"    
  4.       data-value-primitive="true"    
  5.       data-value-field="ProductID"    
  6.       data-bind="value: selectedProduct,source: products,events: {    
  7.                    close: onClose    
  8.                  }"    
  9.       style="width: 50%" /> 

JavaScipt with MVVM Model

  1. var viewModel = kendo.observable({    
  2.       selectedProduct: null,    
  3.       isPrimitive: false,    
  4.       isVisible: true,    
  5.       isEnabled: true,    
  6.       onClose: function () {    
  7.           alert("Close");    
  8.       },    
  9.       products: new kendo.data.DataSource({    
  10.           transport: {    
  11.               read: {    
  12.                   url: "api/Products",    
  13.                   dataType: "json"    
  14.               }    
  15.           }    
  16.       })    
  17.   });    
  18.   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.


Similar Articles