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:

  • Model: your application’s data. This data represents objects and operations in your business domain (e.g., bank accounts that can perform money transfers) and is independent of any UI. When using Knockout, you will usually make Ajax calls to some server-side code to read and write this stored model data.
  • View Model: a code representation of the data and UI operations. For example, if you’re implementing a Grid, your view model would be an object holding a list of items, and exposing methods to add, remove or update items.
  • View: this is the UI. The View gets all the user input and forwards it to the viewmodel. It displays information from the view model, sends commands to the view model (e.g., when the user clicks buttons), and updates whenever the state of the view model changes.

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:

  • Calendar
  • Chart
  • CheckBox
  • ComboBox
  • DateTimeInput
  • Docking
  • DropDownList
  • DropDownList with DataAdapter
  • Gauge
  • Grid
  • Paged Grid
  • Editable Grid
  • Grid and JSON data
  • ListBox
  • ListBox with DataAdapter
  • ListBox and JSON data
  • Masked Input
  • Menu
  • Number Input
  • ProgressBar
  • Radio Button
  • ScrollBar
  • Slider
  • Tree
  • Input
  • Window

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>