Wijmo UI for the Web
KO Expander Binding
Wijmo User Guide > Concepts > Integrating Frameworks > Knockout > Two-Way Live Binding > KO Expander Binding

Data-binding options:

Example:

In this example, the ViewModel is defined specifically for use with the expander. It has disabled, allowExpand, expanded, and expandDirection properties that are bound in the View. If any of these values change, then the widgets automatically respond to them. The widgets also update the ViewModel values as they modify them. The expanded content appears to the right of the header. Click the header and the expanded content is hidden.

Create a ViewModel:

ViewModel Script
Copy Code
var viewModel = function () {  
    var self = this;  
    self.disabled = ko.observable(false);  
    self.allowExpand = ko.observable(true);  
      self.expanded = ko.observable(true);         
      self.expandDirection = ko.observable('bottom');
};

Create View with Bound Controls:

View Markup
Copy Code
<div data-bind="wijexpander: { 
    disabled: disabled, 
    allowExpand: allowExpand, 
    expanded: expanded, 
    expandDirection: expandDirection }">
See Also

Concepts

Widgets

Reference