KO SuperPanel Binding

Data-binding options:

allowResize
autoRefresh
disabled
mouseWheelSupport
showRounder

Example:

In this example, the ViewModel is defined specifically for use with the superpanel. It has disabled, allowResize, autoRefresh, mouseWheelSupport, and showRounder properties that are bound in the View. If any of these values change, the widgets automatically respond to them. The widgets also update the ViewModel values as they modify them.

Create a ViewModel:

ViewModel Script	Copy Code
var viewModel = function () { var self = this; self.disabled = ko.observable(false); self.allowResize = ko.observable(true); self.autoRefresh = ko.observable(true); self.mouseWheelSupport = ko.observable(true); self.showRounder = ko.observable(true); };

ViewModel Script

Copy Code

var viewModel = function () {     
    var self = this; 
    self.disabled = ko.observable(false);     
    self.allowResize = ko.observable(true); 
    self.autoRefresh = ko.observable(true); 
    self.mouseWheelSupport = ko.observable(true);     
    self.showRounder = ko.observable(true);
};

Create View with Bound Controls:

View Markup	Copy Code
<div id="superPanel" data-bind="wijsuperpanel: { disabled: disabled, allowResize: allowResize, autoRefresh: autoRefresh, mouseWheelSupport: mouseWheelSupport, showRounder: showRounder }" style="width: 754px; height: 300px;"> <div class="elements"> <ul> <li style="background: none repeat scroll 0% 0%activeborder;"><span>ActiveBorder</span> </li> <li style="background: none repeat scroll 0% 0% activecaption;"><span>ActiveCaption</span> </li> <li style="background: none repeat scroll 0% 0% captiontext;"><span>ActiveCaptionText</span> </li> <!-- … --> <li style="background: none repeat scroll 0% 0% menu;"><span>MenuBar</span> </li> <li style="background: none repeat scroll 0% 0% highlighttext;"><span>MenuHighlight</span> </li> </ul> </div> </div>

View Markup

Copy Code

<div id="superPanel" data-bind="wijsuperpanel: { 
    disabled: disabled, 
    allowResize: allowResize, 
    autoRefresh: autoRefresh, 
    mouseWheelSupport: mouseWheelSupport, 
    showRounder: showRounder }" 
  style="width: 754px; height: 300px;">     
  <div class="elements">         
      <ul>
         <li style="background: none repeat scroll 0% 0%activeborder;"><span>ActiveBorder</span>         
        </li>
        <li style="background: none repeat scroll 0% 0% activecaption;"><span>ActiveCaption</span>     
        </li>
        <li style="background: none repeat scroll 0% 0% captiontext;"><span>ActiveCaptionText</span> </li>  <!-- … -->
        <li style="background: none repeat scroll 0% 0% menu;"><span>MenuBar</span> </li>     
        <li style="background: none repeat scroll 0% 0% highlighttext;"><span>MenuHighlight</span>         
        </li>
     </ul>
 </div>
</div>

See Also

Widgets

Concepts

Reference