Set Default Value in Kendo Dropdown List using MVVM Pattern

Gowtham K
8y
9.2k
0
1

Blog

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.406/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.406/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.406/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.406/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.1.406/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.1.406/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.1.406/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div class="row">
<div class="col-lg-3">
Voting Status:
<input id="VotingStatusList" data-role="dropdownlist"
data-bind="source:votingStatusList,value:VotingStatusList" data-text-field="Text" data-value-field="Value" data-option-label="--Select Voting Status--"
style="width:100%" />
</div>
</div>
</div>
<script>
$(document).ready(function(){
var viewModel = kendo.observable({
VotingStatusList:'',
votingStatusList:
[{ Text: "Eligible", Value: "1" },
{ Text: "Not-Eligible", Value: "2" },
]
});
kendo.bind($("#example"), viewModel);
})
</script>
</body>
</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.

var viewModel = kendo.observable({
VotingStatusList:1,//setting Eligible as a default value
})

Code to set the default value in kendo dropdownlist using MVVM pattern

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.406/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.406/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.406/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.406/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.1.406/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.1.406/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.1.406/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div class="row">
<div class="col-lg-3">
Voting Status:
<input id="VotingStatusList" data-role="dropdownlist"
data-bind="source:votingStatusList,value:VotingStatusList" data-text-field="Text" data-value-field="Value"
style="width:100%" />
</div>
</div>
</div>
<script>
$(document).ready(function(){
var viewModel = kendo.observable({
VotingStatusList:1, //setting Eligible as a default value
votingStatusList:
[{ Text: "Eligible", Value: "1" },
{ Text: "Not-Eligible", Value: "2" },
]
});
kendo.bind($("#example"), viewModel);
})
</script>
</body>
</html>