jqwidgets-framework

<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="../../../../styles/jqx.apireference.css" type="text/css" /> <script type="text/javascript" src="../../../../scripts/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="../../../../scripts/documentation.js"></script> <meta name="keywords" content="jQuery, Button, Toggle Button, Repeat Button, Link Button, Help Documentation" /> <meta name="description" content="This page represents the help documentation of the jqxButton, jqxToggleButton, jqxRepeatButton and jqxLinkButton widgets." /> <title>jqxButton, jqxToggleButton, jqxRepeatButton and jqxLinkButton API Reference</title> <script type="text/javascript"> $(document).ready(function () { $(".documentation-option-type-click").click(function (event) { $(event.target).parents('tr').next().find(".property-content").toggle(); }); }); </script> </head> <body> <div id="properties"> <h2 class="documentation-top-header">jqxKnockout</h2> In this help topic are listed the properties defined in the jqxKnockout plug-in. These properties support two way data binding. <table class="documentation-table"> <tr> <th><span style="font-size: 16px;">jqxGrid</span></th> </tr> <tr> <th>Property Name </th> <th>Type </th> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span2'>disabled</span> </td> <td> <span>observable</span> </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> Determines whether the Grid is enabled or disabled. <br /> <br /> Code Example:<br /> <br /> <pre style='margin: 10px;' class='code'><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><!DOCTYPE html></span><div/><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><html lang=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"en"</span>></span><div/><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><head></span><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><link rel=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"stylesheet" href="../../../../jqwidgets/styles/jqx.base.css" type="text/css"</span> /></span><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../../../scripts/jquery-1.11.1.min.js"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></script></span><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../../../scripts/json2.js"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></script></span> <div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../../../scripts/knockout-3.0.0.js"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></script></span><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../../../jqwidgets/jqxcore.js"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></script></span><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../../../jqwidgets/jqxdata.js"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></script></span><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../../../jqwidgets/jqxbuttons.js"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></script></span><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../../../jqwidgets/jqxscrollbar.js"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></script></span><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../../../jqwidgets/jqxmenu.js"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></script></span><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../../../jqwidgets/jqxgrid.js"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></script></span><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../../../jqwidgets/jqxgrid.selection.js"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></script></span><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../../../jqwidgets/jqxgrid.edit.js"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></script></span><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../../../jqwidgets/jqxknockout.js"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></script></span><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../../../jqwidgets/jqxcheckbox.js"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></script></span><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript"</span>></span><div/> $(document).ready(function () {<div/> var initialData = [<div/> { name: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Well-Travelled Kitten"</span>, sales: 352, price: 75.95 },<div/> { name: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Speedy Coyote"</span>, sales: 89, price: 190.00 },<div/> { name: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Furious Lizard"</span>, sales: 152, price: 25.00 },<div/> { name: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Indifferent Monkey"</span>, sales: 1, price: 99.95 },<div/> { name: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Brooding Dragon"</span>, sales: 0, price: 6350 },<div/> { name: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Ingenious Tadpole"</span>, sales: 39450, price: 0.35 },<div/> { name: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Optimistic Snail"</span>, sales: 420, price: 1.50 }<div/> ];<div/><div/> var GridModel = function (items) {<div/> this.items = ko.observableArray(items);<div/> this.disabled = ko.observable(false);<div/> };<div/><div/> ko.applyBindings(new GridModel(initialData));<div/> });<div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></script></span><div/><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></head></span><div/><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><body class=<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'default'</span>></span><div/> <div data-bind="jqxGrid: {source: items, disabled: disabled, autoheight: true,<div/> columns: [<div/> { text: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'Name', dataField: 'name'</span>, width: 200 },<div/> { text: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'Sales', dataField: 'sales', width: 200, cellsalign: 'right'</span> },<div/> { text: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'Price', dataField: 'price', width: 200, cellsformat: 'c2', cellsalign: 'right'</span> }<div/> ]}"><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></div></span><div/><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></body></span><div/><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></html></span><div/><div/></pre> <br /> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span1'>source</span> </td> <td> <span>observableArray</span> </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> Sets the jqxGrid's data source. <br /> <br /> Code Example: <br /> <br /> <pre style='margin: 10px;' class='code'><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><!DOCTYPE html></span><div/><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><html lang=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"en"</span>></span><div/><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><head></span><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><link rel=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"stylesheet" href="../../../../jqwidgets/styles/jqx.base.css" type="text/css"</span> /></span><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../../../scripts/jquery-1.11.1.min.js"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></script></span><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../../../scripts/json2.js"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></script></span> <div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../../../scripts/knockout-3.0.0.js"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></script></span><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../../../jqwidgets/jqxcore.js"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></script></span><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../../../jqwidgets/jqxdata.js"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></script></span><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../../../jqwidgets/jqxbuttons.js"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></script></span><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../../../jqwidgets/jqxscrollbar.js"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></script></span><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../../../jqwidgets/jqxmenu.js"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></script></span><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../../../jqwidgets/jqxgrid.js"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></script></span><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../../../jqwidgets/jqxgrid.selection.js"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></script></span><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../../../jqwidgets/jqxgrid.edit.js"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></script></span><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../../../jqwidgets/jqxknockout.js"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></script></span><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../../../jqwidgets/jqxcheckbox.js"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></script></span><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../../../scripts/gettheme.js"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></script></span><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript"</span>></span><div/> $(document).ready(function () {<div/> var initialData = [<div/> { name: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Well-Travelled Kitten"</span>, sales: 352, price: 75.95 },<div/> { name: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Speedy Coyote"</span>, sales: 89, price: 190.00 },<div/> { name: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Furious Lizard"</span>, sales: 152, price: 25.00 },<div/> { name: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Indifferent Monkey"</span>, sales: 1, price: 99.95 },<div/> { name: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Brooding Dragon"</span>, sales: 0, price: 6350 },<div/> { name: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Ingenious Tadpole"</span>, sales: 39450, price: 0.35 },<div/> { name: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Optimistic Snail"</span>, sales: 420, price: 1.50 }<div/> ];<div/><div/> var GridModel = function (items) {<div/> this.items = ko.observableArray(items); <div/> };<div/><div/> ko.applyBindings(new GridModel(initialData));<div/> });<div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></script></span><div/><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></head></span><div/><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><body class=<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'default'</span>></span><div/> <div data-bind="jqxGrid: {source: items, autoheight: true,<div/> columns: [<div/> { text: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'Name', dataField: 'name'</span>, width: 200 },<div/> { text: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'Sales', dataField: 'sales', width: 200, cellsalign: 'right'</span> },<div/> { text: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'Price', dataField: 'price', width: 200, cellsformat: 'c2', cellsalign: 'right'</span> }<div/> ]}"><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></div></span> <div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></div></span><div/><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></body></span><div/><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></html></span><div/><div/></pre> </div> </td> </tr> </table> <table class="documentation-table"> <tr> <th><span style="font-size: 16px;">jqxChart</span></th> </tr> <tr> <th>Property Name </th> <th>Type </th> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span3'>source</span> </td> <td> <span>observableArray</span> </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> Sets the jqxChart's data source. <br /> <br /> Code Example: <br /> <pre style='margin: 10px;' class='code'><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><!DOCTYPE html></span><div/><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><html lang=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"en"</span>></span><div/><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><head></span><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><link rel=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"stylesheet" href="../../../../jqwidgets/styles/jqx.base.css" type="text/css"</span> /></span><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../../../scripts/jquery-1.11.1.min.js"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></script></span><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../../../scripts/json2.js"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></script></span><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../../../scripts/knockout-3.0.0.js"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></script></span><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../../../jqwidgets/jqxcore.js"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></script></span><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../../../jqwidgets/jqxdata.js"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></script></span><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../../../jqwidgets/jqxchart.js"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></script></span><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../../../jqwidgets/jqxknockout.js"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></script></span><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript"</span>></span><div/> $(document).ready(function () {<div/> var sampleData = [<div/> { Day: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'Monday'</span>, Keith: 30, Erica: 15, George: 25 },<div/> { Day: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'Tuesday'</span>, Keith: 25, Erica: 25, George: 30 },<div/> { Day: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'Wednesday'</span>, Keith: 30, Erica: 20, George: 25 },<div/> { Day: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'Thursday'</span>, Keith: 35, Erica: 25, George: 45 },<div/> { Day: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'Friday'</span>, Keith: 20, Erica: 20, George: 25 },<div/> { Day: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'Saturday'</span>, Keith: 30, Erica: 20, George: 30 },<div/> { Day: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'Sunday'</span>, Keith: 60, Erica: 45, George: 90 }<div/> ];<div/><div/> var ChartModel = function (items) {<div/> this.items = ko.observableArray(items);<div/> };<div/><div/> ko.applyBindings(new ChartModel(sampleData));<div/> });<div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></script></span><div/><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></head></span><div/><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><body></span><div/> <div id=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"chart" style="width: 670px; height: 400px;"</span> data-bind='jqxChart: {<div/> title: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Fitness & exercise weekly scorecard"</span>,<div/> description: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Time spent in vigorous exercise"</span>,<div/> showLegend: true,<div/> padding: { left: 5, top: 5, right: 5, bottom: 5 },<div/> titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },<div/> source: items,<div/> categoryAxis:<div/> {<div/> dataField: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Day"</span>,<div/> valuesOnTicks: false,<div/> showGridLines: true<div/> },<div/> colorScheme: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"scheme01"</span>,<div/> enableAnimations: true,<div/> seriesGroups:<div/> [<div/> {<div/> type: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"column"</span>,<div/> columnsGapPercent: 50,<div/> seriesGapPercent: 0,<div/> valueAxis:<div/> {<div/> unitInterval: 10,<div/> minValue: 0,<div/> maxValue: 100,<div/> displayValueAxis: true,<div/> description: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Time in minutes"</span>,<div/> axisSize: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"auto"</span>,<div/> tickMarksColor: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"#888888"</span><div/> },<div/> series: [<div/> { dataField: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Keith", displayText: "Keith"</span>},<div/> { dataField: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Erica", displayText: "Erica"</span>},<div/> { dataField: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"George", displayText: "George"</span>}<div/> ]<div/> }<div/> ]<div/> }'><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></div></span><div/><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></body></span><div/><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></html></span><div/><div/></pre> </div> </td> </tr> </table> <table class="documentation-table"> <tr> <th><span style="font-size: 16px;">jqxCalendar</span></th> </tr> <tr> <th>Property Name </th> <th>Type </th> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span4'>value</span> </td> <td> <span>observable</span> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span5'>disabled</span> </td> <td> <span>observable</span> </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> Determines whether the jqxCalendar is enabled or disabled. <br /> <br /> Code Example: <br /> <br /> <pre style='margin: 10px;' class='code'><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><!DOCTYPE html></span><div/><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><html lang=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"en"</span>></span><div/><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><head></span><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><link rel=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"stylesheet" href="../../../../jqwidgets/styles/jqx.base.css" type="text/css"</span> /></span><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../../../scripts/jquery-1.11.1.min.js"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></script></span><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../../../scripts/json2.js"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></script></span><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../../../scripts/knockout-3.0.0.js"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></script></span><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../../../jqwidgets/jqxcore.js"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></script></span><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../../../jqwidgets/jqxbuttons.js"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></script></span><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../../../jqwidgets/jqxdatetimeinput.js"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></script></span><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../../../jqwidgets/jqxcalendar.js"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></script></span><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../../../jqwidgets/globalization/jquery.global.js"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></script></span><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../../../jqwidgets/jqxknockout.js"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></script></span><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript"</span>></span><div/> $(document).ready(function () { <div/> var viewModel = function (date) {<div/> this.date = ko.observable(date);<div/> this.disabled = ko.observable(false);<div/> };<div/><div/> var date = new Date();<div/> date.setFullYear(2012, 10, 10);<div/> ko.applyBindings(new viewModel(date));<div/> });<div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></script></span><div/><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></head></span><div/><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><body class=<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'default'</span>></span><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><div data-bind=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"jqxCalendar: {value: date, disabled: disabled, width: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'250px', height: '250px'</span>}"</span>></span><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></div></span><div/><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></body></span><div/><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></html></span><div/><div/></pre> </div> </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> Sets the jqxCalendar's value. <br /> <br /> Code Example: <br /> <br /> <pre style='margin: 10px;' class='code'><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><!DOCTYPE html></span><div/><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><html lang=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"en"</span>></span><div/><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><head></span><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><link rel=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"stylesheet" href="../../../../jqwidgets/styles/jqx.base.css" type="text/css"</span> /></span><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../../../scripts/jquery-1.11.1.min.js"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></script></span><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../../../scripts/json2.js"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></script></span><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../../../scripts/knockout-3.0.0.js"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></script></span><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../../../jqwidgets/jqxcore.js"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></script></span><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../../../jqwidgets/jqxbuttons.js"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></script></span><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../../../jqwidgets/jqxdatetimeinput.js"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></script></span><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../../../jqwidgets/jqxcalendar.js"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></script></span><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../../../jqwidgets/globalization/jquery.global.js"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></script></span><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../../../jqwidgets/jqxknockout.js"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></script></span><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript"</span>></span><div/> $(document).ready(function () { <div/> var viewModel = function (date) {<div/> this.date = ko.observable(date);<div/> };<div/><div/> var date = new Date();<div/> date.setFullYear(2012, 10, 10);<div/> ko.applyBindings(new viewModel(date));<div/> });<div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></script></span><div/><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></head></span><div/><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><body></span><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><div data-bind=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"jqxCalendar: {value: date, width: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'250px', height: '250px'</span>}"</span>></span><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></div></span><div/><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></body></span><div/><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></html></span><div/><div/></pre> </div> </td> </tr> </table> <table class="documentation-table"> <tr> <th><span style="font-size: 16px;">jqxCheckBox</span></th> </tr> <tr> <th>Property Name </th> <th>Type </th> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span6'>checked</span> </td> <td> <span>observable</span> </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> Determines the jqxCheckBox's state. <br /> <br /> Code Example: <br /> <br /> <pre style='margin: 10px;' class='code'><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><!DOCTYPE html></span><div/><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><html lang=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"en"</span>></span><div/><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><head></span><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><link rel=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"stylesheet" href="../../../../jqwidgets/styles/jqx.base.css" type="text/css"</span> /></span><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../../../scripts/jquery-1.11.1.min.js"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></script></span><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../../../scripts/json2.js"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></script></span><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../../../scripts/knockout-3.0.0.js"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></script></span><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../../../jqwidgets/jqxcore.js"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></script></span><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../../../jqwidgets/jqxknockout.js"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></script></span><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../../../jqwidgets/jqxcheckbox.js"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></script></span><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript"</span>></span><div/> $(document).ready(function () { <div/> var viewModel = function (value) {<div/> this.checked = ko.observable(value);<div/> };<div/><div/> ko.applyBindings(new viewModel(true));<div/> });<div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></script></span><div/><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></head></span><div/><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><body class=<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'default'</span>></span><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><div data-bind=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"jqxCheckBox: {checked: checked, width: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'120px'</span>}"</span>></span>jqxCheckBox<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></div></span><div/><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></body></span><div/><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></html></span><div/><div/></pre> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span7'>disabled</span> </td> <td> <span>observable</span> </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> Determines whether the jqxCheckBox is enabled or disabled. <br /> <br /> Code Example: <br /> <br /> <pre style='margin: 10px;' class='code'><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><!DOCTYPE html></span><div/><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><html lang=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"en"</span>></span><div/><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><head></span><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><link rel=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"stylesheet" href="../../../../jqwidgets/styles/jqx.base.css" type="text/css"</span> /></span><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../../../scripts/jquery-1.11.1.min.js"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></script></span><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../../../scripts/json2.js"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></script></span><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../../../scripts/knockout-3.0.0.js"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></script></span><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../../../jqwidgets/jqxcore.js"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></script></span><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../../../jqwidgets/jqxknockout.js"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></script></span><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../../../jqwidgets/jqxcheckbox.js"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></script></span><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript"</span>></span><div/> $(document).ready(function () { <div/> var viewModel = function (value) {<div/> this.disabled= ko.observable(value);<div/> };<div/><div/> ko.applyBindings(new viewModel(true));<div/> });<div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></script></span><div/><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></head></span><div/><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><body class=<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'default'</span>></span><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><div data-bind=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"jqxCheckBox: {disabled: disabled, width: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'120px'</span>}"</span>></span>jqxCheckBox<span style="clear: both; padding: 0p