Hide/Show the Element Which Depends on View Model in Kendo UI

Gowtham K
8y
3.7k
0
0

Blog

Visible.rar

The visible binding show/hide the elements or the widget is depending on the view model value in the MVVM pattern of Kendo UI. If the value is true it will show the element, for false case it will hide the element which means its display CSS attribute will be set to none.

Let us consider an example as shown below,

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/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/2015.3.1111/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.all.min.js"></script></head>
<body>
<div id="example">
<div data-bind="visible: isVisible">Hello I'm Visible
</div>
<button data-bind="click: hide">Hide</button>
<button data-bind="click:show">Show</button>
<script>
var viewModel = kendo.observable({
isVisible: true,
hide: function() {
this.set("isVisible", false);
},
show:function()
{
this.set("isVisible", true);
}
});
kendo.bind($("#example"), viewModel);
</script>
</div>
</body>
</html>