jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
1,156 lines • 257 kB
HTML
<!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: 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;">jqxComboBox</span></th>
</tr>
<tr>
<th>Property Name
</th>
<th>Type
</th>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span9'>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 jqxComboBox is enabled or disabled.
<br />
<br />
Code Example:
<br />
<br />
<pre style='width: 700px; max-width: 700px; 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/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/jqxlistbox.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/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/jqxcombobox.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/> // View Model<div/> var listModel = function (items) {<div/> this.items = ko.observableArray(items);<div/> this.itemToAdd = ko.observable("");<div/> this.disabled = ko.observable(false);<div/> this.selectedIndex = ko.observable(1);<div/> };<div/><div/> ko.applyBindings(new listModel([<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Caffé Latte", "Cortado", "Espresso"</span>]));<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 id=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"list" data-bind="jqxComboBox: {source: items, disabled: disabled, selectedIndex: selectedIndex, height: 25, width: 200}"</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 class="documentation-option-type-click">
<span id='Span8'>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 jqxComboBox's data source.
<br />
<br />
Code Example:
<br />
<br />
<pre style='width: 700px; max-width: 700px; 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/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/jqxlistbox.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/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/jqxcombobox.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/> // View Model<div/> var listModel = function (items) {<div/> this.items = ko.observableArray(items);<div/> this.itemToAdd = ko.observable("");<div/> this.disabled = ko.observable(false);<div/> this.selectedIndex = ko.observable(1);<div/> };<div/><div/> ko.applyBindings(new listModel([<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Caffé Latte", "Cortado", "Espresso"</span>]));<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 id=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"list" data-bind="jqxComboBox: {source: items, disabled: disabled, selectedIndex: selectedIndex, height: 25, width: 200}"</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 class="documentation-option-type-click">
<span id='Span10'>selectedIndex</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 jqxComboBox's selected index.
<br />
<br />
Code Example:
<br />
<br />
<pre style='width: 700px; max-width: 700px; 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/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/jqxlistbox.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/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/jqxcombobox.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/> // View Model<div/> var listModel = function (items) {<div/> this.items = ko.observableArray(items);<div/> this.itemToAdd = ko.observable("");<div/> this.disabled = ko.observable(false);<div/> this.selectedIndex = ko.observable(1);<div/> };<div/><div/> ko.applyBindings(new listModel([<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Caffé Latte", "Cortado", "Espresso"</span>]));<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 id=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"list" data-bind="jqxComboBox: {source: items, disabled: disabled, selectedIndex: selectedIndex, height: 25, width: 200}"</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;">jqxDropDownList</span></th>
</tr>
<tr>
<th>Property Name
</th>
<th>Type
</th>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span14'>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 jqxDropDownList is enabled or disabled.
<br />
<br />
Code Example:
<br />
<br />
<pre style='width: 700px; max-width: 700px; 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/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/jqxlistbox.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/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/jqxdropdownlist.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/> // View Model<div/> var listModel = function (items) {<div/> this.items = ko.observableArray(items);<div/> this.disabled = ko.observable(false);<div/> this.selectedIndex = ko.observable(1);<div/> };<div/><div/> ko.applyBindings(new listModel([<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Caffé Latte", "Cortado", "Espresso"</span>]));<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 id=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"list" data-bind="jqxDropDownList: {source: items, disabled: disabled, selectedIndex: selectedIndex, autoDropDownHeight: true, height: 25, width: 200}"</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 class="documentation-option-type-click">
<span id='Span13'>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 jqxDropDownList's data source.
<br />
<br />
Code Example:
<br />
<br />
<pre style='width: 700px; max-width: 700px; 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/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/jqxlistbox.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/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/jqxdropdownlist.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/> // View Model<div/> var listModel = function (items) {<div/> this.items = ko.observableArray(items);<div/> this.disabled = ko.observable(false);<div/> this.selectedIndex = ko.observable(1);<div/> };<div/><div/> ko.applyBindings(new listModel([<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Caffé Latte", "Cortado", "Espresso"</span>]));<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 id=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"list" data-bind="jqxDropDownList: {source: items, disabled: disabled, selectedIndex: selectedIndex, autoDropDownHeight: true, height: 25, width: 200}"</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 class="documentation-option-type-click">
<span id='Span15'>selectedIndex</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 jqxDropDownList's selected index.
<br />
<br />
Code Example:
<br />
<br />
<pre style='width: 700px; max-width: 700px; 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/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/jqxlistbox.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/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/jqxdropdownlist.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/> // View Model<div/> var listModel = function (items) {<div/> this.items = ko.observableArray(items);<div/> this.disabled = ko.observable(false);<div/> this.selectedIndex = ko.observable(1);<div/> };<div/><div/> ko.applyBindings(new listModel([<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Caffé Latte", "Cortado", "Espresso"</span>]));<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 id=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"list" data-bind="jqxDropDownList: {source: items, disabled: disabled, selectedIndex: selectedIndex, autoDropDownHeight: true, height: 25, width: 200}"</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;">jqxListBox</span></th>
</tr>
<tr>
<th>Property Name
</th>
<th>Type
</th>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span17'>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 jqxListBox is enabled or disabled.
<br />
<br />
Code Example:
<br />
<br />
<pre style='width: 700px; max-width: 700px; 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/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/jqxlistbox.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/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/> // View Model<div/> var listModel = function (items) {<div/> this.items = ko.observableArray(items);<div/> this.disabled = ko.observable(false);<div/> this.selectedIndex = ko.observable(0);<div/> };<div/><div/><div/> ko.applyBindings(new listModel([<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Cortado", "Espresso", "Caffé Latte", "Breve"</span>]));<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 id=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"list" data-bind="jqxListBox: {source: items, disabled: disabled, selectedIndex: selectedIndex, height: 200, width: 200}"</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 class="documentation-option-type-click">
<span id='Span16'>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 jqxListBox's data source.
<br />
<br />
Code Example:
<br />
<br />
<pre style='width: 700px; max-width: 700px; 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/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/jqxlistbox.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/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/> // View Model<div/> var listModel = function (items) {<div/> this.items = ko.observableArray(items);<div/> this.disabled = ko.observable(false);<div/> this.selectedIndex = ko.observable(0);<div/> };<div/><div/><div/> ko.applyBindings(new listModel([<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Cortado", "Espresso", "Caffé Latte", "Breve"</span>]));<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 id=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"list" data-bind="jqxListBox: {source: items, disabled: disabled, selectedIndex: selectedIndex, height: 200, width: 200}"</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 class="documentation-option-type-click">
<span id='Span18'>selectedIndex</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 jqxListBox's selected index.
<br />
<br />
Code Example:
<br />
<br />
<pre style='width: 700px; max-width: 700px; 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/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/jqxlistbox.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/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/> // View Model<div/> var listModel = function (items) {<div/> this.items = ko.observableArray(items);<div/> this.disabled = ko.observable(false);<div/> this.selectedIndex = ko.observable(0);<div/> };<div/><div/><div/> ko.applyBindings(new listModel([<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Cortado", "Espresso", "Caffé Latte", "Breve"</span>]));<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 id=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"list" data-bind="jqxListBox: {source: items, disabled: disabled, selectedIndex: selectedIndex, height: 200, width: 200}"</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;">jqxDateTimeInput</span></th>
</tr>
<tr>
<th>Property Name
</th>
<th>Type
</th>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span12'>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 jqxDateTimeInput is enabled or disabled.
<br />
<br />
Code Example:
<br />
<br />
<pre style='width: 700px; max-width: 700px; 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" 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 (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 id=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"input" data-bind="jqxDateTimeInput: {value: date, disabled: disabled, width: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'250px', height: '25'</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 class="documentation-option-type-click">
<span id='Span11'>value</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;">
Sets the jqxDateTimeInput's value.
<br />
<br />
Code Example:
<br />
<br />
<pre style='width: 700px; max-width: 700px; 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;"><title id=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Description"</span>></span>Integration of jqxDateTimeInput with Knockout<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></title></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="../../../../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" 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" 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 (date) {<div/> this.date = ko.observable(date);<div/> this.disabled = ko.observable(false);<div/> this.displayDate = function () {<div/> alert(<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Date: "</span> + this.date());<div/> }<div/> this.setDate = function () {<div/> var date = new Date();<div/> date.setFullYear(2012, 11, 11);<div/> this.date(date);<div/> }<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 id=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"input" data-bind="jqxDateTimeInput: {value: date, disabled: disabled, width: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'250px', height: '25'</span>, theme: getDemoTheme()}"</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;"><div style=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"margin-top: 5px; clear: both;"</span>></span><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><input id=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"getButton" data-bind="click: displayDate, jqxButton: {theme: getDemoTheme()}" type="button" value="Get Value"</span> /></span><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><input id=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"setButton" data-bind="click: setDate, jqxButton: {theme: getDemoTheme()}" type="button" value="Set Value"</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: disabled, width: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'100px', theme: getDemoTheme()}" style='margin-top: 5px;'</span> id="checkBox"</span>></span>Disabled<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;">jqxGauge</span></th>
</tr>
<tr>
<th>Property Name
</th>
<th>Type
</th>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span20'>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 jqxGauge is enabled or disabled.
<br />
<br />
Code Example:
<br />
<br />
<pre style='width: 700px; max-width: 700px; 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/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/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/jqxgauge.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.value = ko.observable(value);<div/> this.disabled = ko.observable(false);<div/> };<div/><div/> ko.applyBindings(new viewModel(60));<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></span><div/> <div style=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"float: left;" id="gaugeContainer" data-bind="</span>jqxGauge: {ranges: [{ startValue: 0, endValue: 55, style: { fill: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'#4bb648', stroke: '#4bb648'</span> }, endWidth: 5, startWidth: 5 },<div/> { startValue: 25, endValue: 50, style: { fill: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'#fbd109', stroke: '#fbd109'</span> }, endWidth: 10, startWidth: 5 },<div/> { startValue: 50, endValue: 85, style: { fill: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'#ff8000', stroke: '#ff8000'</span> }, endWidth: 13, startWidth: 10 },<div/> { startValue: 85, endValue: 100, style: { fill: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'#e02629', stroke: '#e02629'</span> }, endWidth: 16, startWidth: 13 }],<div/> ticksMinor: { interval: 5, size: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'5%'</span> },<div/> ticksMajor: { interval: 10, size: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'9%'</span> },<div/> value: value,<div/> disabled: disabled,<div/> colorScheme: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'scheme05'</span>,<div/> animationDuration: 1200}"><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></div></span><div/> <div data-bind="jqxLinearGauge: {orientation: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'vertical'</span>, width: 110, height: 350,<div/> ticksMajor: { size: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'10%'</span>, interval: 10 },<div/> ticksMinor: { size: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'5%', interval: 2.5, style: { 'stroke-width': 1, stroke: '#aaaaaa'</span> } },<div/> value: value,<div/> disabled: disabled,<div/> pointer: { size: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'5%'</span> },<div/> colorScheme: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'scheme05'</span>,<div/> labels: {<div/> interval: 20, formatValue: function (value, position) {<div/> if (position === <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'far'</span>) {<div/> value = (9 / 5) * value + 32;<div/> if (value === -76) {<div/> return <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'°F'</span>;<div/> }<div/> return value + <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'°'</span>;<div/> }<div/> if (value === -60) {<div/> return <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'°C'</span>;<div/> }<div/> return value + <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'°'</span>;<div/> }<div/> },<div/> ranges: [<div/> { startValue: 10, endValue: 30, style: { fill: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'#FFF157', stroke: '#FFF157'</span> } },<div/> { startValue: 30, endValue: 65, style: { fill: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'#FFA200', stroke: '#FFA200'</span> } },<div/> { startValue: 65, endValue: 100, style: { fill: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'#FF4800', stroke: '#FF4800'</span> } }],<div/> animationDuration: 1500}"<div/> style=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"margin-left: 50px; float: left;" id="linearGauge"</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;"></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='Span21'>min</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;">
Sets the jqxGauge's min value.
<br />
<br />
Code Example:
<br />
<br />
<pre style='width: 700px; max-width: 700px; 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/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/jqxgauge.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.value = ko.observable(value);<div/> this.min = ko.observable(0);<div/> this.max = ko.observable(100);<div/> };<div/><div/> ko.applyBindings(new viewModel(60));<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></span><div/> <div style=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"float: left;" id="gaugeContainer" data-bind="</span>jqxGauge: {ranges: [{ startValue: 0, endValue: 55, style: { fill: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'#4bb648', stroke: '#4bb648'</span> }, endWidth: 5, startWidth: 5 },<div/> { startValue: 25, endValue: 50, style: { fill: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'#fbd109', stroke: '#fbd109'</span> }, endWidth: 10, startWidth: 5 },<div/> { startValue: 50, endValue: 85, style: { fill: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'#ff8000', stroke: '#ff8000'</span> }, endWidth: 13, startWidth: 10 },<div/> { startValue: 85, endValue: 100, style: { fill: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'#e02629', stroke: '#e02629'</span> }, endWidth: 16, startWidth: 13 }],<div/> ticksMinor: { interval: 5, size: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'5%'</span> },<div/> ticksMajor: { interval: 10, size: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'9%'</span> },<div/> value: value,<div/> min: min,<div/> max: max,<div/> colorScheme: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'scheme05'</span>,<div/> animationDuration: 1200}"><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></div></span><div/> <div data-bind="jqxLinearGauge: {orientation: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'vertical'</span>, width: 110, height: 350,<div/> ticksMajor: { size: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'10%'</span>, interval: 10 },<div/> ticksMinor: { size: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'5%', interval: 2.5, style: { 'stroke-width': 1, stroke: '#aaaaaa'</span> } },<div/> max: max,<div/> min: min,<div/> value: value,<div/> pointer: { size: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'5%'</span> },<div/> colorScheme: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'scheme05'</span>,<div/> labels: {<div/> interval: 20, formatValue: function (value, position) {<div/> if (position === <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'far'</span>) {<div/> value = (9 / 5) * value + 32;<div/> if (value === -76) {<div/> return <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'°F'</span>;<div/> }<div/> return value + <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'°'</span>;<div/> }<div/> if (value === -60) {<div/> return <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'°C'</span>;<div/> }<div/> return value + <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'°'</span>;<div/> }<div/> },<div/> ranges: [<div/> { startValue: 10, endValue: 30, style: { fill: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'#FFF157', stroke: '#FFF157'</span> } },<div/> { startValue: 30, endValue: 65, style: { fill: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'#FFA200', stroke: '#FFA200'</span> } },<div/> { startValue: 65, endValue: 100, style: { fill: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'#FF4800', stroke: '#FF4800'</span> } }],<div/> animationDuration: 1500}"<div/> style=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"margin-left: 50px; float: left;" id="linearGauge"</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;"></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='Span22'>max</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;">
Sets the jqxGauge's max value.
<br />
<br />
Code Example:
<br />
<br />
<pre style='width: 700px; max-width: 700px; 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/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/jqxgauge.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.value = ko.observable(value);<div/> this.min = ko.observable(0);<div/> this.max = ko.observable(100);<div/> };<div/><div/> ko.applyBindings(new viewModel(60));<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></span><div/> <div style=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"float: left;" id="gaugeContainer" data-bind="</span>jqxGauge: {ranges: [{ startValue: 0, endValue: 55, style: { fill: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'#4bb648', stroke: '#4bb648'</span> }, endWidth: 5, startWidth: 5 },<div/> { startValue: 25, endValue: 50, style: { fill: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'#fbd109', stroke: '#fbd109'</span> }, endWidth: 10, startWidth: 5 },<div/> { startValue: 50, endValue: 85, style: { fill: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'#ff8000', stroke: '#ff8000'</span> }, endWidth: 13, startWidth: 10 },<div/> { startValue: 85, endValue: 100, style: { fill: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'#e02629', stroke: '#e02629'</span> }, endWidth: 16, startWidth: 13 }],<div/> ticksMinor: { interval: 5, size: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'5%'</span> },<div/> ticksMajor: { interval: 10, size: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'9%'</span> },<div/> value: value,<div/> min: min,<div/> max: max,<div/> colorScheme: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'scheme05'</span>,<div/> animationDuration: 1200}"><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></div></span><div/> <div data-bind="jqxLinearGauge: {orientation: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'vertical'</span>, width: 110, height: 350,<div/> ticksMajor: { size: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'10%'</span>, interval: 10 },<div/> ticksMinor: { size: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'5%', interval: 2.5, style: { 'stroke-width': 1, stroke: '#aaaaaa'</span> } },<div/> max: max,<div/> min: min,<div/> value: value,<div/> pointer: { size: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'5%'</span> },<div/> colorScheme: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'scheme05'</span>,<div/> labels: {<div/> interval: 20, formatValue: function (value, position) {<div/> if (position === <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'far'</span>) {<div/> value = (9 / 5) * value + 32;<div/> if (value === -76) {<div/> return <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'°F'</span>;<div/> }<div/> return value + <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'°'</span>;<div/> }<div/> if (value === -60) {<div/> return <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'°C'</span>;<div/> }<div/> return value + <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'°'</span>;<div/> }<div/> },<div/> ranges: [<div/> { startValue: 10, endValue: 30, style: { fill: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'#FFF157', stroke: '#FFF157'</span> } },<div/> { startValue: 30, endValue: 65, style: { fill: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'#FFA200', stroke: '#FFA200'</span> } },<div/> { startValue: 65, endValue: 100, style: { fill: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'#FF4800', stroke: '#FF4800'</span> } }],<div/> animationDuration: 1500}"<div/> style=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"margin-left: 50px; float: left;" id="linearGauge"</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;"></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='Span19'>value</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;">
Sets the jqxGauge's value.
<br />
<br />
Code Example:
<br />
<br />
<pre style='width: 700px; max-width: 700px; 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/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/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/jqxgauge.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.value = ko.observable(value);<div/> this.disabled = ko.observable(false);<div/> };<div/><div/> ko.applyBindings(new viewModel(60));<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></span><div/> <div style=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"float: left;" id="gaugeContainer" data-bind="</span>jqxGauge: {ranges: [{ startValue: 0, endValue: 55, style: { fill: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'#4bb648', stroke: '#4bb648'</span> }, endWidth: 5, startWidth: 5 },<div/> { startValue: 25, endValue: 50, style: { fill: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'#fbd109', stroke: '#fbd109'</span> }, endWidth: 10, startWidth: 5 },<div/> { startValue: 50, endValue: 85, style: { fill: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'#ff8000', stroke: '#ff8000'</span> }, endWidth: 13, startWidth: 10 },<div/> { startValue: 85, endValue: 100, style: { fill: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'#e02629', stroke: '#e02629'</span> }, endWidth: 16, startWidth: 13 }],<div/> ticksMinor: { interval: 5, size: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'5%'</span> },<div/> ticksMajor: { interval: 10, size: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'9%'</span> },<div/> value: value,<div/> disabled: disabled,<div/> colorScheme: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'scheme05'</span>,<div/> animationDuration: 1200}"><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></div></span><div/> <div data-bind="jqxLinearGauge: {orientation: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'vertical'</span>, width: 110, height: 350,<div/> ticksMajor: { size: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'10%'</span>, interval: 10 },<div/> ticksMinor: { size: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'5%', interval: 2.5, style: { 'stroke-width': 1, stroke: '#aaaaaa'</span> } },<div/> value: value,<div/> disabled: disabled,<div/> pointer: { size: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'5%'</span> },<div/> colorScheme: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'scheme05'</span>,<div/> labels: {<div/> interval: 20, formatValue: function (value, position) {<div/> if (position === <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'far'</span>) {<div/> value = (9 / 5) * value + 32;<div/> if (value === -76) {<div/> return <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'°F'</span>;<div/> }<div/> return value + <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'°'</span>;<div/> }<div/> if (value === -60) {<div/> return <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'°C'</span>;<div/> }<div/> return value + <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'°'</span>;<div/> }<div/> },<div/> ranges: [<div/> { startValue: 10, endValue: 30, style: { fill: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'#FFF157', stroke: '#FFF157'</span> } },<div/> { startValue: 30, endValue: 65, style: { fill: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'#FFA200', stroke: '#FFA200'</span> } },<div/> { startValue: 65, endValue: 100, style: { fill: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'#FF4800', stroke: '#FF4800'</span> } }],<div/> animationDuration: 1500}"<div/> style=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"margin-left: 50px; float: left;" id="linearGauge"</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;"></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;">jqxSlider</span></th>
</tr>
<tr>
<th>Property Name
</th>
<th>Type
</th>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span26'>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 jqxSlider is enabled or disabled.
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span24'>min</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;">
Sets the jqxSlider's min value.
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span25'>max</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;">
Sets the Slider's max value.
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span23'>value</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;">
Sets the jqxSlider's value.
<br />
<br />
Code Example:
<br />
<br />
<pre style='width: 700px; max-width: 700px; 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/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/jqxslider.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.value = ko.observable(value);<div/> this.min = ko.observable(0);<div/> this.max = ko.observable(100);<div/> this.disabled = ko.observable(false);<div/> };<div/><div/> ko.applyBindings(new viewModel(20));<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;">"jqxSlider: {min: min, max: max, value: value, disabled: disabled, width: 300, height: 25, showTicks: false, mode: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'fixed'</span>}"</span>></span><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>
<br />
<table class="documentation-table">
<tr>
<th><span style="font-size: 16px;">jqxScrollBar</span></th>
</tr>
<tr>
<th>Property Name
</th>
<th>Type
</th>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span30'>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 jqxScrollBar is enabled or disabled.
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span28'>min</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;">
Sets the jqxScrollBar's min value.
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span29'>max</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;">
Sets the jqxScrollBar's max value.
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span27'>value</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;">
Sets the jqxScrollBar's value.
<br />
<br />
Code Example:
<br />
<br />
<pre style='width: 700px; max-width: 700px; 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/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/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"</span>></span><div/> $(document).ready(function () {<div/> var viewModel = function (value, min, max) {<div/> this.value = ko.observable(value);<div/> this.min = ko.observable(0);<div/> this.max = ko.observable(max);<div/> this.validateValue = function () {<div/> if (this.value() > this.max()) this.value(parseFloat(this.max()));<div/> if (this.value() < this.min()) this.value(parseFloat(this.min()));<div/> }<div/><div/> this.setMax = ko.computed({<div/> read: this.max,<div/> write: function (value) {<div/> if (!isNaN(value))<div/> this.max(parseFloat(value)); // Write to underlying storage<div/> if (value < this.min()) this.max(parseFloat(this.min()) + 1);<div/> this.validateValue();<div/> },<div/> owner: this<div/> });<div/> this.setMin = ko.computed({<div/> read: this.min,<div/> write: function (value) {<div/> if (!isNaN(value))<div/> this.min(parseFloat(value)); // Write to underlying storage<div/> if (value > this.max()) this.max(parseFloat(value) + 1);<div/><div/> this.validateValue();<div/> },<div/> owner: this<div/> });<div/> this.setValue = ko.computed({<div/> read: this.value,<div/> write: function (value) {<div/> if (!isNaN(value))<div/> this.value(parseFloat(value)); // Write to underlying storage<div/> this.validateValue();<div/> },<div/> owner: this<div/> });<div/> this.disabled = ko.observable(false);<div/> };<div/><div/> ko.applyBindings(new viewModel(100, 0, 1000));<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;">"jqxScrollBar: {min: min, max: max, value: value, disabled: disabled, width: 400, height: 18}"</span>></span><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;">jqxRadioButton</span></th>
</tr>
<tr>
<th>Property Name
</th>
<th>Type
</th>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span31'>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 jqxRadioButton's state.
<br />
<br />
Code Example:
<br />
<br />
<pre style='width: 700px; max-width: 700px; 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;"><title id=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Description"</span>></span>Integration of jqxRadioButton with Knockout<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></title></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="../../../../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" 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="../../../../jqwidgets/jqxradiobutton.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 () {<div/> this.count = 0;<div/> this.checked1 = ko.observable(true);<div/> this.checked2 = ko.observable(false);<div/> this.checked3 = ko.observable(false);<div/> this.disabled = ko.observable(false);<div/><div/> // check checkbox.<div/> this.check = function () {<div/> this.checked1(true);<div/> }<div/> };<div/><div/> ko.applyBindings(new viewModel());<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;">"jqxRadioButton: {checked: checked1, disabled: disabled, width: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'120px', theme: getDemoTheme()}"</span> style='margin-bottom: 10px;'</span>></span>Radio Button 1<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></div></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;">"jqxRadioButton: {checked: checked2, disabled: disabled, width: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'120px', theme: getDemoTheme()}"</span> style='margin-bottom: 10px;'</span>></span>Radio Button 2<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></div></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;">"jqxRadioButton: {checked: checked3, disabled: disabled, width: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'120px', theme: getDemoTheme()}"</span> style='margin-bottom: 10px;'</span>></span>Radio Button 3<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></div></span><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><input data-bind=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"click: check, jqxButton: {theme: getDemoTheme()}" type="button" value="Check First Item"</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: disabled, theme: getDemoTheme()}" style=<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'margin-top: 5px;'</span> id="checkBox"</span>></span>Disabled<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></div></span><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><div style=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"margin-top: 10px;"</span>></span><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><span></span>Radio Button 1:<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></span></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><span data-bind=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text: checked1"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></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;"><div></span><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><span></span>Radio Button 2:<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></span></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><span data-bind=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text: checked2"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></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;"><div></span><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><span></span>Radio Button 3:<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></span></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><span data-bind=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text: checked3"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></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 class="documentation-option-type-click">
<span id='Span32'>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 jqxRadioButton is enabled or disabled.
</div>
</td>
</tr>
</table>
<table class="documentation-table">
<tr>
<th><span style="font-size: 16px;">jqxNumberInput</span></th>
</tr>
<tr>
<th>Property Name
</th>
<th>Type
</th>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span36'>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 jqxNumberInput is enabled or disabled.
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span33'>value</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;">
Sets the jqxNumberInput's value.
<br />
<br />
Code Example:
<br />
<br />
<pre style='width: 700px; max-width: 700px; 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/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/jqxpanel.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/jqxnumberinput.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 (number) {<div/> this.number = ko.observable(number);<div/> this.disabled = ko.observable(false);<div/> };<div/> <div/> ko.applyBindings(new viewModel(205.33));<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;">"jqxNumberInput: {value: number, disabled: disabled, spinButtons: true, width: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'250px', height: '25px'}"</span> style='margin-top: 3px;' id='jqxNumberInput'</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;">jqxMaskedInput</span></th>
</tr>
<tr>
<th>Property Name
</th>
<th>Type
</th>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span35'>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 jqxMaskedInput is enabled or disabled.
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span34'>value</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;">
Sets the jqxMaskedInput's value.
<br />
<br />
Code Example:
<br />
<br />
<pre style='width: 700px; max-width: 700px; 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/jqxmaskedinput.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 (phone) {<div/> this.phoneNumber = ko.observable(phone);<div/> this.disabled = ko.observable(false);<div/> };<div/> <div/> ko.applyBindings(new viewModel(<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"0014521665"</span>));<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;">"jqxMaskedInput: {value: phoneNumber, mask: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'(###)###-####', disabled: disabled, width: '250px', height: '25px'</span>}"</span>></span><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></div></span><div/><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;">jqxProgressBar</span></th>
</tr>
<tr>
<th>Property Name
</th>
<th>Type
</th>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span38'>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 jqxProgressBar is enabled or disabled.
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span37'>value</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;">
Sets the jqxProgressBar's value.
<br />
<br />
Code Example:
<br />
<br />
<pre style='width: 700px; max-width: 700px; 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/jqxprogressbar.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.value = ko.observable(value);<div/> this.disabled = ko.observable(false);<div/> };<div/><div/> ko.applyBindings(new viewModel(50));<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;">"jqxProgressBar: {value: value, disabled: disabled, width: 400, height: 18}"</span>></span><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;">jqxMenu</span></th>
</tr>
<tr>
<th>Property Name
</th>
<th>Type
</th>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span40'>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 jqxMenu is enabled or disabled.
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span39'>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 jqxMenu's data source.
<br />
<br />
Code Example:
<br />
<br />
<pre style='width: 700px; max-width: 700px; 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;"><title id=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Description"</span>></span>Integration of jqxMenu with Knockout<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></title></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="../../../../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" 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/jqxlistbox.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/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="../../../../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"</span>></span><div/> $(document).ready(function () { <div/> // Define a <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Person"</span> class that tracks its own name and children, and has a method to add a new child<div/> var Person = function (name, items) {<div/> this.label = name;<div/> this.items = items != undefined ? ko.observableArray(items) : ko.observableArray();<div/> this.visible = ko.observable(true);<div/><div/> this.addSubItem = function () {<div/> if (this.items().length < 1) {<div/> this.items.push(new Person(<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"New Item"</span>));<div/> }<div/> else if (this.items().length == 1) {<div/> this.items.push(new Person(<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Last Item"</span>));<div/> this.visible(false);<div/> }<div/> }<div/> }<div/><div/> // The view model is an abstract description of the state of the UI, but without any knowledge of the UI technology (HTML)<div/> var viewModel = {<div/> people: [<div/> new Person(<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Annabelle", [new Person("Arnie"), new Person("Anders"), new Person("Apple"</span>)]),<div/> new Person(<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Bertie", [new Person("Boutros-Boutros"), new Person("Brianna"), new Person("Barbie"), new Person("Bee-bop"</span>)]),<div/> new Person(<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Charles", [new Person("Cayenne"), new Person("Cleopatra"</span>)])<div/> ],<div/> disabled: ko.observable(false)<div/> };<div/><div/> ko.applyBindings(viewModel);<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 style=<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'font-size: 13px; font-family: Verdana;' class='default'</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;"><div style=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"float: left; margin-left: 50px;"</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;">"jqxMenu: {source: people, disabled: disabled, width: 240, height: 30, theme: getDemoTheme()}" id="menu"</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;"><div data-bind=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"jqxCheckBox: {checked: disabled, theme: getDemoTheme()}" style=<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'margin-top: 5px;'</span> id="checkBox"</span>></span>Disabled<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;"><div style=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"float: left;"</span>></span><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><ul data-bind=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"foreach: people"</span>></span><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><li></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;"><span data-bind=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text: label"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></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;"><ul data-bind=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"foreach: items"</span>></span><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><li></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><span data-bind=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text: label"></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></span></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><a style="margin-left: 3px;"</span> href=<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'#' data-bind='click: addSubItem, visible: visible'</span>></span>Add Item<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></a></span><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><ul data-bind=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"foreach: items"</span>></span><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><li></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><span data-bind=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text: label"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></span></span><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></ul></span><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></li></span><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></ul></span><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></li></span><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></ul></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;"></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;">jqxTree</span></th>
</tr>
<tr>
<th>Property Name
</th>
<th>Type
</th>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span42'>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 jqxTree is enabled or disabled.
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span41'>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 jqxTree's data source.
<br />
<br />
Code Example:
<br />
<br />
<pre style='width: 700px; max-width: 700px; 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="../../../../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" 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/jqxlistbox.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/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="../../../../jqwidgets/jqxpanel.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/jqxtree.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/> // Define a <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Person"</span> class that tracks its own name and children, and has a method to add a new child<div/> var Person = function (name, items) {<div/> this.label = name;<div/> this.items = ko.observableArray(items);<div/> this.enabled = ko.observable(true);<div/><div/> this.addItem = function () {<div/> if (this.items().length < 4) {<div/> this.items.push(<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"New Item"</span>);<div/> }<div/> else if (this.items().length == 4) {<div/> this.items.push(<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Last Item"</span>);<div/> this.enabled(false);<div/> }<div/> }<div/> }<div/><div/> // The view model is an abstract description of the state of the UI, but without any knowledge of the UI technology (HTML)<div/> var viewModel = {<div/> people: [<div/> new Person(<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Annabelle", ["Arnie", "Anders", "Apple"</span>]),<div/> new Person(<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Bertie", ["Boutros-Boutros", "Brianna", "Barbie", "Bee-bop"</span>]),<div/> new Person(<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Charles", ["Cayenne", "Cleopatra"</span>])<div/> ],<div/> disabled: ko.observable(false)<div/> };<div/><div/> ko.applyBindings(viewModel);<div/> $(<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"#tree"</span>).jqxTree(<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'expandAll'</span>);<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 style=<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'font-size: 13px; font-family: Verdana;' class='default'</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;"><div style=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"float: left;"</span>></span><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><ul data-bind=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"foreach: people"</span>></span><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><li></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;"><span data-bind=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text: label"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></span></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><a href=<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'#' data-bind='click: addItem, visible: enabled'</span>></span> Add Item<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></a></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;"><ul data-bind=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"foreach: items"</span>></span><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><li></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><span data-bind=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text: $data"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></span></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></li></span><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></ul></span><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></li></span><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></ul></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;"><div style=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"float: left; margin-left: 50px;"</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;">"jqxTree: {source: people, disabled: disabled, theme: getDemoTheme()}" id="tree"</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;"><div data-bind=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"jqxCheckBox: {checked: disabled, theme: getDemoTheme()}" style=<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'margin-top: 5px;'</span> id="checkBox"</span>></span>Disabled<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;"></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;">jqxInput</span></th>
</tr>
<tr>
<th>Property Name
</th>
<th>Type
</th>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span44'>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 jqxInput is enabled or disabled.
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span43'>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 jqxInput's data source.
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span45'>value</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;">
Sets the jqxInput's value.
<pre style='overflow: auto; width: 700px; max-width: 700px; 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;"><title id=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Description"</span>></span>Integration of jqxInput with Knockout.<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></title></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="../../../../scripts/demos.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/jqxinput.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/> // Here's my data model<div/> var ViewModel = function (first, last) {<div/> this.firstName = ko.observable(first);<div/> this.lastName = ko.observable(last);<div/><div/> this.fullName = ko.computed(function () {<div/> // Knockout tracks dependencies automatically. It knows that fullName depends on firstName and lastName, because these get called when evaluating fullName.<div/> return this.firstName() + <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">" "</span> + this.lastName();<div/> }, this);<div/> };<div/><div/> ko.applyBindings(new ViewModel(<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Planet", "Earth"</span>)); // This makes Knockout get to work<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 style=<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'font-size: 13px; font-family: Verdana;' class='default'</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;"><p></span>First name:<div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><input id=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"firstName" data-bind="jqxInput: {width: 200, height: 25, value: firstName}"</span> /></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></p></span><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><p></span>Last name:<div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><input id=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"lastName" data-bind="jqxInput: {width: 200, height: 25, value: lastName}"</span> /></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></p></span><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><h2></span>Hello, <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><span data-bind=<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'text: fullName'</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></span></span>!<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></h2></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;">jqxWindow</span></th>
</tr>
<tr>
<th>Property Name
</th>
<th>Type
</th>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span48'>content</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;">
Sets the jqxWindow's content.
<br />
<br />
Code Example:
<br />
<br />
<pre style='overflow: auto; width: 700px; max-width: 700px; 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;"><title id=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Description"</span>></span>Integration of jqxWindow with Knockout.<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></title></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="../../../../scripts/demos.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/jqxwindow.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/> // Here's my data model<div/> var ViewModel = function (title, content) {<div/> this.title = ko.observable(title);<div/> this.content = ko.observable(content);<div/> };<div/><div/> ko.applyBindings(new ViewModel(<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Title", "Content"</span>)); // This makes Knockout get to work<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 style=<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'font-size: 13px; font-family: Verdana;' class='default'</span>></span><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><div id=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"window" data-bind="jqxWindow: {content: content, title: title}"</span>></span> <div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><div></span><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/></pre>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span47'>title</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;">
Sets the jqxWindow's Title.
<br />
<br />
Code Example:
<br />
<br />
<pre style='overflow: auto; width: 700px; max-width: 700px; 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;"><title id=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Description"</span>></span>Integration of jqxWindow with Knockout.<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></title></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="../../../../scripts/demos.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/jqxwindow.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/> // Here's my data model<div/> var ViewModel = function (title, content) {<div/> this.title = ko.observable(title);<div/> this.content = ko.observable(content);<div/> };<div/><div/> ko.applyBindings(new ViewModel(<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Title", "Content"</span>)); // This makes Knockout get to work<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 style=<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'font-size: 13px; font-family: Verdana;' class='default'</span>></span><div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><div id=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"window" data-bind="jqxWindow: {content: content, title: title}"</span>></span> <div/> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><div></span><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/></pre>
</div>
</td>
</tr>
</table>
</div>
</body>
</html>