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>
  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">
  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() {
  27. this.set("isVisible", false);
  28. },
  29. show:function()
  30. {
  32. this.set("isVisible", true);
  33. }
  34. });
  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.