Post
Ask Question

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

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, 
  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/2015.3.1111/styles/kendo.common.min.css">  
  8.   <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.rtl.min.css">  
  9.   <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.default.min.css">  
  10.   <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/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/2015.3.1111/js/angular.min.js"></script>  
  14.   <script src="http://kendo.cdn.telerik.com/2015.3.1111/js/jszip.min.js"></script>  
  15.   <script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.all.min.js"></script></head>  
  16. <body>  
  17.   <div id="example">  
  18. <div data-bind="visible: isVisible">Hello I'm Visible  
  19. </div>  
  20.    <button data-bind="click: hide">Hide</button>  
  21.   <button data-bind="click:show">Show</button>  
  22. <script>  
  23. var viewModel = kendo.observable({  
  24.     isVisible: true,  
  25.     hide: function() {  
  26.         
  27.         this.set("isVisible", false);  
  28.     },  
  29.   show:function()  
  30.   {  
  31.       
  32.        this.set("isVisible", true);  
  33. }  
  34. });  
  35.   
  36. kendo.bind($("#example"), viewModel);  
  37. </script>  
  38.  </div>  
  39. </body>  
  40. </html>  
Result in Browser
 
 

By clicking Hide Button

 
By clicking Show Button
 
 
I hope you have enjoyed this blog, Thank you.  
Next Recommended Reading Kendo UI Masked Textbox And Events