Reset the 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

<!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,

Reset the value in kendo dropdownlist

Using Viewmodel

Code to reset the value in Kendo dropdownlist using viewmodel,

<!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>
<br/>
<button data-bind="click:reset" class="k-button">Reset</button>
</div>
</div>
<script>
$(document).ready(function(){
var viewModel = kendo.observable({
VotingStatusList:'',
votingStatusList:
[{ Text: "Eligible", Value: "1" },
{ Text: "Not-Eligible", Value: "2" },
],
reset:function(e)
{
e.preventDefault();
viewModel.set("VotingStatusList",-1);
},
});
kendo.bind($("#example"), viewModel);
})
</script>
</body>
</html>

The reset function is triggered on button click which is used to reset the value of the dropdownlist value by setting the VotingStatusList model to -1.

I hope you enjoyed this blog. Your valuable feedback, question, or comments about this blog are always welcomed.