Post
Ask Question

Getting Text and Value From Selected Item in Kendo ComboBox using JQuery

Kendo combobox is one of the widget in Kendo UI , Let we start with implementing the Kendo Combobox just by two step:

Create one HTML page and write the following code in it,
  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <meta charset="utf-8">  
  6.     <title>Untitled</title>  
  7.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.common.min.css">  
  8.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.rtl.min.css">  
  9.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.default.min.css">  
  10.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.mobile.all.min.css">  
  11.     <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>  
  12.     <script src="http://kendo.cdn.telerik.com/2015.3.930/js/angular.min.js"></script>  
  13.     <script src="http://kendo.cdn.telerik.com/2015.3.930/js/jszip.min.js"></script>  
  14.     <script src="http://kendo.cdn.telerik.com/2015.3.930/js/kendo.all.min.js"></script>  
  15. </head>  
  16.   
  17. <body>  
  18.     <div class="container" id="example">  
  19.         <div class="row">  
  20.             <div class="col-md-4">  
  21.                 <input id="ProductList" data-role="combobox" data-placeholder="Type a Product Name" data-text-field="ProductName" data-auto-bind="true" data-value-field="ProductId" data-bind="value: selectedList,    
  22.                                 source: dataSource,    
  23.                               visible: isVisible" style="width: 50%" />  
  24.                 <button id="filter" data-bind="click: GetValue" class="k-button">Filter</button>  
  25.             </div>  
  26.         </div>  
  27.     </div>  
  28. </body>  
  29.   
  30. </html>  
 JavaScript with MVVM Model:
  1. $(document).ready(function()  
  2. {  
  3.     var viewModel = kendo.observable(  
  4.     {  
  5.         selectedList: '',  
  6.         isPrimitive: false,  
  7.         isVisible: true,  
  8.         isEnabled: true,  
  9.         GetValue: function(e)  
  10.         {  
  11.             var c = $('#ProductList');  
  12.             alert("ProductId:" + c.data('kendoComboBox').value())  
  13.             alert("ProductName:" + c.data('kendoComboBox').text())  
  14.         },  
  15.         dataSource: [  
  16.         {  
  17.             ProductName: "Parent1",  
  18.             ProductId: 1  
  19.         },  
  20.         {  
  21.             ProductName: "Parent2",  
  22.             ProductId: 2  
  23.         }]  
  24.     })  
  25.     kendo.bind($("#example"), viewModel);  
  26. })  
From the Getvalue function in above script we are going to fetch the Selected item value and text from kendo combo box. 
 
Result in Browser:
 

                                      Figure 1
 

                                        Figure 2
 

                                         Figure 3