Post
Ask Question

Set Default Value in Kendo Dropdown List using MVVM Pattern

kendo DropDownList:

Kendo dropdownlist  is one of the popular widgets in the Kendo UI, which is derived from the class widget,
 
Use below links to get more information about Kendo dropdownlist,
The Kendo dropdownlist supports MVVM pattern, let us see how to implement it using MVVM pattern,
 
Code to implement the Kendo dropdownlist using MVVM Pattern 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8">  
  5.     <title>Untitled</title>  
  6.   
  7.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.406/styles/kendo.common.min.css">  
  8.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.406/styles/kendo.rtl.min.css">  
  9.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.406/styles/kendo.default.min.css">  
  10.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.406/styles/kendo.mobile.all.min.css">  
  11.   
  12.     <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>  
  13.     <script src="http://kendo.cdn.telerik.com/2016.1.406/js/angular.min.js"></script>  
  14.     <script src="http://kendo.cdn.telerik.com/2016.1.406/js/jszip.min.js"></script>  
  15.     <script src="http://kendo.cdn.telerik.com/2016.1.406/js/kendo.all.min.js"></script>  
  16. </head>  
  17. <body>  
  18.   
  19.     <div id="example">  
  20.         <div class="row">  
  21.   
  22.   
  23.             <div class="col-lg-3">  
  24.                   
  25.                     Voting Status:  
  26.                     <input id="VotingStatusList" data-role="dropdownlist"  
  27.                            data-bind="source:votingStatusList,value:VotingStatusList" data-text-field="Text" data-value-field="Value" data-option-label="--Select Voting Status--"  
  28.                            style="width:100%" />  
  29.             </div>  
  30.   
  31.         </div>  
  32.     </div>  
  33.     <script>  
  34.           
  35.     $(document).ready(function(){  
  36.      var viewModel = kendo.observable({  
  37.      VotingStatusList:'',  
  38.          votingStatusList:  
  39.            [{ Text: "Eligible", Value: "1" },  
  40.              { Text: "Not-Eligible", Value: "2" },  
  41.               ]  
  42.             
  43.         });  
  44.     kendo.bind($("#example"), viewModel);  
  45.       })  
  46.     </script>  
  47. </body>  
  48. </html>  
The source property is used to define the data Source for the dropdownlist,
 
Dropdownlist in Browser:
 
 
 
Sometimes as per the requirements we need to set the default value for dropdownlist instead of defining the optional label, which can be  easily done using the value property in kendo UI. 
  1. var viewModel = kendo.observable({  
  2.  VotingStatusList:1,//setting Eligible as a default value  
  3. })
Code to set the default value in kendo dropdownlist using MVVM pattern
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8">  
  5.     <title>Untitled</title>  
  6.   
  7.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.406/styles/kendo.common.min.css">  
  8.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.406/styles/kendo.rtl.min.css">  
  9.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.406/styles/kendo.default.min.css">  
  10.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.406/styles/kendo.mobile.all.min.css">  
  11.   
  12.     <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>  
  13.     <script src="http://kendo.cdn.telerik.com/2016.1.406/js/angular.min.js"></script>  
  14.     <script src="http://kendo.cdn.telerik.com/2016.1.406/js/jszip.min.js"></script>  
  15.     <script src="http://kendo.cdn.telerik.com/2016.1.406/js/kendo.all.min.js"></script>  
  16. </head>  
  17. <body>  
  18.   
  19.     <div id="example">  
  20.         <div class="row">  
  21.   
  22.   
  23.             <div class="col-lg-3">  
  24.                   
  25.                     Voting Status:  
  26.                     <input id="VotingStatusList" data-role="dropdownlist"  
  27.                            data-bind="source:votingStatusList,value:VotingStatusList" data-text-field="Text" data-value-field="Value"  
  28.                            style="width:100%" />  
  29.             </div>  
  30.   
  31.         </div>  
  32.     </div>  
  33.     <script>  
  34.           
  35.     $(document).ready(function(){  
  36.      var viewModel = kendo.observable({  
  37.      VotingStatusList:1,  //setting Eligible as a default value
  38.          votingStatusList:  
  39.            [{ Text: "Eligible", Value: "1" },  
  40.              { Text: "Not-Eligible", Value: "2" },  
  41.               ]  
  42.             
  43.         });  
  44.     kendo.bind($("#example"), viewModel);  
  45.       })  
  46.     </script>  
  47. </body>  
  48. </html>  
Dropdownlist in Browser: 
 
                                                                          
 
I hope you enjoyed this blog. Your valuable feedback, question, or comments about this blog are always welcomed.
Next Recommended Reading Getting Text and Value From Selected Item in Kendo ComboBox using JQuery