ASP.NET

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.

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs