MVVM with Knockout

What is Knockout?

Knockout is a JavaScript library that helps you to create rich, responsive display and editor user interfaces with a clean underlying data model. Any time you have sections of UI that update dynamically (e.g., changing depending on the user’s actions or when an external data source changes), KO can help you implement it more simply and maintainably. Knockout framework is based on the MVVM design pattern.

What is MVVM?

Model-View-View Model (MVVM) is a design pattern for building user interfaces. It splits the User Interface into three conceptual parts:

How to use jQWidgets with Knockout?

The integration of jQWidgets with Knockout is done via a plug-in called jqxKnockout(jqxknockout.js). In addition, the jqxDataAdapter plug-in supports binding to the Knockout's observableArray and it automatically detects and responds to changes in the observableArray and updates the data bound UI widget(Grid, Chart, ListBox, ComboBox or DropDownList).

Integration Examples with Knockout:

jqxKnockout

In this help topic are listed the properties defined in the jqxKnockout plug-in. These properties support two way data binding.
jqxGrid
Property Name Type
disabled observable
Determines whether the Grid is enabled or disabled.

Code Example:

<!DOCTYPE html>
<html lang="en">
<head>
 <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
 <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
 <script type="text/javascript" src="../../scripts/json2.js"></script> 
 <script type="text/javascript" src="../../scripts/knockout-3.0.0.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxknockout.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
 <script type="text/javascript">
 $(document).ready(function () {
 var initialData = [
 { name: "Well-Travelled Kitten", sales: 352, price: 75.95 },
 { name: "Speedy Coyote", sales: 89, price: 190.00 },
 { name: "Furious Lizard", sales: 152, price: 25.00 },
 { name: "Indifferent Monkey", sales: 1, price: 99.95 },
 { name: "Brooding Dragon", sales: 0, price: 6350 },
 { name: "Ingenious Tadpole", sales: 39450, price: 0.35 },
 { name: "Optimistic Snail", sales: 420, price: 1.50 }
 ];
 var GridModel = function (items) {
 this.items = ko.observableArray(items);
 this.disabled = ko.observable(false);
 };
 ko.applyBindings(new GridModel(initialData));
 });
 </script>
</head>
<body class='default'>
 <div data-bind="jqxGrid: {source: items, disabled: disabled, autoheight: true,
 columns: [
 { text: 'Name', dataField: 'name', width: 200 },
 { text: 'Sales', dataField: 'sales', width: 200, cellsalign: 'right' },
 { text: 'Price', dataField: 'price', width: 200, cellsformat: 'c2', cellsalign: 'right' }
 ]}">
 </div>
</body>
</html>
source observableArray
Sets the jqxGrid's data source.

Code Example: 

<!DOCTYPE html>
<html lang="en">
<head>
 <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
 <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
 <script type="text/javascript" src="../../scripts/json2.js"></script> 
 <script type="text/javascript" src="../../scripts/knockout-3.0.0.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxknockout.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
 <script type="text/javascript" src="../../scripts/gettheme.js"></script>
 <script type="text/javascript">
 $(document).ready(function () {
 var initialData = [
 { name: "Well-Travelled Kitten", sales: 352, price: 75.95 },
 { name: "Speedy Coyote", sales: 89, price: 190.00 },
 { name: "Furious Lizard", sales: 152, price: 25.00 },
 { name: "Indifferent Monkey", sales: 1, price: 99.95 },
 { name: "Brooding Dragon", sales: 0, price: 6350 },
 { name: "Ingenious Tadpole", sales: 39450, price: 0.35 },
 { name: "Optimistic Snail", sales: 420, price: 1.50 }
 ];
 var GridModel = function (items) {
 this.items = ko.observableArray(items); 
 };
 ko.applyBindings(new GridModel(initialData));
 });
 </script>
</head>
<body class='default'>
 <div data-bind="jqxGrid: {source: items, autoheight: true,
 columns: [
 { text: 'Name', dataField: 'name', width: 200 },
 { text: 'Sales', dataField: 'sales', width: 200, cellsalign: 'right' },
 { text: 'Price', dataField: 'price', width: 200, cellsformat: 'c2', cellsalign: 'right' }
 ]}">
 </div> 
 </div>
</body>
</html>
jqxChart
Property Name Type
source observableArray
Sets the jqxChart's data source.

Code Example: 
<!DOCTYPE html>
<html lang="en">
<head>
 <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
 <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
 <script type="text/javascript" src="../../scripts/json2.js"></script>
 <script type="text/javascript" src="../../scripts/knockout-3.0.0.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxchart.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxknockout.js"></script>
 <script type="text/javascript">
 $(document).ready(function () {
 var sampleData = [
 { Day: 'Monday', Keith: 30, Erica: 15, George: 25 },
 { Day: 'Tuesday', Keith: 25, Erica: 25, George: 30 },
 { Day: 'Wednesday', Keith: 30, Erica: 20, George: 25 },
 { Day: 'Thursday', Keith: 35, Erica: 25, George: 45 },
 { Day: 'Friday', Keith: 20, Erica: 20, George: 25 },
 { Day: 'Saturday', Keith: 30, Erica: 20, George: 30 },
 { Day: 'Sunday', Keith: 60, Erica: 45, George: 90 }
 ];
 var ChartModel = function (items) {
 this.items = ko.observableArray(items);
 };
 ko.applyBindings(new ChartModel(sampleData));
 });
 </script>
</head>
<body>
 <div id="chart" style="width: 670px; height: 400px;" data-bind='jqxChart: {
 title: "Fitness & exercise weekly scorecard",
 description: "Time spent in vigorous exercise",
			 showLegend: true,
 padding: { left: 5, top: 5, right: 5, bottom: 5 },
 titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
 source: items,
 categoryAxis:
 {
 dataField: "Day",
 valuesOnTicks: false,
 showGridLines: true
 },
 colorScheme: "scheme01",
 enableAnimations: true,
 seriesGroups:
 [
 {
 type: "column",
 columnsGapPercent: 50,
 seriesGapPercent: 0,
 valueAxis:
 {
 unitInterval: 10,
 minValue: 0,
 maxValue: 100,
 displayValueAxis: true,
 description: "Time in minutes",
 axisSize: "auto",
 tickMarksColor: "#888888"
 },
 series: [
 { dataField: "Keith", displayText: "Keith"},
 { dataField: "Erica", displayText: "Erica"},
 { dataField: "George", displayText: "George"}
 ]
 }
 ]
 }'>
 </div>
</body>
</html>
jqxCalendar
Property Name Type
value observable
disabled observable
Determines whether the jqxCalendar is enabled or disabled.

Code Example: 

<!DOCTYPE html>
<html lang="en">
<head>
 <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
 <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
 <script type="text/javascript" src="../../scripts/json2.js"></script>
 <script type="text/javascript" src="../../scripts/knockout-3.0.0.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script>
 <script type="text/javascript" src="../../jqwidgets/globalization/jquery.global.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxknockout.js"></script>
 <script type="text/javascript">
 $(document).ready(function () { 
 var viewModel = function (date) {
 this.date = ko.observable(date);
 this.disabled = ko.observable(false);
 };
 var date = new Date();
 date.setFullYear(2012, 10, 10);
 ko.applyBindings(new viewModel(date));
 });
 </script>
</head>
<body class='default'>
 <div data-bind="jqxCalendar: {value: date, disabled: disabled, width: '250px', height: '250px'}">
 </div>
</body>
</html>
Sets the jqxCalendar's value.

Code Example: 

<!DOCTYPE html>
<html lang="en">
<head>
 <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
 <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
 <script type="text/javascript" src="../../scripts/json2.js"></script>
 <script type="text/javascript" src="../../scripts/knockout-3.0.0.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script>
 <script type="text/javascript" src="../../jqwidgets/globalization/jquery.global.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxknockout.js"></script>
 <script type="text/javascript">
 $(document).ready(function () { 
 var viewModel = function (date) {
 this.date = ko.observable(date);
 };
 var date = new Date();
 date.setFullYear(2012, 10, 10);
 ko.applyBindings(new viewModel(date));
 });
 </script>
</head>
<body>
 <div data-bind="jqxCalendar: {value: date, width: '250px', height: '250px'}">
 </div>
</body>
</html>
jqxCheckBox
Property Name Type
checked observable
Determines the jqxCheckBox's state.

Code Example: 

<!DOCTYPE html>
<html lang="en">
<head>
 <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
 <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
 <script type="text/javascript" src="../../scripts/json2.js"></script>
 <script type="text/javascript" src="../../scripts/knockout-3.0.0.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxknockout.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
 <script type="text/javascript">
 $(document).ready(function () { 
 var viewModel = function (value) {
 this.checked = ko.observable(value);
 };
 ko.applyBindings(new viewModel(true));
 });
 </script>
</head>
<body class='default'>
 <div data-bind="jqxCheckBox: {checked: checked, width: '120px'}">jqxCheckBox</div>
</body>
</html>
disabled observable
Determines whether the jqxCheckBox is enabled or disabled.

Code Example: 

<!DOCTYPE html>
<html lang="en">
<head>
 <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
 <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
 <script type="text/javascript" src="../../scripts/json2.js"></script>
 <script type="text/javascript" src="../../scripts/knockout-3.0.0.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxknockout.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
 <script type="text/javascript">
 $(document).ready(function () { 
 var viewModel = function (value) {
 this.disabled= ko.observable(value);
 };
 ko.applyBindings(new viewModel(true));
 });
 </script>
</head>
<body class='default'>
 <div data-bind="jqxCheckBox: {disabled: disabled, width: '120px'}">jqxCheckBox</div>
</body>
</html>
jqxComboBox
Property Name Type
disabled observable
Determines whether the jqxComboBox is enabled or disabled.

Code Example: 

<!DOCTYPE html>
<html lang="en">
<head>
 <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
 <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
 <script type="text/javascript" src="../../scripts/json2.js"></script>
 <script type="text/javascript" src="../../scripts/knockout-3.0.0.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxknockout.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxcombobox.js"></script>
 <script type="text/javascript">
 $(document).ready(function () {
 // View Model
 var listModel = function (items) {
 this.items = ko.observableArray(items);
 this.itemToAdd = ko.observable("");
 this.disabled = ko.observable(false);
 this.selectedIndex = ko.observable(1);
 };
 ko.applyBindings(new listModel(["Caffé Latte", "Cortado", "Espresso"]));
 });
 </script>
</head>
<body>
 <div id="list" data-bind="jqxComboBox: {source: items, disabled: disabled, selectedIndex: selectedIndex, height: 25, width: 200}">
 </div>
</body>
</html>
source observableArray
Sets the jqxComboBox's data source.

Code Example: 

<!DOCTYPE html>
<html lang="en">
<head>
 <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
 <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
 <script type="text/javascript" src="../../scripts/json2.js"></script>
 <script type="text/javascript" src="../../scripts/knockout-3.0.0.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxknockout.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxcombobox.js"></script>
 <script type="text/javascript">
 $(document).ready(function () {
 // View Model
 var listModel = function (items) {
 this.items = ko.observableArray(items);
 this.itemToAdd = ko.observable("");
 this.disabled = ko.observable(false);
 this.selectedIndex = ko.observable(1);
 };
 ko.applyBindings(new listModel(["Caffé Latte", "Cortado", "Espresso"]));
 });
 </script>
</head>
<body>
 <div id="list" data-bind="jqxComboBox: {source: items, disabled: disabled, selectedIndex: selectedIndex, height: 25, width: 200}">
 </div>
</body>
</html>
selectedIndex observable
Determines the jqxComboBox's selected index.

Code Example: 

<!DOCTYPE html>
<html lang="en">
<head>
 <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
 <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
 <script type="text/javascript" src="../../scripts/json2.js"></script>
 <script type="text/javascript" src="../../scripts/knockout-3.0.0.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxknockout.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxcombobox.js"></script>
 <script type="text/javascript">
 $(document).ready(function () {
 // View Model
 var listModel = function (items) {
 this.items = ko.observableArray(items);
 this.itemToAdd = ko.observable("");
 this.disabled = ko.observable(false);
 this.selectedIndex = ko.observable(1);
 };
 ko.applyBindings(new listModel(["Caffé Latte", "Cortado", "Espresso"]));
 });
 </script>
</head>
<body>
 <div id="list" data-bind="jqxComboBox: {source: items, disabled: disabled, selectedIndex: selectedIndex, height: 25, width: 200}">
 </div>
</body>
</html>
jqxDropDownList
Property Name Type
disabled observable
Determines whether the jqxDropDownList is enabled or disabled.

Code Example: 

<!DOCTYPE html>
<html lang="en">
<head>
 <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
 <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
 <script type="text/javascript" src="../../scripts/json2.js"></script>
 <script type="text/javascript" src="../../scripts/knockout-3.0.0.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxknockout.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
 <script type="text/javascript">
 $(document).ready(function () {
 // View Model
 var listModel = function (items) {
 this.items = ko.observableArray(items);
 this.disabled = ko.observable(false);
 this.selectedIndex = ko.observable(1);
 };
 ko.applyBindings(new listModel(["Caffé Latte", "Cortado", "Espresso"]));
 });
 </script>
</head>
<body>
 <div id="list" data-bind="jqxDropDownList: {source: items, disabled: disabled, selectedIndex: selectedIndex, autoDropDownHeight: true, height: 25, width: 200}">
 </div>
</body>
</html>
source observableArray
Sets the jqxDropDownList's data source.

Code Example: 

<!DOCTYPE html>
<html lang="en">
<head>
 <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
 <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
 <script type="text/javascript" src="../../scripts/json2.js"></script>
 <script type="text/javascript" src="../../scripts/knockout-3.0.0.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxknockout.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
 <script type="text/javascript">
 $(document).ready(function () {
 // View Model
 var listModel = function (items) {
 this.items = ko.observableArray(items);
 this.disabled = ko.observable(false);
 this.selectedIndex = ko.observable(1);
 };
 ko.applyBindings(new listModel(["Caffé Latte", "Cortado", "Espresso"]));
 });
 </script>
</head>
<body>
 <div id="list" data-bind="jqxDropDownList: {source: items, disabled: disabled, selectedIndex: selectedIndex, autoDropDownHeight: true, height: 25, width: 200}">
 </div>
</body>
</html>
selectedIndex observable
Determines the jqxDropDownList's selected index.

Code Example: 

<!DOCTYPE html>
<html lang="en">
<head>
 <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
 <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
 <script type="text/javascript" src="../../scripts/json2.js"></script>
 <script type="text/javascript" src="../../scripts/knockout-3.0.0.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxknockout.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
 <script type="text/javascript">
 $(document).ready(function () {
 // View Model
 var listModel = function (items) {
 this.items = ko.observableArray(items);
 this.disabled = ko.observable(false);
 this.selectedIndex = ko.observable(1);
 };
 ko.applyBindings(new listModel(["Caffé Latte", "Cortado", "Espresso"]));
 });
 </script>
</head>
<body>
 <div id="list" data-bind="jqxDropDownList: {source: items, disabled: disabled, selectedIndex: selectedIndex, autoDropDownHeight: true, height: 25, width: 200}">
 </div>
</body>
</html>
jqxListBox
Property Name Type
disabled observable
Determines whether the jqxListBox is enabled or disabled.

Code Example: 

<!DOCTYPE html>
<html lang="en">
<head>
 <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
 <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
 <script type="text/javascript" src="../../scripts/json2.js"></script> 
 <script type="text/javascript" src="../../scripts/knockout-3.0.0.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxknockout.js"></script>
 <script type="text/javascript">
 $(document).ready(function () {
 // View Model
 var listModel = function (items) {
 this.items = ko.observableArray(items);
 this.disabled = ko.observable(false);
 this.selectedIndex = ko.observable(0);
 };
 ko.applyBindings(new listModel(["Cortado", "Espresso", "Caffé Latte", "Breve"]));
 });
 </script>
</head>
<body>
 <div id="list" data-bind="jqxListBox: {source: items, disabled: disabled, selectedIndex: selectedIndex, height: 200, width: 200}">
 </div>
</body>
</html>
source observableArray
Sets the jqxListBox's data source.

Code Example: 

<!DOCTYPE html>
<html lang="en">
<head>
 <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
 <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
 <script type="text/javascript" src="../../scripts/json2.js"></script> 
 <script type="text/javascript" src="../../scripts/knockout-3.0.0.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxknockout.js"></script>
 <script type="text/javascript">
 $(document).ready(function () {
 // View Model
 var listModel = function (items) {
 this.items = ko.observableArray(items);
 this.disabled = ko.observable(false);
 this.selectedIndex = ko.observable(0);
 };
 ko.applyBindings(new listModel(["Cortado", "Espresso", "Caffé Latte", "Breve"]));
 });
 </script>
</head>
<body>
 <div id="list" data-bind="jqxListBox: {source: items, disabled: disabled, selectedIndex: selectedIndex, height: 200, width: 200}">
 </div>
</body>
</html>
selectedIndex observable
Determines the jqxListBox's selected index.

Code Example: 

<!DOCTYPE html>
<html lang="en">
<head>
 <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
 <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
 <script type="text/javascript" src="../../scripts/json2.js"></script> 
 <script type="text/javascript" src="../../scripts/knockout-3.0.0.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxknockout.js"></script>
 <script type="text/javascript">
 $(document).ready(function () {
 // View Model
 var listModel = function (items) {
 this.items = ko.observableArray(items);
 this.disabled = ko.observable(false);
 this.selectedIndex = ko.observable(0);
 };
 ko.applyBindings(new listModel(["Cortado", "Espresso", "Caffé Latte", "Breve"]));
 });
 </script>
</head>
<body>
 <div id="list" data-bind="jqxListBox: {source: items, disabled: disabled, selectedIndex: selectedIndex, height: 200, width: 200}">
 </div>
</body>
</html>
jqxDateTimeInput
Property Name Type
disabled observable
Determines whether the jqxDateTimeInput is enabled or disabled.

Code Example: 

<!DOCTYPE html>
<html lang="en">
<head>
 <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
 <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
 <script type="text/javascript" src="../../scripts/json2.js"></script> 
 <script type="text/javascript" src="../../scripts/knockout-3.0.0.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script>
 <script type="text/javascript" src="../../jqwidgets/globalization/jquery.global.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxknockout.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
 <script type="text/javascript">
 $(document).ready(function () { 
 var viewModel = function (date) {
 this.date = ko.observable(date);
 this.disabled = ko.observable(false);
 };
 var date = new Date();
 date.setFullYear(2012, 10, 10);
 ko.applyBindings(new viewModel(date));
 });
 </script>
</head>
<body class='default'>
 <div id="input" data-bind="jqxDateTimeInput: {value: date, disabled: disabled, width: '250px', height: '25'}">
 </div>
</body>
</html>
value observable
Sets the jqxDateTimeInput's value.

Code Example: 

<!DOCTYPE html>
<html lang="en">
<head>
 <title id="Description">Integration of jqxDateTimeInput with Knockout</title>
 <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
 <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
 <script type="text/javascript" src="../../scripts/json2.js"></script> 
 <script type="text/javascript" src="../../scripts/knockout-3.0.0.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
 <script type="text/javascript" src="../../scripts/gettheme.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script>
 <script type="text/javascript" src="../../jqwidgets/globalization/jquery.global.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxknockout.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
 <script type="text/javascript">
 $(document).ready(function () { 
 var viewModel = function (date) {
 this.date = ko.observable(date);
 this.disabled = ko.observable(false);
 this.displayDate = function () {
 alert("Date: " + this.date());
 }
 this.setDate = function () {
 var date = new Date();
 date.setFullYear(2012, 11, 11);
 this.date(date);
 }
 };
 var date = new Date();
 date.setFullYear(2012, 10, 10);
 ko.applyBindings(new viewModel(date));
 });
 </script>
</head>
<body class='default'>
 <div id="input" data-bind="jqxDateTimeInput: {value: date, disabled: disabled, width: '250px', height: '25', theme: getDemoTheme()}">
 </div>
 <div style="margin-top: 5px; clear: both;">
 <input id="getButton" data-bind="click: displayDate, jqxButton: {theme: getDemoTheme()}" type="button" value="Get Value" />
 <input id="setButton" data-bind="click: setDate, jqxButton: {theme: getDemoTheme()}" type="button" value="Set Value" />
 <div data-bind="jqxCheckBox: {checked: disabled, width: '100px', theme: getDemoTheme()}" style='margin-top: 5px;' id="checkBox">Disabled</div>
 </div>
</body>
</html>
jqxGauge
Property Name Type
disabled observable
Determines whether the jqxGauge is enabled or disabled.

Code Example: 

<!DOCTYPE html>
<html lang="en">
<head>
 <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
 <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
 <script type="text/javascript" src="../../scripts/json2.js"></script> 
 <script type="text/javascript" src="../../scripts/knockout-3.0.0.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxknockout.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxchart.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxgauge.js"></script>
 <script type="text/javascript">
 $(document).ready(function () {
 var viewModel = function (value) {
 this.value = ko.observable(value);
 this.disabled = ko.observable(false);
 };
 ko.applyBindings(new viewModel(60));
 });
 </script>
</head>
<body class='default'>
 <div>
 <div style="float: left;" id="gaugeContainer" data-bind="jqxGauge: {ranges: [{ startValue: 0, endValue: 55, style: { fill: '#4bb648', stroke: '#4bb648' }, endWidth: 5, startWidth: 5 },
 { startValue: 25, endValue: 50, style: { fill: '#fbd109', stroke: '#fbd109' }, endWidth: 10, startWidth: 5 },
 { startValue: 50, endValue: 85, style: { fill: '#ff8000', stroke: '#ff8000' }, endWidth: 13, startWidth: 10 },
 { startValue: 85, endValue: 100, style: { fill: '#e02629', stroke: '#e02629' }, endWidth: 16, startWidth: 13 }],
 ticksMinor: { interval: 5, size: '5%' },
 ticksMajor: { interval: 10, size: '9%' },
 value: value,
 disabled: disabled,
 colorScheme: 'scheme05',
 animationDuration: 1200}">
 </div>
 <div data-bind="jqxLinearGauge: {orientation: 'vertical', width: 110, height: 350,
 ticksMajor: { size: '10%', interval: 10 },
 ticksMinor: { size: '5%', interval: 2.5, style: { 'stroke-width': 1, stroke: '#aaaaaa' } },
 value: value,
 disabled: disabled,
 pointer: { size: '5%' },
 colorScheme: 'scheme05',
 labels: {
 interval: 20, formatValue: function (value, position) {
 if (position === 'far') {
 value = (9 / 5) * value + 32;
 if (value === -76) {
 return '°F';
 }
 return value + '°';
 }
 if (value === -60) {
 return '°C';
 }
 return value + '°';
 }
 },
 ranges: [
 { startValue: 10, endValue: 30, style: { fill: '#FFF157', stroke: '#FFF157' } },
 { startValue: 30, endValue: 65, style: { fill: '#FFA200', stroke: '#FFA200' } },
 { startValue: 65, endValue: 100, style: { fill: '#FF4800', stroke: '#FF4800' } }],
 animationDuration: 1500}"
 style="margin-left: 50px; float: left;" id="linearGauge">
 </div>
 </div>
</body>
</html>
min observable
Sets the jqxGauge's min value.

Code Example: 

<!DOCTYPE html>
<html lang="en">
<head>
 <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
 <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
 <script type="text/javascript" src="../../scripts/json2.js"></script> 
 <script type="text/javascript" src="../../scripts/knockout-3.0.0.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxknockout.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxchart.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxgauge.js"></script>
 <script type="text/javascript">
 $(document).ready(function () {
 var viewModel = function (value) {
 this.value = ko.observable(value);
 this.min = ko.observable(0);
 this.max = ko.observable(100);
 };
 ko.applyBindings(new viewModel(60));
 });
 </script>
</head>
<body class='default'>
 <div>
 <div style="float: left;" id="gaugeContainer" data-bind="jqxGauge: {ranges: [{ startValue: 0, endValue: 55, style: { fill: '#4bb648', stroke: '#4bb648' }, endWidth: 5, startWidth: 5 },
 { startValue: 25, endValue: 50, style: { fill: '#fbd109', stroke: '#fbd109' }, endWidth: 10, startWidth: 5 },
 { startValue: 50, endValue: 85, style: { fill: '#ff8000', stroke: '#ff8000' }, endWidth: 13, startWidth: 10 },
 { startValue: 85, endValue: 100, style: { fill: '#e02629', stroke: '#e02629' }, endWidth: 16, startWidth: 13 }],
 ticksMinor: { interval: 5, size: '5%' },
 ticksMajor: { interval: 10, size: '9%' },
 value: value,
 min: min,
 max: max,
 colorScheme: 'scheme05',
 animationDuration: 1200}">
 </div>
 <div data-bind="jqxLinearGauge: {orientation: 'vertical', width: 110, height: 350,
 ticksMajor: { size: '10%', interval: 10 },
 ticksMinor: { size: '5%', interval: 2.5, style: { 'stroke-width': 1, stroke: '#aaaaaa' } },
 max: max,
 min: min,
 value: value,
 pointer: { size: '5%' },
 colorScheme: 'scheme05',
 labels: {
 interval: 20, formatValue: function (value, position) {
 if (position === 'far') {
 value = (9 / 5) * value + 32;
 if (value === -76) {
 return '°F';
 }
 return value + '°';
 }
 if (value === -60) {
 return '°C';
 }
 return value + '°';
 }
 },
 ranges: [
 { startValue: 10, endValue: 30, style: { fill: '#FFF157', stroke: '#FFF157' } },
 { startValue: 30, endValue: 65, style: { fill: '#FFA200', stroke: '#FFA200' } },
 { startValue: 65, endValue: 100, style: { fill: '#FF4800', stroke: '#FF4800' } }],
 animationDuration: 1500}"
 style="margin-left: 50px; float: left;" id="linearGauge">
 </div>
 </div>
</body>
</html>
max observable
Sets the jqxGauge's max value.

Code Example: 

<!DOCTYPE html>
<html lang="en">
<head>
 <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
 <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
 <script type="text/javascript" src="../../scripts/json2.js"></script> 
 <script type="text/javascript" src="../../scripts/knockout-3.0.0.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxknockout.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxchart.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxgauge.js"></script>
 <script type="text/javascript">
 $(document).ready(function () {
 var viewModel = function (value) {
 this.value = ko.observable(value);
 this.min = ko.observable(0);
 this.max = ko.observable(100);
 };
 ko.applyBindings(new viewModel(60));
 });
 </script>
</head>
<body class='default'>
 <div>
 <div style="float: left;" id="gaugeContainer" data-bind="jqxGauge: {ranges: [{ startValue: 0, endValue: 55, style: { fill: '#4bb648', stroke: '#4bb648' }, endWidth: 5, startWidth: 5 },
 { startValue: 25, endValue: 50, style: { fill: '#fbd109', stroke: '#fbd109' }, endWidth: 10, startWidth: 5 },
 { startValue: 50, endValue: 85, style: { fill: '#ff8000', stroke: '#ff8000' }, endWidth: 13, startWidth: 10 },
 { startValue: 85, endValue: 100, style: { fill: '#e02629', stroke: '#e02629' }, endWidth: 16, startWidth: 13 }],
 ticksMinor: { interval: 5, size: '5%' },
 ticksMajor: { interval: 10, size: '9%' },
 value: value,
 min: min,
 max: max,
 colorScheme: 'scheme05',
 animationDuration: 1200}">
 </div>
 <div data-bind="jqxLinearGauge: {orientation: 'vertical', width: 110, height: 350,
 ticksMajor: { size: '10%', interval: 10 },
 ticksMinor: { size: '5%', interval: 2.5, style: { 'stroke-width': 1, stroke: '#aaaaaa' } },
 max: max,
 min: min,
 value: value,
 pointer: { size: '5%' },
 colorScheme: 'scheme05',
 labels: {
 interval: 20, formatValue: function (value, position) {
 if (position === 'far') {
 value = (9 / 5) * value + 32;
 if (value === -76) {
 return '°F';
 }
 return value + '°';
 }
 if (value === -60) {
 return '°C';
 }
 return value + '°';
 }
 },
 ranges: [
 { startValue: 10, endValue: 30, style: { fill: '#FFF157', stroke: '#FFF157' } },
 { startValue: 30, endValue: 65, style: { fill: '#FFA200', stroke: '#FFA200' } },
 { startValue: 65, endValue: 100, style: { fill: '#FF4800', stroke: '#FF4800' } }],
 animationDuration: 1500}"
 style="margin-left: 50px; float: left;" id="linearGauge">
 </div>
 </div>
</body>
</html>
value observable
Sets the jqxGauge's value.

Code Example: 

<!DOCTYPE html>
<html lang="en">
<head>
 <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
 <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
 <script type="text/javascript" src="../../scripts/json2.js"></script> 
 <script type="text/javascript" src="../../scripts/knockout-3.0.0.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxknockout.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxchart.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxgauge.js"></script>
 <script type="text/javascript">
 $(document).ready(function () {
 var viewModel = function (value) {
 this.value = ko.observable(value);
 this.disabled = ko.observable(false);
 };
 ko.applyBindings(new viewModel(60));
 });
 </script>
</head>
<body class='default'>
 <div>
 <div style="float: left;" id="gaugeContainer" data-bind="jqxGauge: {ranges: [{ startValue: 0, endValue: 55, style: { fill: '#4bb648', stroke: '#4bb648' }, endWidth: 5, startWidth: 5 },
 { startValue: 25, endValue: 50, style: { fill: '#fbd109', stroke: '#fbd109' }, endWidth: 10, startWidth: 5 },
 { startValue: 50, endValue: 85, style: { fill: '#ff8000', stroke: '#ff8000' }, endWidth: 13, startWidth: 10 },
 { startValue: 85, endValue: 100, style: { fill: '#e02629', stroke: '#e02629' }, endWidth: 16, startWidth: 13 }],
 ticksMinor: { interval: 5, size: '5%' },
 ticksMajor: { interval: 10, size: '9%' },
 value: value,
 disabled: disabled,
 colorScheme: 'scheme05',
 animationDuration: 1200}">
 </div>
 <div data-bind="jqxLinearGauge: {orientation: 'vertical', width: 110, height: 350,
 ticksMajor: { size: '10%', interval: 10 },
 ticksMinor: { size: '5%', interval: 2.5, style: { 'stroke-width': 1, stroke: '#aaaaaa' } },
 value: value,
 disabled: disabled,
 pointer: { size: '5%' },
 colorScheme: 'scheme05',
 labels: {
 interval: 20, formatValue: function (value, position) {
 if (position === 'far') {
 value = (9 / 5) * value + 32;
 if (value === -76) {
 return '°F';
 }
 return value + '°';
 }
 if (value === -60) {
 return '°C';
 }
 return value + '°';
 }
 },
 ranges: [
 { startValue: 10, endValue: 30, style: { fill: '#FFF157', stroke: '#FFF157' } },
 { startValue: 30, endValue: 65, style: { fill: '#FFA200', stroke: '#FFA200' } },
 { startValue: 65, endValue: 100, style: { fill: '#FF4800', stroke: '#FF4800' } }],
 animationDuration: 1500}"
 style="margin-left: 50px; float: left;" id="linearGauge">
 </div>
 </div>
</body>
</html>
jqxSlider
Property Name Type
disabled observable
Determines whether the jqxSlider is enabled or disabled.
min observable
Sets the jqxSlider's min value.
max observable
Sets the Slider's max value.
value observable
Sets the jqxSlider's value.

Code Example: 

<!DOCTYPE html>
<html lang="en">
<head>
 <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
 <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
 <script type="text/javascript" src="../../scripts/json2.js"></script> 
 <script type="text/javascript" src="../../scripts/knockout-3.0.0.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxknockout.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxslider.js"></script>
 <script type="text/javascript">
 $(document).ready(function () {
 var viewModel = function (value) {
 this.value = ko.observable(value);
 this.min = ko.observable(0);
 this.max = ko.observable(100);
 this.disabled = ko.observable(false);
 };
 ko.applyBindings(new viewModel(20));
 });
 </script>
</head>
<body class='default'>
 <div data-bind="jqxSlider: {min: min, max: max, value: value, disabled: disabled, width: 300, height: 25, showTicks: false, mode: 'fixed'}"></div>
</body>
</html>

jqxScrollBar
Property Name Type
disabled observable
Determines whether the jqxScrollBar is enabled or disabled.
min observable
Sets the jqxScrollBar's min value.
max observable
Sets the jqxScrollBar's max value.
value observable
Sets the jqxScrollBar's value.

Code Example: 

<!DOCTYPE html>
<html lang="en">
<head>
 <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
 <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
 <script type="text/javascript" src="../../scripts/json2.js"></script> 
 <script type="text/javascript" src="../../scripts/knockout-3.0.0.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxknockout.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
 <script type="text/javascript">
 $(document).ready(function () {
 var viewModel = function (value, min, max) {
 this.value = ko.observable(value);
 this.min = ko.observable(0);
 this.max = ko.observable(max);
 this.validateValue = function () {
 if (this.value() > this.max()) this.value(parseFloat(this.max()));
 if (this.value() < this.min()) this.value(parseFloat(this.min()));
 }
 this.setMax = ko.computed({
 read: this.max,
 write: function (value) {
 if (!isNaN(value))
 this.max(parseFloat(value)); // Write to underlying storage
 if (value < this.min()) this.max(parseFloat(this.min()) + 1);
 this.validateValue();
 },
 owner: this
 });
 this.setMin = ko.computed({
 read: this.min,
 write: function (value) {
 if (!isNaN(value))
 this.min(parseFloat(value)); // Write to underlying storage
 if (value > this.max()) this.max(parseFloat(value) + 1);
 this.validateValue();
 },
 owner: this
 });
 this.setValue = ko.computed({
 read: this.value,
 write: function (value) {
 if (!isNaN(value))
 this.value(parseFloat(value)); // Write to underlying storage
 this.validateValue();
 },
 owner: this
 });
 this.disabled = ko.observable(false);
 };
 ko.applyBindings(new viewModel(100, 0, 1000));
 });
 </script>
</head>
<body class='default'>
 <div data-bind="jqxScrollBar: {min: min, max: max, value: value, disabled: disabled, width: 400, height: 18}"></div>
</body>
</html>
jqxRadioButton
Property Name Type
checked observable
Determines the jqxRadioButton's state.

Code Example: 

<!DOCTYPE html>
<html lang="en">
<head>
 <title id="Description">Integration of jqxRadioButton with Knockout</title>
 <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
 <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
 <script type="text/javascript" src="../../scripts/json2.js"></script> 
 <script type="text/javascript" src="../../scripts/knockout-3.0.0.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
 <script type="text/javascript" src="../../scripts/gettheme.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxknockout.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxradiobutton.js"></script>
 <script type="text/javascript">
 $(document).ready(function () {
 var viewModel = function () {
 this.count = 0;
 this.checked1 = ko.observable(true);
 this.checked2 = ko.observable(false);
 this.checked3 = ko.observable(false);
 this.disabled = ko.observable(false);
 // check checkbox.
 this.check = function () {
 this.checked1(true);
 }
 };
 ko.applyBindings(new viewModel());
 });
 </script>
</head>
<body class='default'>
 <div data-bind="jqxRadioButton: {checked: checked1, disabled: disabled, width: '120px', theme: getDemoTheme()}" style='margin-bottom: 10px;'>Radio Button 1</div>
 <div data-bind="jqxRadioButton: {checked: checked2, disabled: disabled, width: '120px', theme: getDemoTheme()}" style='margin-bottom: 10px;'>Radio Button 2</div>
 <div data-bind="jqxRadioButton: {checked: checked3, disabled: disabled, width: '120px', theme: getDemoTheme()}" style='margin-bottom: 10px;'>Radio Button 3</div>
 <input data-bind="click: check, jqxButton: {theme: getDemoTheme()}" type="button" value="Check First Item" />
 <div data-bind="jqxCheckBox: {checked: disabled, theme: getDemoTheme()}" style='margin-top: 5px;' id="checkBox">Disabled</div>
 <div style="margin-top: 10px;">
 <span>Radio Button 1:</span><span data-bind="text: checked1"></span>
 </div>
 <div>
 <span>Radio Button 2:</span><span data-bind="text: checked2"></span>
 </div>
 <div>
 <span>Radio Button 3:</span><span data-bind="text: checked3"></span>
 </div>
</body>
</html>
disabled observable
Determines whether the jqxRadioButton is enabled or disabled.
jqxNumberInput
Property Name Type
disabled observable
Determines whether the jqxNumberInput is enabled or disabled.
value observable
Sets the jqxNumberInput's value.

Code Example: 

<!DOCTYPE html>
<html lang="en">
<head>
 <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
 <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
 <script type="text/javascript" src="../../scripts/json2.js"></script> 
 <script type="text/javascript" src="../../scripts/knockout-3.0.0.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxnumberinput.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxknockout.js"></script>
 <script type="text/javascript">
 $(document).ready(function () { 
 var viewModel = function (number) {
 this.number = ko.observable(number);
 this.disabled = ko.observable(false);
 };
 
 ko.applyBindings(new viewModel(205.33));
 });
 </script>
</head>
<body class='default'>
 <div data-bind="jqxNumberInput: {value: number, disabled: disabled, spinButtons: true, width: '250px', height: '25px'}" style='margin-top: 3px;' id='jqxNumberInput'>
 </div>
</body>
</html>
jqxMaskedInput
Property Name Type
disabled observable
Determines whether the jqxMaskedInput is enabled or disabled.
value observable
Sets the jqxMaskedInput's value.

Code Example: 

<!DOCTYPE html>
<html lang="en">
<head>
 <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
 <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
 <script type="text/javascript" src="../../scripts/json2.js"></script> 
 <script type="text/javascript" src="../../scripts/knockout-3.0.0.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxmaskedinput.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxknockout.js"></script>
 <script type="text/javascript">
 $(document).ready(function () { 
 var viewModel = function (phone) {
 this.phoneNumber = ko.observable(phone);
 this.disabled = ko.observable(false);
 };
 
 ko.applyBindings(new viewModel("0014521665"));
 });
 </script>
</head>
<body>
 <div data-bind="jqxMaskedInput: {value: phoneNumber, mask: '(###)###-####', disabled: disabled, width: '250px', height: '25px'}">
 </div>
</body>
</html>
jqxProgressBar
Property Name Type
disabled observable
Determines whether the jqxProgressBar is enabled or disabled.
value observable
Sets the jqxProgressBar's value.

Code Example: 

<!DOCTYPE html>
<html lang="en">
<head>
 <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
 <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
 <script type="text/javascript" src="../../scripts/json2.js"></script> 
 <script type="text/javascript" src="../../scripts/knockout-3.0.0.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxknockout.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxprogressbar.js"></script>
 <script type="text/javascript">
 $(document).ready(function () {
 var viewModel = function (value) {
 this.value = ko.observable(value);
 this.disabled = ko.observable(false);
 };
 ko.applyBindings(new viewModel(50));
 });
 </script>
</head>
<body class='default'>
 <div data-bind="jqxProgressBar: {value: value, disabled: disabled, width: 400, height: 18}"></div>
</body>
</html>
jqxMenu
Property Name Type
disabled observable
Determines whether the jqxMenu is enabled or disabled.
source observableArray
Sets the jqxMenu's data source.

Code Example: 

<!DOCTYPE html>
<html lang="en">
<head>
 <title id="Description">Integration of jqxMenu with Knockout</title>
 <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
 <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
 <script type="text/javascript" src="../../scripts/json2.js"></script> 
 <script type="text/javascript" src="../../scripts/knockout-3.0.0.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
 <script type="text/javascript" src="../../scripts/gettheme.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxknockout.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
 <script type="text/javascript">
 $(document).ready(function () { 
 // Define a "Person" class that tracks its own name and children, and has a method to add a new child
 var Person = function (name, items) {
 this.label = name;
 this.items = items != undefined ? ko.observableArray(items) : ko.observableArray();
 this.visible = ko.observable(true);
 this.addSubItem = function () {
 if (this.items().length < 1) {
 this.items.push(new Person("New Item"));
 }
 else if (this.items().length == 1) {
 this.items.push(new Person("Last Item"));
 this.visible(false);
 }
 }
 }
 // The view model is an abstract description of the state of the UI, but without any knowledge of the UI technology (HTML)
 var viewModel = {
 people: [
 new Person("Annabelle", [new Person("Arnie"), new Person("Anders"), new Person("Apple")]),
 new Person("Bertie", [new Person("Boutros-Boutros"), new Person("Brianna"), new Person("Barbie"), new Person("Bee-bop")]),
 new Person("Charles", [new Person("Cayenne"), new Person("Cleopatra")])
 ],
 disabled: ko.observable(false)
 };
 ko.applyBindings(viewModel);
 });
 </script>
</head>
<body style='font-size: 13px; font-family: Verdana;' class='default'>
 <div>
 <div style="float: left; margin-left: 50px;">
 <div data-bind="jqxMenu: {source: people, disabled: disabled, width: 240, height: 30, theme: getDemoTheme()}" id="menu">
 </div>
 <div data-bind="jqxCheckBox: {checked: disabled, theme: getDemoTheme()}" style='margin-top: 5px;' id="checkBox">Disabled</div>
 </div>
 <div style="float: left;">
 <ul data-bind="foreach: people">
 <li>
 <div>
 <span data-bind="text: label"></span>
 </div>
 <ul data-bind="foreach: items">
 <li><span data-bind="text: label"></span><a style="margin-left: 3px;" href='#' data-bind='click: addSubItem, visible: visible'>Add Item</a>
 <ul data-bind="foreach: items">
 <li><span data-bind="text: label"></span>
 </ul>
 </li>
 </ul>
 </li>
 </ul>
 </div>
 </div>
</body>
</html>
jqxTree
Property Name Type
disabled observable
Determines whether the jqxTree is enabled or disabled.
source observableArray
Sets the jqxTree's data source.

Code Example: 

<!DOCTYPE html>
<html lang="en">
<head>
 <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
 <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
 <script type="text/javascript" src="../../scripts/json2.js"></script> 
 <script type="text/javascript" src="../../scripts/knockout-3.0.0.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
 <script type="text/javascript" src="../../scripts/gettheme.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxknockout.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxtree.js"></script>
 <script type="text/javascript">
 $(document).ready(function () { 
 // Define a "Person" class that tracks its own name and children, and has a method to add a new child
 var Person = function (name, items) {
 this.label = name;
 this.items = ko.observableArray(items);
 this.enabled = ko.observable(true);
 this.addItem = function () {
 if (this.items().length < 4) {
 this.items.push("New Item");
 }
 else if (this.items().length == 4) {
 this.items.push("Last Item");
 this.enabled(false);
 }
 }
 }
 // The view model is an abstract description of the state of the UI, but without any knowledge of the UI technology (HTML)
 var viewModel = {
 people: [
 new Person("Annabelle", ["Arnie", "Anders", "Apple"]),
 new Person("Bertie", ["Boutros-Boutros", "Brianna", "Barbie", "Bee-bop"]),
 new Person("Charles", ["Cayenne", "Cleopatra"])
 ],
 disabled: ko.observable(false)
 };
 ko.applyBindings(viewModel);
 $("#tree").jqxTree('expandAll');
 });
 </script>
</head>
<body style='font-size: 13px; font-family: Verdana;' class='default'>
 <div>
 <div style="float: left;">
 <ul data-bind="foreach: people">
 <li>
 <div>
 <span data-bind="text: label"></span><a href='#' data-bind='click: addItem, visible: enabled'> Add Item</a>
 </div>
 <ul data-bind="foreach: items">
 <li><span data-bind="text: $data"></span></li>
 </ul>
 </li>
 </ul>
 </div>
 <div style="float: left; margin-left: 50px;">
 <div data-bind="jqxTree: {source: people, disabled: disabled, theme: getDemoTheme()}" id="tree">
 </div>
 <div data-bind="jqxCheckBox: {checked: disabled, theme: getDemoTheme()}" style='margin-top: 5px;' id="checkBox">Disabled</div> 
 </div>
 </div>
</body>
</html>
jqxInput
Property Name Type
disabled observable
Determines whether the jqxInput is enabled or disabled.
source observableArray
Sets the jqxInput's data source.
value observable
Sets the jqxInput's value. 
<!DOCTYPE html>
<html lang="en">
<head>
 <title id="Description">Integration of jqxInput with Knockout.</title>
 <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
 <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
 <script type="text/javascript" src="../../scripts/json2.js"></script>
 <script type="text/javascript" src="../../scripts/knockout-3.0.0.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
 <script type="text/javascript" src="../../scripts/demos.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxinput.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxknockout.js"></script>
 <script type="text/javascript">
 $(document).ready(function () {
 // Here's my data model
 var ViewModel = function (first, last) {
 this.firstName = ko.observable(first);
 this.lastName = ko.observable(last);
 this.fullName = ko.computed(function () {
 // Knockout tracks dependencies automatically. It knows that fullName depends on firstName and lastName, because these get called when evaluating fullName.
 return this.firstName() + " " + this.lastName();
 }, this);
 };
 ko.applyBindings(new ViewModel("Planet", "Earth")); // This makes Knockout get to work
 });
 </script>
</head>
<body style='font-size: 13px; font-family: Verdana;' class='default'>
 <div>
 <p>First name:
 <input id="firstName" data-bind="jqxInput: {width: 200, height: 25, value: firstName}" /></p>
 <p>Last name:
 <input id="lastName" data-bind="jqxInput: {width: 200, height: 25, value: lastName}" /></p>
 <h2>Hello, <span data-bind='text: fullName'></span>!</h2>
 </div>
</body>
</html>
jqxWindow
Property Name Type
content observable
Sets the jqxWindow's content.

Code Example: 

<!DOCTYPE html>
<html lang="en">
<head>
 <title id="Description">Integration of jqxWindow with Knockout.</title>
 <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
 <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
 <script type="text/javascript" src="../../scripts/json2.js"></script>
 <script type="text/javascript" src="../../scripts/knockout-3.0.0.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
 <script type="text/javascript" src="../../scripts/demos.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxknockout.js"></script>
 <script type="text/javascript">
 $(document).ready(function () {
 // Here's my data model
 var ViewModel = function (title, content) {
 this.title = ko.observable(title);
 this.content = ko.observable(content);
 };
 ko.applyBindings(new ViewModel("Title", "Content")); // This makes Knockout get to work
 });
 </script>
</head>
<body style='font-size: 13px; font-family: Verdana;' class='default'>
 <div id="window" data-bind="jqxWindow: {content: content, title: title}"> 
 <div></div>
 </div>
</body>
</html>
title observable
Sets the jqxWindow's Title.

Code Example: 

<!DOCTYPE html>
<html lang="en">
<head>
 <title id="Description">Integration of jqxWindow with Knockout.</title>
 <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
 <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
 <script type="text/javascript" src="../../scripts/json2.js"></script>
 <script type="text/javascript" src="../../scripts/knockout-3.0.0.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
 <script type="text/javascript" src="../../scripts/demos.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxknockout.js"></script>
 <script type="text/javascript">
 $(document).ready(function () {
 // Here's my data model
 var ViewModel = function (title, content) {
 this.title = ko.observable(title);
 this.content = ko.observable(content);
 };
 ko.applyBindings(new ViewModel("Title", "Content")); // This makes Knockout get to work
 });
 </script>
</head>
<body style='font-size: 13px; font-family: Verdana;' class='default'>
 <div id="window" data-bind="jqxWindow: {content: content, title: title}"> 
 <div></div>
 </div>
</body>
</html>

AltStyle によって変換されたページ (->オリジナル) /