Visible Binding

The visible binding shows or hides the target DOM element or widget depending on the View-Model value.

If the value is true, the target DOM element is shown. If the value is false, the target DOM element is hidden—its display CSS attribute is set to none.

Non-Boolean values, such as 0, null, undefined and "", are treated as false by the visible binding. All other values are treated as true.

The following example demonstrates how to use the visible binding. The div element is initially visible because the value of the isVisible field is true. When the user clicks the button, the div is going to be hidden because the value of the isVisible field is set to false.

<div id="view">
<div data-bind="visible: isVisible">some content
<button data-bind="click: hide">Hide</button>
</div>
<script>
var viewModel = kendo.observable({
    isVisible: true,
    hide: function() {
        this.set("isVisible", false);
    }
});

kendo.bind($("div"), viewModel);
</script>
 </div>

See Also

In this article
Not finding the help you need? Improve this article