Edit this page

Invisible Binding

The Kendo UI Invisible (invisible) binding hides or shows the target DOM element or widget depending on the View-Model value. If the value is true, the target DOM element is hidden—its display CSS attribute is set to none. If the value is false, the target DOM element is shown.

Getting Started

Setup

The example below demonstrates how to use the invisible binding.

Example
<div id="view">
    <div data-bind="invisible: isInvisible">some content
    </div>
    <button data-bind="click: show">Show</button>
</div>
<script>
var viewModel = kendo.observable({
    isInvisible: true,
    show: function() {
        this.set("isInvisible", false);
    }
});

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

In the example, the div element is initially hidden because the value of the isInvisible field is true. When the user clicks the button, the div is shown because the value of the isInvisible field is set to false.

Non-Boolean Values

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

See Also

Other articles on the Kendo UI MVVM component and bindings:

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve the information

close
Dummy