Using Wijmo with Knockout

Contents

Using Wijmo with Knockout

Wijmo now supports Knockout (KO), a JavaScript library that uses the Model View View Model (MVVM) pattern, allowing you to easily create and maintain a dynamically changing UI. You can use KO in addition to jQuery to enhance your pages with an underlying data model. For a full KO introduction, tutorials, documentation, explanation of MVVM and more, visit http://knockoutjs.com/.

You can easily use Knockout with Wijmo by following a few simple steps:

  1. Add references to the latest jQuery dependencies, Wijmo widgets, Knockout .js file, and KO extension library for Wijmo.
  2. Create the ViewModel and View: add JavaScript to define the data and behavior of the UI, and add markup to create the View—the visual, interactive UI.
  3. Bind the Wijmo widget(s) to the ViewModel and activate KO.

Samples using Wijmo and Knockout

See Wijmo and Knockout in action with the following samples:

Getting Started

To get started, take a look at the following samples. Each will show you how to add references to the required files, create the ViewModel and View, and bind the Wijmo widgets.

Textbox, Slider, and Gauge Sample

In this example, we'll create a text box, slider, and gauge that are bound together so that when the value of one element is changed, the other elements update accordingly.

1: Add Library References:

The first step is to create an .html page and add links to the dependencies to your project within the <head> tags. To do this, just link to the content delivery network (CDN) files:

Note: Please reference the latest dependencies from the CDN at http://wijmo.com/downloads/#wijmo-cdn.

<!--jQuery-->   
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.7.1.min.js" type="text/javascript"></script>   
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.18/jquery-ui.min.js" type="text/javascript"></script>
To link to the Wijmo widgets, add the following CDN link within the <head> tags:
<!-- Wijmo CSS and script -->
    <link type="text/css" href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css" rel="stylesheet" title="metro-jqueryui" />
    <link type="text/css" href="http://cdn.wijmo.com/jquery.wijmo-complete.all.2.1.0.min.css" rel="stylesheet" />
    <script type="text/javascript" src="http://cdn.wijmo.com/jquery.wijmo-open.all.2.1.0.min.js"></script>
    <script type="text/javascript" src="http://cdn.wijmo.com/jquery.wijmo-complete.all.2.1.0.min.js"></script>
Then add a reference to Knockout and the Knockout extension library for Wijmo within the <head> tags:
<!--Knockout JS Library-->
<script src="http://cdn.wijmo.com/wijmo/external/knockout-2.2.0.js" type="text/javascript"></script>
 
<!--Wijmo Knockout Integration Library-->
<script src="http://cdn.wijmo.com/interop/knockout.wijmo.3.20131.1.js" type="text/javascript"></script>

2. Create the ViewModel and View:

Now create a view model to define the data and behavior of the UI. Enter the following <script> within the <head> tags:
<script type="text/javascript">
<!--when document loads, create ViewModel, and apply bindings-->
<!--Create ViewModel-->
        var viewModel = function () {
            var self = this;
            self.val = ko.observable(50);
            self.min = ko.observable(0);
            self.max = ko.observable(100);
        };
</script>
To create the Textbox, Slider, and Gauge HTML elements, place the following markup within the body of the .html document. This serves as the View in the MVVM pattern. The value for each element will start at 50 with minimum (0) and maximum (100) values set in the ViewModel above.
<!--Create View-->  
<body>
    <div class="container">
        <h2>
            Textbox</h2>
        <input data-bind="value: val" style="width: 200px;" /> <span data-bind="text: val"></span>
        <div>
            <h2>
                Slider</h2>
            <div data-bind="wijslider: { value: val, min: min, max: max }" style="width: 200px;">
            </div>
            <h2>
                Gauge</h2>
            <div data-bind="wijlineargauge: {value: val, min: min, max: max }">
            </div>
        </div>
    </div>
</body>

3. Bind Wijmo Widgets to the ViewModel and Activate KO:

Now bind to the ViewModel and activate knockout.js by adding the following JavaScript within the <script> tags after the ViewModel script:
<!--Bind ViewModel-->
        $(document).ready(function () {
            var vm = new viewModel();
            ko.applyBindings(vm);
        });
The full markup should look similar to this:
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Wijmo MVVM Support</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <style type="text/css">
        body
        {
            font-size: 13px;
        }
    </style>
    <!-- jQuery -->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
    <!-- Wijmo CSS and script -->
    <link type="text/css" href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css" rel="stylesheet" title="metro-jqueryui" />
    <link type="text/css" href="http://cdn.wijmo.com/jquery.wijmo-complete.all.2.1.0.min.css" rel="stylesheet" />
    <script type="text/javascript" src="http://cdn.wijmo.com/jquery.wijmo-open.all.2.1.0.min.js"></script>
    <script type="text/javascript" src="http://cdn.wijmo.com/jquery.wijmo-complete.all.2.1.0.min.js"></script>
    <!-- KnockoutJS for MVVM-->
    <script type="text/javascript" src="http://cdn.wijmo.com/external/knockout-2.0.0.js"></script>
    <script type="text/javascript" src="http://cdn.wijmo.com/external/knockout.wijmo.js"></script>
    <script type="text/javascript">

    <!-- when document loads, create ViewModel, and apply bindings-->
    <!-- Create ViewModel-->
        var viewModel = function () {
            var self = this;
            self.val = ko.observable(50);
            self.min = ko.observable(0);
            self.max = ko.observable(100);
        };

    <!-- Bind ViewModel-->
        $(document).ready(function () {
            var vm = new viewModel();
            ko.applyBindings(vm);
        });
    </script>
</head>
<body>
    <div class="container">
        <h2>
            Textbox</h2>
        <input data-bind="value: val" style="width: 200px;" /> <span data-bind="text: val"></span>
        <div>
            <h2>
                Slider</h2>
            <div data-bind="wijslider: { value: val, min: min, max: max }" style="width: 200px;">
            </div>
            <h2>
                Gauge</h2>
            <div data-bind="wijlineargauge: {value: val, min: min, max: max }">
            </div>
        </div>
    </div>
</body>
</html>
When you open the page, it looks similar to the following image. Enter a new value in the textbox or drag the slider. Notice the values on the other elements change to match the specified value.

KnockoutWijSliderGauge.png

This sample demonstrates the power of two-way live binding in Knockout. It also shows how much code can be saved by using widgets that support two knockout binding. The widgets are both listening for changes in ViewModel events and pushing changes to the ViewModel. That allows you to always program against the ViewModel and never have to worry about handing change events on the widgets or other DOM elements just to update your data. Using this MVVM pattern can really keep applications clean and structured, allowing you to focus on business logic and not spend time writing UI event handing and DOM manipulation code.

Pie Chart Sample

In the following example you will create a pie chart containing data for a total number of males and females; each group can be changed by the user. The final page will look similar to this:

KnockoutWijPieChart1.png

1: Add Library References:

The first step is to create an .html page and add links to the dependencies to your project within the <head> tags. To do this, just link to the content delivery network (CDN) files:

Note: Please reference the latest dependencies from the CDN at http://wijmo.com/downloads/#wijmo-cdn.

<!--jQuery References-->   
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.7.1.min.js" type="text/javascript"></script>   
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.17/jquery-ui.min.js" type="text/javascript"></script>
To link to the Wijmo widgets, add the following CDN link within the <head> tags:
<!--Wijmo Widgets JavaScript-->   
<script src="http://cdn.wijmo.com/jquery.wijmo-complete.all.2.1.0.min.js" type="text/javascript"></script>
To add a theme and CSS style sheets, add the following CDN links to your page within the <head> tags:
<!--Theme-->    
<link href="http://cdn.wijmo.com/themes/rocket/jquery-wijmo.css" rel="stylesheet" type="text/css" title="rocket-jqueryui" /> 

<!--Wijmo Widgets CSS-->   
<link href="http://cdn.wijmo.com/jquery.wijmo-complete.all.2.1.0.min.css" rel="stylesheet" type="text/css" />
Then add a reference to Knockout 2.0 and the Knockout extension library for Wijmo within the <head> tags:
<!--Knockout JS library--> 
<script src="http://cdn.wijmo.com/external/knockout-2.0.0.js" type="text/javascript"></script>
<!--Wijmo Knockout Integration Library--> 
<script src="http://cdn.wijmo.com/external/knockout.wijmo.js" type="text/javascript"></script>

2. Create the ViewModel and View:

Now create a view model to define the data and behavior of the UI. Enter the following <script> within the <head> tags:
<script type="text/javascript">
     <!--Create ViewModel--> 
	    var viewModel = function () {
	        var self = this;
	        self.males = ko.numericObservable(10);
	        self.females = ko.numericObservable(90);
	    };
</script>
To create the wijpiechart HTML element, place the following markup within the body of the .html document. This serves as the View in the MVVM pattern.
     <!--Create View--> 
	<div>
		males: <input type="text" data-bind="value: males" />
		females: <input type="text" data-bind="value: females" />
	</div>	
<div class="piechart" data-bind="wijpiechart: { width: 600, height: 400, seriesList: [{ label: 'Male', data: males }, { label: 'Female', data: females }] }"></div>

3. Bind Wijmo Widgets to the ViewModel and Activate KO:

Now bind to the ViewModel and activate knockout.js by adding the following JavaScript within the <script> tags after the ViewModel script:
     <!--Bind ViewModel--> 
		$(document).ready(function () {
		    var vm = new viewModel();
		    ko.applyBindings(vm);
		});

View the full wijpiechart sample markup page for an example of what the markup should look like.

When you open the page, the wijpiechart looks similar to the following image. Enter new values for the males and females, and the pie updates accordingly.

KnockoutWijPieChart1.png

Widgets and Bindable Options

When data binding, any valid widget option can be set declaratively using Knockout. If an option is not bound to the ViewModel, then it simply gets passed through during initialization of the widget. The data-binding options listed in the following topics support two-way live binding and will automatically respond to changes in data.

For a full list of options for each widget, see the following table:

Accordion EventsCalendar List Splitter
BarChart Expander Menu Superpanel
BubbleChart Gallery Pager Tabs
Calendar Grid Piechart Tooltip
Carousel InputDate Popup Tree
CompositeChart InputMask Progressbar Upload
Datasource InputNumber RadialGauge Video Player
DatePager LightBox Rating Wizard
Dialog LinearGauge ScatterChart
Editor Linechart Slider


If you want to create view-model binding, you can use the options included in the knockout.wijmo.js library. Simply set the widget option in the HTML markup. In the Pie Chart Sample, data-binding options were set for the wijpiechart widget like this:

<body>
	<!--Create View-->
<div>
		males: <input type="text" data-bind="value: males" />
		females: <input type="text" data-bind="value: females" />
	</div>	
<div class="piechart" data-bind="wijpiechart: { width: 600, height: 400, seriesList: [{ label: 'Male', data: males }, { label: 'Female', data: females }] }"></div>
</body>

The following topics list the options in the knockout.wijmo.js library for each widget and include example markup for at least one of the options.

wijaccordion

Data-binding options:


NOTE: Any valid widget option can be set declaratively using Knockout. If an option is not bound to the ViewModel then it simply gets passed through during initialization of the widget. The options listed above support two-way live binding and will automatically respond to changes in data.


Example:
In this example, the ViewModel is defined specifically for use with the accordion. It has disabled, requireOpenedPane and selectedIndex properties that are bound in the View. If any of these values change, then the widgets will automatically respond to them. The widgets also update the ViewModel values as they modify them. For example, as the user clicks to select different panes, the selectedIndex value in the ViewModel will be updated automatically.

Create a ViewModel:

var viewModel = function () {
	var self = this;
	self.disabled = ko.observable(false);
	self.requireOpenedPane = ko.observable(false);
	self.selectedIndex = ko.observable(0);
};

Create View with Bound Controls:

<div data-bind="wijaccordion: {disabled: disabled, requireOpenedPane: requireOpenedPane, selectedIndex: selectedIndex}">
    <div>
        <h3>
            <a href="#">First</a></h3>
        <div>
            <p>
                First Pane
            </p>
        </div>
    </div>
    <div>
        <h3>
            <a href="#">Second</a></h3>
        <div>
            <p>
                Second Pane
            </p>
        </div>
    </div>
</div>

wijbarchart

Data-binding options:


NOTE: Any valid widget option can be set declaratively using Knockout. If an option is not bound to the ViewModel then it simply gets passed through during initialization of the widget. The options listed above support two-way live binding and will automatically respond to changes in data.


Example:
In this example, the ViewModel is defined specifically for use with the bar chart. It has header, stacked and seriesList properties that are bound in the View. If any of these values change, then the widgets will automatically respond to them. The widgets also update the ViewModel values as they modify them.

Create a ViewModel:

var viewModel = { 	
    header: ko.observable('head'), 	
    stacked: ko.observable(false), 	
    seriesList: ko.observableArray([createRandomSeriesList('legend' + index)]) 
            /*[{ 		
                  label: 'US', 		
                  legendEntry: true, 

                  data: { 
                             x: ['PS3', 'XBOX360', 'Wii'], 
                             y: [12.35, 21.50, 30.56]}
                           }]
                             */
                  };

Create View with Bound Controls:

<div id="wijbarchart" data-bind="wijbarchart: {stacked: stacked, seriesList: seriesList}" style="width:600px;height:400px;"></div>

wijbubblechart

Data-binding options:


NOTE: Any valid widget option can be set declaratively using Knockout. If an option is not bound to the ViewModel then it simply gets passed through during initialization of the widget. The options listed above support two-way live binding and will automatically respond to changes in data.


Example:
In this example, the ViewModel is defined specifically for use with the bubble chart. It has the seriesList property bound in the View. If this value changes, then the widgets will automatically respond. The widgets also update the ViewModel values as they modify them.

Create a ViewModel:

  var viewModel = { 	
       seriesList: ko.observableArray([createRandomSeriesList('legend' + index)]) 	
   };

Create View with Bound Controls:

<div id="wijbubblechart" data-bind="wijbubblechart: { seriesList: seriesList }" style="width:600px;height:400px;"></div>

wijcalendar

Data-binding options:


NOTE: Any valid widget option can be set declaratively using Knockout. If an option is not bound to the ViewModel then it simply gets passed through during initialization of the widget. The options listed above support two-way live binding and will automatically respond to changes in data.


Example:
In this example, the ViewModel is defined specifically for use with the calendar. It has disabled, showTitle, showWeekDays, showWeekNumbers, showOtherMonthDays, showDayPadding, allowPreview, allowQuickPick, popupMode, and selectedDates properties that are bound in the View. If any of these values change, then the widgets will automatically respond to them. The widgets also update the ViewModel values as they modify them.

Create a ViewModel:

var viewModel = function () { 		
         var self = this; 		
             self.disabled = ko.observable(false); 		
             self.showTitle = ko.observable(true); 
             self.showWeekDays = ko.observable(true); 
             self.showWeekNumbers = ko.observable(false); 
             self.showOtherMonthDays = ko.observable(true);
             self.showDayPadding = ko.observable(false); 
             self.allowPreview = ko.observable(false); 
             self.allowQuciPick = ko.observable(true); 
             self.popupMode = ko.observable(false); 
             self.selectedDates = ko.observableArray();

Create View with Bound Controls:

<div data-bind="wijcalendar: {disabled: disabled, showTitle: showTitle, showWeekDays: showWeekDays, showWeekNumbers: showWeekNumbers, showOtherMonthDays: showOtherMonthDays, showDayPadding: showDayPadding, allowPreview: allowPreview, allowQuickPick: allowQuickPick, popupMode: popupMode, selectedDates: selectedDates }"></div>

wijcarousel

Data-binding options:


NOTE: Any valid widget option can be set declaratively using Knockout. If an option is not bound to the ViewModel then it simply gets passed through during initialization of the widget. The options listed above support two-way live binding and will automatically respond to changes in data.


Example:
In this example, the ViewModel is defined specifically for use with the carousel. It has disabled, auto, showTimer, interval, loop, showPager, showCaption, display, step, and preview properties that are bound in the View. If any of these values change, then the widgets will automatically respond to them. The widgets also update the ViewModel values as they modify them.

Create a ViewModel:

           var viewModel = function () { 	
                var self = this; 
                self.disabled = ko.observable(false);
                self.auto = ko.observable(false);
                self.showTimer = ko.observable(false);
                self.interval = ko.observable(5000); 
                self.loop = ko.observable(true);
                self.showPager = ko.observable(false);
                self.showCaption = ko.observable(true);
                self.display = ko.observable(1); 
                self.step = ko.observable(1); 
                self.preview = ko.observable(false); 	
              };

Create View with Bound Controls:

<div id="wijcarousel0" data-bind="wijcarousel: {disabled: disabled, auto: auto, showTimer: showTimer, interval: interval, loop: loop, showPager: showPager, showCaption: showCaption, display: display, preview: preview, step: step }"> 
	<ul> 
		<li> 
		<img src="http://lorempixum.com/750/300/sports/1" alt="Sports 1" /> 
		<span> 
		  <h3> 
		  Word Caption 1</h3> 		  Word Caption 1</span> </li> 		<li><img src="http://lorempixum.com/750/300/sports/2" alt="Sports 2" /> <span>Word Caption 2</span></li> 		
                          <li><img src="http://lorempixum.com/750/300/sports/3" alt="Sports 3" /><span>Word Caption 3</span></li> 
                          <li><img src="http://lorempixum.com/750/300/sports/4" alt="Sports 4" /><span>Word Caption 4</span></li>
                          <li><img src="http://lorempixum.com/750/300/sports/5" alt="Sports 5" /><span>Word Caption 5</span></li> 
                           <li><img src="http://lorempixum.com/750/300/sports/6" alt="Sports 6" /><span>Word Caption 6</span></li> 		
                           <li><img src="http://lorempixum.com/750/300/sports/7" alt="Sports 7" /><span>Word Caption 7</span></li> 
                           <li><img src="http://lorempixum.com/750/300/sports/8" alt="Sports 8" /><span>Word Caption 8</span></li>
                     </ul> </div>

wijcheckbox

Data-binding options:

  • checked
  • disabled

NOTE: Any valid widget option can be set declaratively using Knockout. If an option is not bound to the ViewModel then it simply gets passed through during initialization of the widget. The options listed above support two-way live binding and will automatically respond to changes in data.


Example:
In this example, the ViewModel is defined specifically for use with the checkbox. It has a checked property that is bound in the View. If this value changes, then the widgets will automatically respond. The widgets also update the ViewModel values as they modify them.

Create a ViewModel:

    var viewModel = function () { 	        
       this.check = ko.observable(true);

Create View with Bound Controls:

<h3>CheckBox</h3> 
  <label for="checkbox1">checkbox1</label><input id="checkbox1"   type="checkbox"  data-bind="wijcheckbox: {checked: check}" /> 
<label for="checkbox2">checkbox2</label><input id="checkbox2" type="checkbox" data-bind="wijcheckbox: {}" /> 
<label for="checkbox3">checkbox3</label><input id="checkbox3" type="checkbox" data-bind="wijcheckbox: {}" /> 
<label for="checkbox4">checkbox4</label><input id="checkbox4" type="checkbox" data-bind="wijcheckbox: {}" />

wijcombobox

Data-binding options:


NOTE: Any valid widget option can be set declaratively using Knockout. If an option is not bound to the ViewModel then it simply gets passed through during initialization of the widget. The options listed above support two-way live binding and will automatically respond to changes in data.


Example:
In this example, the ViewModel is defined specifically for use with the combobox. It has disabled, labelText, showTrigger, triggerPosition, autoFilter, autoComplete, highlightMatching, selectionMode, isEditable, selectedIndex, and data properties that are bound in the View. If any of these values change, then the widgets will automatically respond to them. The widgets also update the ViewModel values as they modify them.

Create a ViewModel:

         var viewModel = function () { 	
            var self = this;
            self.disabled = ko.observable(false);
            self.labelText = ko.observable(null);
            self.showTrigger = ko.observable(true);
            self.triggerPosition = ko.observable('right'); 
            self.autoFilter = ko.observable(true); 
            self.autoComplete = ko.observable(true); 
            self.highlightMatching = ko.observable(true); 
            self.selectionMode = ko.observable('single'); 
            self.isEditable = ko.observable(true); 
            self.selectedIndex = ko.observable(-1); 
            self.data = ko.observable(createList());

Create View with Bound Controls:

<input id="combo" data-bind="wijcombobox: { 
           disabled: disabled, labelText: labelText, showTrigger: showTrigger, triggerPosition: triggerPosition, isEditable: isEditable, autoComplete: autoComplete, autoFilter: autoFilter, highlightMatching: highlightMatching, selectedIndex: selectedIndex, data: data,selectionMode:selectionMode}"/>

wijcompositechart

Data-binding options:


NOTE: Any valid widget option can be set declaratively using Knockout. If an option is not bound to the ViewModel then it simply gets passed through during initialization of the widget. The options listed above support two-way live binding and will automatically respond to changes in data.


Example:
In this example, the ViewModel is defined specifically for use with the composite chart. It has the seriesList property bound in the View. If this value changes, then the widgets will automatically respond. The widgets also update the ViewModel values as they modify them.

Create a ViewModel:

  var viewModel;
		<!-- Create ViewModel -->
		<!-- Bind ViewModel -->
		$(document).ready(function () {
			viewModel = {
				seriesList: ko.observableArray([createRandomSeriesList('legend' + index)])
			};
			ko.applyBindings(viewModel);
		});

Create View with Bound Controls:

<div id="wijcompositechart" data-bind="wijcompositechart: {seriesList: seriesList}" style="width:600px;height:400px;"></div>

wijdialog

Data-binding options:


NOTE: Any valid widget option can be set declaratively using Knockout. If an option is not bound to the ViewModel then it simply gets passed through during initialization of the widget. The options listed above support two-way live binding and will automatically respond to changes in data.


Example:
In this example, the ViewModel is defined specifically for use with the dialog. It has disabled, autoOpen, draggable, model, and resizable properties that are bound in the View. If any of these values change, then the widgets will automatically respond to them. The widgets also update the ViewModel values as they modify them.

Create a ViewModel:

         var viewModel = function () { 	
              var self = this;
              self.disabled = ko.observable(false);
              self.autoOpen = ko.observable(true);
              self.draggable = ko.observable(true);
              self.modal = ko.observable(false); 
              self.resizable = ko.observable(true);

Create View with Bound Controls:

<div id="dialog" data-bind="wijdialog: {disabled: disabled, autoOpen: autoOpen, draggable: draggable, modal: modal, resizable: resizable }" title="Basic dialog">

wijdropdown

Data-binding options:

  • disabled

NOTE: Any valid widget option can be set declaratively using Knockout. If an option is not bound to the ViewModel then it simply gets passed through during initialization of the widget. The options listed above support two-way live binding and will automatically respond to changes in data.


Example:
In this example, the ViewModel is defined specifically for use with the dropdown. If the value of a wijdropdown data-binding option changes, then the widgets will automatically respond. The widgets also update the ViewModel values as they modify them.

Create a ViewModel:

var viewModel = function () { 	       
    this.check = ko.observable(true);

Create View with Bound Controls:

<h3>Dropdown with Optgroups</h3> 
    <select id="select2" data-bind="wijdropdown: {}"> 	
     <optgroup label="A-G"> 		
           <option>A</option>
           <option selected="selected">B</option>
           <option>C</option>
           <option>D</option>
           <option>E</option>
           <option>F</option>
           <option>G</option>
     </optgroup> 	
     <optgroup label="H-M">
           <option>H</option>
           <option>I</option>
           <option>J</option>
           <option>K</option>
           <option>L</option>
           <option>M</option>
           </optgroup>
      </select>

wijeditor

Data-binding options:


NOTE: Any valid widget option can be set declaratively using Knockout. If an option is not bound to the ViewModel then it simply gets passed through during initialization of the widget. The options listed above support two-way live binding and will automatically respond to changes in data.


Example:
In this example, the ViewModel is defined specifically for use with the editor. It has disabled, editorMode, showPathSelector, showFooter, and mode properties that are bound in the View. If any of these values change, then the widgets will automatically respond to them. The widgets also update the ViewModel values as they modify them.

Create a ViewModel:

    var viewModel = function () { 		
       var self = this;
           self.disabled = ko.observable(false); 
           self.editorMode = ko.observable('wysiwyg'); 
           self.showPathSelector = ko.observable(true);
           self.mode = ko.observable('ribbon'); 
           self.showFooter = ko.observable(true);

Create View with Bound Controls:

<textarea id="wijeditor" style="width: 800px; height: 600px;" data-bind="wijeditor: { disabled: disabled, editorMode: editorMode,  	showPathSelector: showPathSelector, mode: mode, showFooter: showFooter, }"></textarea>

wijexpander

Data-binding options:


NOTE: Any valid widget option can be set declaratively using Knockout. If an option is not bound to the ViewModel then it simply gets passed through during initialization of the widget. The options listed above support two-way live binding and will automatically respond to changes in data.

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 will automatically respond to them. The widgets also update the ViewModel values as they modify them.

Create a ViewModel:

     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:

<div data-bind="wijexpander: { disabled: disabled, allowExpand: allowExpand, expanded: expanded, expandDirection: expandDirection }">

wijgallery

Data-binding options:


NOTE: Any valid widget option can be set declaratively using Knockout. If an option is not bound to the ViewModel then it simply gets passed through during initialization of the widget. The options listed above support two-way live binding and will automatically respond to changes in data.


Example:
In this example, the ViewModel is defined specifically for use with the gallery. It has disabled, autoPlay, showTimer, interval, showCaption, showCounter, showPager, and thumbsDisplay properties that are bound in the View. If any of these values change, then the widgets will automatically respond to them. The widgets also update the ViewModel values as they modify them.

Create a ViewModel:

var viewModel = function () { 		
   var self = this; 
       self.disabled = ko.observable(false);
       self.autoPlay = ko.observable(false);
       self.showTimer = ko.observable(true);
       self.interval = ko.observable(5000);
       self.showCaption = ko.observable(true);
       self.showCounter = ko.observable(true); 
       self.showPager = ko.observable(false);
       self.thumbsDisplay = ko.observable(5);

Create View with Bound Controls:

<div data-bind="wijgallery: {disabled: disabled, autoPlay: autoPlay, showTimer: showTimer, interval: interval, showCaption: showCaption,  		showCounter: showCounter, showPager: showPager, thumbsDisplay: thumbsDisplay }"> 		
       <ul class=""> 			
            <li class=""><a href="http://lorempixum.com/750/300/sports/1"> 		<img alt="1" src="http://lorempixum.com/200/150/sports/1" title="Word Caption 1" /></a></li>
	<li class=""><a href="http://lorempixum.com/750/300/sports/2"> 		<img alt="2" src="http://lorempixum.com/200/150/sports/2" title="Word Caption 2" /></a></li>
	<li class=""><a href="http://lorempixum.com/750/300/sports/3"> 		<img alt="3" src="http://lorempixum.com/200/150/sports/3" title="Word Caption 3" /></a></li>
	<li class=""><a href="http://lorempixum.com/750/300/sports/4"> 		<img alt="4" src="http://lorempixum.com/200/150/sports/4" title="Word Caption 4" /> </a></li>
	<li class=""><a href="http://lorempixum.com/750/300/sports/5"> 		<img alt="5" src="http://lorempixum.com/200/150/sports/5" title="Word Caption 5" /></a></li>
             <li class=""><a href="http://lorempixum.com/750/300/sports/6"> 		<img alt="6" src="http://lorempixum.com/200/150/sports/6" title="Word Caption 6" /></a></li>
 	<li class=""><a href="http://lorempixum.com/750/300/sports/7"> 		<img alt="7" src="http://lorempixum.com/200/150/sports/7" title="Word Caption 7" /></a></li>
	<li class=""><a href="http://lorempixum.com/750/300/sports/8"> 		<img alt="8" src="http://lorempixum.com/200/150/sports/8" title="Word Caption 8" /></a></li>
	<li class=""><a href="http://lorempixum.com/750/300/sports/9"> 		<img alt="9" src="http://lorempixum.com/200/150/sports/9" title="Word Caption 9" /></a></li>
	<li class=""><a href="http://lorempixum.com/750/300/sports/10"> 	<img alt="10" src="http://lorempixum.com/200/150/sports/10" title="Word Caption 10" /></a></li>
    </ul>
  </div>

wijgrid

Data-binding options:


NOTE: Any valid widget option can be set declaratively using Knockout. If an option is not bound to the ViewModel then it simply gets passed through during initialization of the widget. The options listed above support two-way live binding and will automatically respond to changes in data.


Example:
In this example, the ViewModel is defined specifically for use with the grid. It has a data property that is bound in the View. If this value changes, then the widgets will automatically respond to them. The widgets also update the ViewModel values as they modify them.

Create a ViewModel:

<!-- Create ViewModel-->
   function Person(data) {           
       this.ID = ko.observable(data.ID);           
       this.Company = ko.observable(data.Company);           
       this.Name = ko.observable(data.Name);        
      };        
   var viewModel = {               
      data: ko.observableArray([                   
      new Person({ ID: "ANATR", Company: "Ana Trujillo Emparedados y helados", Name: "Ana Trujillo" }),                  
      new Person({ ID: "ANTON", Company: "Antonio Moreno Taqueria", Name: "Antonio Moreno" }),                   
      new Person({ ID: "AROUT", Company: "Around the Horn", Name: "Thomas Hardy" }),                   
      new Person({ ID: "BERGS", Company: "Berglunds snabbkop", Name: "Christina Berglund" })              
       ])
   };

Create View with Bound Controls:

<table id="dataGrid" data-bind="wijgrid: { data: data, allowEditing: true }">

wijlineargauge

Data-binding options:


NOTE: Any valid widget option can be set declaratively using Knockout. If an option is not bound to the ViewModel then it simply gets passed through during initialization of the widget. The options listed above support two-way live binding and will automatically respond to changes in data.


Example:
In this example, the ViewModel is defined specifically for use with the linear gauge. It has val, min, and max properties that are bound in the View. If any of these values change, then the widgets will automatically respond to them. The widgets also update the ViewModel values as they modify them.
This gauge starts at 0, goes up to 100, and has an initial value of 50.

Create a ViewModel:

var viewModel = function () { 		
  var self = this;
    self.val = ko.observable(50);
    self.min = ko.observable(0);
    self.max = ko.observable(100);
        };

Create View with Bound Controls:

<div data-bind="wijlineargauge: {value: val, min: min, max: max, ranges: [{startWidth: 0.2, endWidth: 0.2, startValue: 0, endValue: val, startDistance: 0.6, endDistance: 0.6, style: { fill: '#ccc', stroke: 'none'}}] }"> </div>

wijinputdate

Data-binding options:

  • disabled
  • val

NOTE: Any valid widget option can be set declaratively using Knockout. If an option is not bound to the ViewModel then it simply gets passed through during initialization of the widget. The options listed above support two-way live binding and will automatically respond to changes in data.


Example:
In this example, the ViewModel is defined specifically for use with the input date. It has val, and disabled properties that are bound in the View. If any of these values change, then the widgets will automatically respond to them. The widgets also update the ViewModel values as they modify them.

Create a ViewModel:

var viewModel = function () { 			
     var self = this; 
     self.val = ko.observable( new Date('1/1/2012')); 
     self.disabled = ko.observable(false);

Create View with Bound Controls:

<input data-bind="wijinputdate: { date: val, disabled: disabled }"  />

wijinputmask

Data-binding options:

  • disabled
  • val

NOTE: Any valid widget option can be set declaratively using Knockout. If an option is not bound to the ViewModel then it simply gets passed through during initialization of the widget. The options listed above support two-way live binding and will automatically respond to changes in data.


Example:
In this example, the ViewModel is defined specifically for use with the input mask. It has val and disabled properties that are bound in the View. If any of these values change, then the widgets will automatically respond to them. The widgets also update the ViewModel values as they modify them.

Create a ViewModel:

   var viewModel = function () { 		
       var self = this; 
       self.val = ko.observable('(412) 867-5309');
       self.disabled = ko.observable(false);

Create View with Bound Controls:

<input data-bind="wijinputmask: { text: val, disabled: disabled, mask: '(999) 000-0000' }"  />

wijinputnumber

Data-binding options:


NOTE: Any valid widget option can be set declaratively using Knockout. If an option is not bound to the ViewModel then it simply gets passed through during initialization of the widget. The options listed above support two-way live binding and will automatically respond to changes in data.


Example:
In this example, the ViewModel is defined specifically for use with the input number. It has val, min, max, and disabled properties that are bound in the View. If any of these values change, then the widgets will automatically respond to them. The widgets also update the ViewModel values as they modify them.

Create a ViewModel:

var viewModel = function () { 		
   var self = this;
   self.val = ko.observable(50);
   self.min = ko.observable(0);
   self.max = ko.observable(100);
   self.disabled = ko.observable(false);

Create View with Bound Controls:

<input data-bind="wijinputnumber: { value: val, minValue: min, maxValue: max, disabled: disabled }"  />

wijlinechart

Data-binding options:


NOTE: Any valid widget option can be set declaratively using Knockout. If an option is not bound to the ViewModel then it simply gets passed through during initialization of the widget. The options listed above support two-way live binding and will automatically respond to changes in data.


Example:
In this example, the ViewModel is defined specifically for use with the line chart. It has a seriesList property that is bound in the View. If this value changes, then the widgets will automatically respond to them. The widgets also update the ViewModel values as they modify them.

Create a ViewModel:

   var viewModel = { 		
     seriesList: ko.observableArray([createRandomSeriesList('legend' + index)]) 
   };

Create View with Bound Controls:

<div id="wijlinechart" data-bind="wijlinechart: { seriesList: seriesList }" style="width:600px;height:400px;"></div>

wijlist

Data-binding options:


NOTE: Any valid widget option can be set declaratively using Knockout. If an option is not bound to the ViewModel then it simply gets passed through during initialization of the widget. The options listed above support two-way live binding and will automatically respond to changes in data.


Example:
In this example, the ViewModel is defined specifically for use with the list. It has disabled, selectionMode, autoSize, maxItemsCount, addHoverItemClass, keepHighlightOnMouseLeave, and listItems properties that are bound in the View. If any of these values change, then the widgets will automatically respond to them. The widgets also update the ViewModel values as they modify them.

Create a ViewModel:

var viewModel = function () { 		
   var self = this;
     self.disabled = ko.observable(false);
     self.selectionMode = ko.observable('single');
     self.autoSize = ko.observable(true);
     self.maxItemsCount = ko.observable(5); 
     self.addHoverItemClass = ko.observable(true); 
     self.keepHightlightOnMouseLeave = ko.observable(false); 
     self.listItems = ko.observableArray(createList());

Create View with Bound Controls:

<div id="list" style="width:300px" data-bind="wijlist: { disabled: disabled, selectionMode: selectionMode, autoSize: autoSize, maxItemsCount: maxItemsCount, addHoverItemClass: addHoverItemClass, keepHightlightOnMouseLeave: keepHightlightOnMouseLeave, listItems: listItems }">



wijmenu

Data-binding options:


NOTE: Any valid widget option can be set declaratively using Knockout. If an option is not bound to the ViewModel then it simply gets passed through during initialization of the widget. The options listed above support two-way live binding and will automatically respond to changes in data.


Example:
In this example, the ViewModel is defined specifically for use with the menu. It has disabled, checkable, orientation, trigger, and triggerEvent properties that are bound in the View. If any of these values change, then the widgets will automatically respond to them. The widgets also update the ViewModel values as they modify them. In this menu, menu items appear vertically, and submenus slide out when the mouse hovers over the menu item.

Create a ViewModel:

  var viewModel = function () { 		
    var self = this;
       self.disabled = ko.observable(false);
       self.checkable = ko.observable(false);
       self.orientation = ko.observable('horizontal');
       self.trigger = ko.observable('.wijmo-wijmenu-item');
       self.triggerEvent = ko.observable('mouseenter');

Create View with Bound Controls:

<ul id="menu" data-bind="wijmenu: { disabled: disabled, checkable: checkable, orientation: orientation, trigger: trigger, triggerEvent: triggerEvent }">                   
 <li><a><span class="ui-icon ui-icon-arrowthick-1-w wijmo-wijmenu-icon-left"></span><span class="wijmo-wijmenu-text">                    Menu1</span></a></li>                
<li><a><span class="ui-icon ui-icon-arrowrefresh-1-s wijmo-wijmenu-icon-left"></span><span class="wijmo-wijmenu-text">                     Menu2</span></a>                    
 <ul>
      <li><a>submenu1</a></li>                        
      <li><a>submenu2</a>    
       <ul>
         <li><a>submenu21</a></li>                      
         <li><a>submenu22</a></li>                             
         <li><a>submenu23</a></li>                                  
         <li><a>submenu24</a></li>                    
         <li><a>submenu25</a></li>  
      </ul> 
</li>       
      <li><a>submenu3</a></li>
      <li><a>submenu4</a>                        
      <ul> 
         <li><a>submenu41</a></li>                                  
         <li><a>submenu42</a></li>                                
         <li><a>submenu43</a></li>                          
         <li><a>submenu44</a></li>                                
         <li><a>submenu45</a></li>                   
         <li><a>submenu46</a></li>                                
         <li><a>submenu47</a></li>
         <li><a>submenu48</a></li>
      </ul>                         
</li>
     <li><a>submenu5</a></li>                         
     <li><a>submenu6</a></li>         
     <li><a>submenu7</a></li>                        
     <li><a>submenu8</a></li>                   
</ul> 
</li> 
  <li><a><span class="ui-icon ui-icon-comment wijmo-wijmenu-icon-left"></span><span  class="wijmo-wijmenu-text">Menu3</span></a></li>
  <li><a><span class="ui-icon ui-icon-person wijmo-wijmenu-icon-left"></span><span class="wijmo-wijmenu-text">Menu4</span></a></li>                
  <li><a><span class="ui-icon ui-icon-trash wijmo-wijmenu-icon-left"></span><span class="wijmo-wijmenu-text">Menu5</span></a></li>                
  <li><a><span class="ui-icon ui-icon-bookmark wijmo-wijmenu-icon-left"></span><span class="wijmo-wijmenu-text">Menu6</span></a>                   
<ul>                          
        <li><a>submenu61</a></li>             
        <li><a>submenu62</a></li>                        
        <li><a>submenu63</a></li>
        <li><a>submenu64</a></li>   
        <li><a>submenu65</a></li>                         
        <li><a>submenu66</a></li>                        
        <li><a>submenu67</a></li>                          
        <li><a>submenu68</a></li>                        
        <li><a>submenu69</a></li>                   
 </ul>  
</li>              
  <li><a><span class="ui-icon ui-icon-clock wijmo-wijmenu-icon-left"></span><span class="wijmo-wijmenu-text">Menu7</span></a></li>                
 <li><a><span class="ui-icon ui-icon-minusthick wijmo-wijmenu-icon-left"></span><span class="wijmo-wijmenu-text">Menu8</span></a></li>           
</ul>

wijpiechart

Data-binding options:


NOTE: Any valid widget option can be set declaratively using Knockout. If an option is not bound to the ViewModel then it simply gets passed through during initialization of the widget. The options listed above support two-way live binding and will automatically respond to changes in data.


Example:
In this example, the ViewModel is defined specifically for use with the pie chart. It has a seriesList property that is bound in the View. If this value changes, then the widgets will automatically respond to them. The widgets also update the ViewModel values as they modify them.

Create a ViewModel:

var viewModel = function () { 		
   var self = this;
   self.males = ko.numericObservable(10); 
   self.females = ko.numericObservable(90);

Create View with Bound Controls:

<div class="piechart" data-bind="wijpiechart: { width: 600, height: 400, seriesList: [{ label: 'Male', data: males }, { label: 'Female', data: females }] }"></div>

wijprogressbar

Data-binding options:


NOTE: Any valid widget option can be set declaratively using Knockout. If an option is not bound to the ViewModel then it simply gets passed through during initialization of the widget. The options listed above support two-way live binding and will automatically respond to changes in data.


Example:
In this example, the ViewModel is defined specifically for use with the progress bar. It has percent, val, min, max, disabled, labelAlign, fillDirection, lfs, tfs, increment, img, delay, aniDisabled, easing, and duration properties that are bound in the View. If any of these values change, then the widgets will automatically respond to them. The widgets also update the ViewModel values as they modify them.

Create a ViewModel:

var viewModel = function () { 		
   var self = this; 		
     self.percent = ko.observable(0); 	
     self.val = ko.observable(0);
     self.min = ko.observable(0);
     self.max = ko.observable(100);
     self.disabled = ko.observable(false);
     self.labelAlign = ko.observable('center'); 
     self.fillDirection = ko.observable('east');
     self.lfs = ko.observable('{1}%');
     self.tfs = ko.observable('{1}%');
     self.increment = ko.observable(1);
     self.img = ko.observable('');
     self.delay = ko.observable(0);
     self.aniDisabled = ko.observable(false);
     self.easing = ko.observable(null);
     self.duration = ko.numericObservable(500);

Create View with Bound Controls:

<div data-bind="wijprogressbar: {value: val, minValue: min, maxValue: max, disabled: disabled, labelAlign: labelAlign, fillDirection: fillDirection, labelFormatString: lfs, toolTipFormatString: tfs, indicatorIncrement: increment, indicatorImage: img, animationDelay: delay, animationOptions: { 		disabled: aniDisabled, easing: easing, duration: duration}}">

wijradialgauge

Data-binding options:


NOTE:Any valid widget option can be set declaratively using Knockout. If an option is not bound to the ViewModel then it simply gets passed through during initialization of the widget. The options listed above support two-way live binding and will automatically respond to changes in data.


Example:
In this example, the ViewModel is defined specifically for use with the radial gauge. It has val, min, and max, properties that are bound in the View. If any of these values change, then the widgets will automatically respond to them. The widgets also update the ViewModel values as they modify them. This gauge starts at 0, goes up to 100, and has an initial value of 50.

Create a ViewModel:

var viewModel = function () { 		
  var self = this; 	
     self.val = ko.observable(50);
     self.min = ko.observable(0); 		
     self.max = ko.observable(100);

Create View with Bound Controls:

<div data-bind="wijradialgauge: {value: val, min: min, max: max, ranges: [{startWidth: 8, endWidth: 8, startValue: 0, endValue: val, startDistance: 0.5, endDistance: 0.5, style: { fill: '#ccc', stroke: 'none'}}] }">

wijradio

Data-binding options:

  • checked
  • disabled

NOTE: Any valid widget option can be set declaratively using Knockout. If an option is not bound to the ViewModel then it simply gets passed through during initialization of the widget. The options listed above support two-way live binding and will automatically respond to changes in data.


Example:
In this example, the ViewModel is defined specifically for use with the radio. If the value of a radio data-binding option changes, then the widgets will automatically respond. The widgets also update the ViewModel values as they modify them.

Create a ViewModel:

var viewModel = function () { 	       
 this.check = ko.observable(true);

Create View with Bound Controls:

<h3 id="H1">Radio</h3> 
<label for="radio1">radio1</label>
<input type="radio" name="radiobutton1" id="radio1" data-bind="wijradio: {checked: check}" /> 
<label for="radio2">radio2</label>
<input type="radio" name="radiobutton1" id="radio2" data-bind="wijradio: {}" />
<label for="radio3">radio3</label><input type="radio" name="radiobutton1" id="radio3" data-bind="wijradio: {}" />
<label for="radio4">radio4</label>
<input type="radio" name="radiobutton1" id="radio4" data-bind="wijradio: {}" />

wijrating

Data-binding options:


NOTE: Any valid widget option can be set declaratively using Knockout. If an option is not bound to the ViewModel then it simply gets passed through during initialization of the widget. The options listed above support two-way live binding and will automatically respond to changes in data.


Example:
In this example, the ViewModel is defined specifically for use with the rating. It has val, min, count, max, disabled, split, and totalValue properties that are bound in the View. If any of these values change, then the widgets will automatically respond to them. The widgets also update the ViewModel values as they modify them.

Create a ViewModel:

var viewModel = function () { 		
   var self = this; 		
       self.val = ko.observable(3); 	
       self.min = ko.observable(null);
       self.max = ko.observable(null);
       self.disabled = ko.observable(false);
       self.count = ko.observable(5);
       self.totalValue = ko.observable(5);
       self.split = ko.observable(1);

Create View with Bound Controls:

<div data-bind="wijrating: { value: val, min: min, max: max, disabled: disabled, count: count, totalValue: totalValue, split: split }"> </div>

wijribbon

Data-binding options:

  • disabled

NOTE: Any valid widget option can be set declaratively using Knockout. If an option is not bound to the ViewModel then it simply gets passed through during initialization of the widget. The options listed above support two-way live binding and will automatically respond to changes in data.

Example:
In this example, the ViewModel is defined specifically for use with the ribbon. It has the disabled property that is bound in the View. If this value changes, then the widgets will automatically respond. The widgets also update the ViewModel values as they modify them.

Create a ViewModel:

var viewModel = function () {             var self = this;             self.disabled = ko.observable(false);

Create View with Bound Controls:


<div id="ribbon" data-bind="wijribbon: { disabled: disabled }"> 
  <ul>
      <li><a href="#C1Editor1Format">Format</a></li>
      <li><a href="#C1Editor1insert">Customize Tab</a></li>                   
   </ul>
   <div id="C1Editor1Format">
   <ul>
      <li id="actiongroup"><button title="Save" class="wijmo-wijribbon-bigbutton" name="save">
      <div class="wijmo-wijribbon-save"></div>                                 
      <span>Save</span></button><span class="wijmo-wijribbon-list"><button title="Undo" class="wijmo-wijribbon-undo" name="undo"></button>
      <button title="Redo" class="wijmo-wijribbon-redo" name="redo"></button>
      </span><span class="wijmo-wijribbon-list"> 
     <button title="Preview" class="wijmo-wijribbon-preview" name="preview">
     </button>  
     <button title="Clean up" class="wijmo-wijribbon-cleanup" name="cleanup">    
     </button>
     </span><span class="wijmo-wijribbon-list"><button title="Cut" class="wijmo-wijribbon-cut" name="cut"></button>
     <button title="Copy" class="wijmo-wijribbon-copy" name="copy">
     </button> 
     <button title="Paste" class="wijmo-wijribbon-paste" name="paste">
     </button>
     <button title="Select All" class="wijmo-wijribbon-selectall" name="selectall">
     </button>
     </span>
  <div>Actions</div>  
</li>
    <li id="fontgroup"><div title="Font Name" class="wijmo-wijribbon-dropdownbutton">    
       <button title="Font Name" name="fontname">Font Name</button>
    <ul>
        <li><input type="radio" id="C1Editor1_ctl74" name="fontname"></input>
          <label for="C1Editor1_ctl74" name="fn1" title="Arial">Arial</label></li>
        <li><input type="radio" id="C1Editor1_ctl76" name="fontname"></input>
          <label for="C1Editor1_ctl76" name="fn2" title="Courier New">Courier New</label></li> 
        <li><input type="radio" id="C1Editor1_ctl78" name="fontname"></input><label for="C1Editor1_ctl78" name="fn3" title="Garamond">Garamond</label></li>
        <li><input type="radio" id="C1Editor1_ctl80" name="fontname"></input><label for="C1Editor1_ctl80" name="fn4" title="Tahoma">Tahoma</label></li>
        <li><input type="radio" id="C1Editor1_ctl82" name="fontname"></input>
        <label for="C1Editor1_ctl82" name="fn5" title="Times New Roman">Times New Roman</label></li>
        <li><input type="radio" id="C1Editor1_ctl84" name="fontname"></input>
           <label for="C1Editor1_ctl84" name="fn6" title="Verdana">Verdana</label></li>
        <li><input type="radio" id="C1Editor1_ctl86" name="fontname"></input>
          <label for="C1Editor1_ctl86" name="fn7" title="Wingdings">Wingdings</label></li>
        </ul></div>
      <div title="Font Size" class="wijmo-wijribbon-dropdownbutton">  
        <button title="Font Size" name="fontsize">Font Size</button><ul>    
        <li><input type="radio" id="C1Editor1_ctl104" name="fontsize"></input>
        <label for="C1Editor1_ctl104" name="xx-small" title="VerySmall">VerySmall</label></li>
       <li><input type="radio" id="C1Editor1_ctl106" name="fontsize"></input><label for="C1Editor1_ctl106" name="x-small" title="Smaller">Smaller</label></li>
       <li><input type="radio" id="C1Editor1_ctl108" name="fontsize"></input>
         <label for="C1Editor1_ctl108" name="small" title="Small">Small</label></li>
       <li><input type="radio" id="C1Editor1_ctl110" name="fontsize"></input>
       <label for="C1Editor1_ctl110" name="medium" title="Medium">Medium</label></li>
       <li><input type="radio" id="C1Editor1_ctl112" name="fontsize"></input><label for="C1Editor1_ctl112" name="large" title="Large">Large</label></li> 
       <li><input type="radio" id="C1Editor1_ctl114" name="fontsize"></input>
       <label for="C1Editor1_ctl114" name="x-large" title="Larger">Larger</label></li>
       <li><input type="radio" id="C1Editor1_ctl116" name="fontsize"></input>
       <label for="C1Editor1_ctl116" name="xx-large" title="VeryLarge">VeryLarge</label></li>
       <li><input type="radio" id="C1Editor1_ctl117" name="fontsize"></input><label for="C1Editor1_ctl117" name="40pt" title="40pt">40pt</label></li>
     </ul>                             
    </div>
   <span class="wijmo-wijribbon-list"><button title="Background Color" class="wijmo-wijribbon-bgcolor" name="backcolor">                                        
    </button> 
    <button title="Font Color" class="wijmo-wijribbon-color" name="fontcolor">
    </button>
    </span><span class="wijmo-wijribbon-list">  
    <input type="checkbox" id="C1Editor1_ctl133"></input>
    <label for="C1Editor1_ctl133" name="bold" title="Bold" class="wijmo-wijribbon-bold"></label>
    <input type="checkbox" id="C1Editor1_ctl134"></input>
    <label for="C1Editor1_ctl134" name="italic" title="Italic" class="wijmo-wijribbon-italic"></label><input type="checkbox" id="C1Editor1_ctl135"></input>
    <label for="C1Editor1_ctl135" name="underline" title="Underline" class="wijmo-wijribbon-underline"></label>
    <input type="checkbox" id="C1Editor1_ctl136"></input><label for="C1Editor1_ctl136" name="strike" title="Strikethrough" class="wijmo-wijribbon-strike"></label>
    <input type="checkbox" id="C1Editor1_ctl137"></input>
    <label for="C1Editor1_ctl137" name="subscript" title="Subscript" class="wijmo-wijribbon-sub"></label><input type="checkbox" id="C1Editor1_ctl138"></input>
    <label for="C1Editor1_ctl138" name="superscript" title="Superscript" class="wijmo-wijribbon-sup"></label></span>
    <span class="wijmo-wijribbon-list">           
    <button title="Template" class="wijmo-wijribbon-template" name="template"></button>
    </span>
   <span class="wijmo-wijribbon-list"><button title="RemoveFormat" class="wijmo-wijribbon-removeformat" name="removeformat"> </button>         </span>                            
   <div>Font</div></li> 
</ul> 
</div>
<div id="C1Editor1insert">
   <ul><li><div title="Table" class="wijmo-wijribbon-splitbutton">
     <button title="customize button" name="customcommand">Click Me</button>
     </div>
     <div>customize group</div>   
</li></ul>
</div></div>

wijscatterchart

Data-binding options:


NOTE: Any valid widget option can be set declaratively using Knockout. If an option is not bound to the ViewModel then it simply gets passed through during initialization of the widget. The options listed above support two-way live binding and will automatically respond to changes in data.


Example:
In this example, the ViewModel is defined specifically for use with the scatter chart. It has a seriesList property that is bound in the View. If this value changes, then the widgets will automatically respond to them. The widgets also update the ViewModel values as they modify them.

Create a ViewModel:

  var viewModel = { 	
    seriesList: ko.observableArray([createRandomSeriesList('legend' + index)])
    };

Create View with Bound Controls:

<div id="wijscatterchart" data-bind="wijscatterchart: { seriesList: seriesList }" style="width:600px;height:400px;"></div>

wijslider

Data-binding options:

NOTE: Any valid widget option can be set declaratively using Knockout. If an option is not bound to the ViewModel then it simply gets passed through during initialization of the widget. The options listed above support two-way live binding and will automatically respond to changes in data.

Example:
In this example, the ViewModel is defined specifically for use with the slider. It has disabled, val, min, max, animate, range, step, dragFill, minRange, and vals properties that are bound in the View. If any of these values change, then the widgets will automatically respond to them. The widgets also update the ViewModel values as they modify them.

Create a ViewModel:

var viewModel = function () { 			
   var self = this; 
   self.val = ko.observable(50); 
   self.min = ko.observable(0);
   self.max = ko.observable(100); 
   self.disabled = ko.observable(false); 
   self.animate = ko.observable(false); 	
   self.range = ko.observable(false); 	
   self.step = ko.observable(1); 		
   self.dragFill = ko.observable(true); 	
   self.minRange = ko.observable(0); 	
   self.vals = ko.observableArray([10, 50]);

Create View with Bound Controls:

<div data-bind="wijslider: {value: val, min: min, max: max, disabled: disabled, animate: animate, range: range, step: step, dragFill: dragFill, minRange: minRange}"> </div>

wijsplitter

Data-binding options:

NOTE: Any valid widget option can be set declaratively using Knockout. If an option is not bound to the ViewModel then it simply gets passed through during initialization of the widget. The options listed above support two-way live binding and will automatically respond to changes in data.

Example:
In this example, the ViewModel is defined specifically for use with the splitter. It has disabled, showExpander, and splitterDistance properties that are bound in the View. If any of these values change, then the widgets will automatically respond to them. The widgets also update the ViewModel values as they modify them.

Create a ViewModel:

var viewModel = function () { 		
   var self = this;
   self.disabled = ko.observable(false); 	
   self.showExpander = ko.observable(true); 	
   self.splitterDistance = ko.observable(100);

Create View with Bound Controls:

<div class="splitterContainer"><div class="layout"> 	
     <h3>Vertical</h3> 
        <div id="vsplitter" data-bind="wijsplitter: {disabled: disabled, showExpander: showExpander, splitterDistance: splitterDistance }"> 	
            <div>panel1</div>
            <div>panel2</div>
        </div>
        </div>
<div class="layout" style="width: 100px;"> </div> 
<div class="layout">
    <h3>Horizontal</h3> 
       <div id="hsplitter" data-bind="wijsplitter: {orientation: 'horizontal', disabled: disabled, showExpander: showExpander, splitterDistance: splitterDistance }">  
        <div>panel1</div>
        <div>panel2</div>
      </div></div></div>

wijsuperpanel

Data-binding options:


NOTE: Any valid widget option can be set declaratively using Knockout. If an option is not bound to the ViewModel then it simply gets passed through during initialization of the widget. The options listed above support two-way live binding and will automatically respond to changes in data.


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, then the widgets will automatically respond to them. The widgets also update the ViewModel values as they modify them.

Create a ViewModel:

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:

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

wijtabs

Data-binding options:


NOTE: Any valid widget option can be set declaratively using Knockout. If an option is not bound to the ViewModel then it simply gets passed through during initialization of the widget. The options listed above support two-way live binding and will automatically respond to changes in data.


Example:
In this example, the ViewModel is defined specifically for use with the tabs. It has disabled and collapsible properties that are bound in the View. If any of these values change, then the widgets will automatically respond to them. The widgets also update the ViewModel values as they modify them. The tabs in this example can be collapsed by the user.

Create a ViewModel:

var viewModel = function () { 	        
     var self = this; 	        
     self.disabled = ko.observable(false); 	        
     self.collapsible = ko.observable(false);

Create View with Bound Controls:

<div data-bind="wijtabs: { disabled: disabled, collapsible: collapsible }"> 	         
     <ul>
          <li><a href="#tabs-1">Nunc tincidunt</a></li> 
          <li><a href="#tabs-2">Proin dolor</a></li> 	
          <li><a href="#tabs-3">Aenean lacinia</a></li> 
     </ul> 
        <div id="tabs-1"><p>Tab1</p></div>
        <div id="tabs-2"><p>Tab2 </p></div>
        <div id="tabs-3"><p>Tab3</p>
	        <p>Tab4</p>
        </div>
      </div>

wijtooltip

Data-binding options:


NOTE: Any valid widget option can be set declaratively using Knockout. If an option is not bound to the ViewModel then it simply gets passed through during initialization of the widget. The options listed above support two-way live binding and will automatically respond to changes in data.


Example:
In this example, the ViewModel is defined specifically for use with the tooltip. It has disabled, closeBehavior, triggers, mouseTrailing, showCallout, calloutFilled, modal, showDelay, and hideDelay properties that are bound in the View. If any of these values change, then the widgets will automatically respond to them. The widgets also update the ViewModel values as they modify them.

Create a ViewModel:

var viewModel = function () { 	
     var self = this;
     self.disabled = ko.observable(false); 		
     self.closeBehavior = ko.observable('auto'); 		
     self.triggers = ko.observable('hover'); 		
     self.mouseTrailing = ko.observable(true); 		
     self.showCallout = ko.observable(true); 		
     self.calloutFilled = ko.observable(true); 		
     self.modal = ko.observable(false); 		
     self.showDelay = ko.observable(150); 		
     self.hideDelay = ko.observable(150);

Create View with Bound Controls:

<div style="width: 100px;height: 50px; background-color: red;" title="tooltip" data-bind="wijtooltip: {disabled: disabled, closeBehavior: closeBehavior, mouseTrailing: mouseTrailing, triggers: triggers, showCallout: showCallout, showDelay: showDelay, hideDelay: hideDelay, calloutFilled: calloutFilled, modal: modal}"> show tooltip </div>

wijtree

Data-binding options:


NOTE: Any valid widget option can be set declaratively using Knockout. If an option is not bound to the ViewModel then it simply gets passed through during initialization of the widget. The options listed above support two-way live binding and will automatically respond to changes in data.


Example:
In this example, the ViewModel is defined specifically for use with the tree. It has disabled, allowTriState, autoCheckNodes, autoCollapse, showCheckBoxes, showExpandCollapse and nodes properties that are bound in the View. If any of these values change, then the widgets will automatically respond to them. The widgets also update the ViewModel values as they modify them. The tree shows checkboxes for each item and the expanded node collaspes if another node is expanded.

Create a ViewModel:

var viewModel = {
  disabled: ko.observable(false), allowTriState: ko.observable(true), autoCheckNodes: ko.observable(true), autoCollapse: ko.observable(true), showCheckBoxes: ko.observable(true), showExpandCollapse: ko.observable(true), nodes: ko.observableArray([{ 	
      text: 'Folder 1', 	
      expanded: true, 
      selected: true, 	
      checked: true, 	
      nodes: [{ 	
          text: 'Folder 1.1', 
      nodes: [{ 	
         text: 'File 1.1.1'  },{    text: 'File 1.1.2' },{    text: 'File 1.1.3' },{    text: 'File 1.1.4' },{    text: 'File 1.1.5' }] },{    text: 'File 1.2' },{    text: 'File 1.3' },{    text: 'File 1.4' },{    text: 'File 1.5' }] },{    text: 'Folder 2', nodes: [{    text: 'File 2.1' },{    text: 'File 2.2' },{  text: 'File 2.3' },{    text: 'File 2.4' },{    text: 'File 2.5' }] },{    text: 'Folder 3', 
      nodes: [{
        text: 'File 3.1' },{    text: 'File 3.2' },{    text: 'File 3.3' },{    text: 'File 3.4' },{    text: 'File 3.5' }] }, {    text: 'File 4' }, {    text: 'File 5' }]) 
};

Create View with Bound Controls:

<ul data-bind="wijtree: {disabled: disabled, allowTriState: allowTriState, nodes: nodes, autoCheckNodes: autoCheckNodes, autoCollapse: autoCollapse, showCheckBoxes: showCheckBoxes, showExpandCollapse: showExpandCollapse }"></ul>

wijvideo

Data-binding options:


NOTE: Any valid widget option can be set declaratively using Knockout. If an option is not bound to the ViewModel then it simply gets passed through during initialization of the widget. The options listed above support two-way live binding and will automatically respond to changes in data.


Example:
In this example, the ViewModel is defined specifically for use with the video player. It has disabled, fullScreenButtonVisible and showControlsOnHover properties that are bound in the View. If any of these values change, then the widgets will automatically respond to them. The widgets also update the ViewModel values as they modify them. The video player in this example shows the full screen button and displays player controls when a user hovers over the video.

Create a ViewModel:

var viewModel = function () { 		
   var self = this; 		
   self.disabled = ko.observable(false); 		
   self.fullScreenButtonVisible = ko.observable(true); 
   self.showControlsOnHover = ko.observable(true);

Create View with Bound Controls:

<video controls="controls" id="vid1" width="720" height="486" data-bind="wijvideo: { disabled: disabled, fullScreenButtonVisible: fullScreenButtonVisible, showControlsOnHover: showControlsOnHover }"> 	<source src="http://cdn.wijmo.com/movies/wijmo.theora.ogv" type='video/ogg; codecs="theora, vorbis"'> 				<source src="http://cdn.wijmo.com/movies/wijmo.mp4video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> 	
</video>