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.

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

The following example demonstrates how to use the invisible binding. 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.

html

<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>

See Also

• MVVM Overview
• Overview of the Attribute Binding
• Overview of the Checked Binding
• Overview of the Click Binding
• Overview of the CSS Binding
• Overview of the Custom Binding
• Overview of the Disabled Binding
• Overview of the Enabled Binding
• Overview of the Events Binding
• Overview of the HTML Binding
• Overview of the Source Binding
• Overview of the Style Binding
• Overview of the Text Binding
• Overview of the Value Binding
• Overview of the Visible Binding