Javascript/jQuery UI Widgets

Show Demo List

Theme:

jQWidgets Directives for AngularJS

AngularJS is a JavaScript framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly. The integration between AngularJS and jQWidgets is implemented through a plug-in which we called jqxAngular. This plug-in includes AngularJS directives for all widgets.

Getting Started

Add references to jQuery, AngularJS and jQWidgets files.

<script type="text/javascript" src="jquery.js"></script><script type="text/javascript" src="angular.js"></script><script type="text/javascript" src="jqxcore.js"></script><script type="text/javascript" src="jqxangular.js"></script>

In the AngularJS app definition, pass the jqwidgets module dependency:

 var app = angular.module("app", ["jqwidgets"]);

Component Markup

To create a widget, you can simply make an HTML element matching the widget name, and add a "-" after "jqx". So if you want to use jqxButton, you would create a <jqx-button> element. Here is how the button would look like:

<jqx-button></jqx-button>

Example:

<!DOCTYPE><html ng-app="demoApp"><head>    <title>Button directive from attribute for AngularJS</title>    <link rel="stylesheet" type="text/css" href="../../jqwidgets/styles/jqx.base.css" />    <script type="text/javascript" src="../../scripts/angular.min.js"></script>    <script type="text/javascript" src="../../../scripts/jquery-1.11.1.min.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/jqxangular.js"></script>    <script type="text/javascript" src="../../scripts/demos.js"></script>    <script type="text/javascript">        var demoApp = angular.module("demoApp", ["jqwidgets"]);        demoApp.controller("demoController", function ($scope) {        });    </script></head><body>    <div ng-controller="demoController">        <jqx-button></jqx-button>    </div></body></html>

You can also create a widget by using an attribute or class.

<button jqx-button>Button</button>

or data-prefixed

<button data-jqx-button>Button</button>

Example:

<!DOCTYPE><html ng-app="demoApp"><head>    <title>Button directive from attribute for AngularJS</title>    <link rel="stylesheet" type="text/css" href="../../jqwidgets/styles/jqx.base.css" />    <script type="text/javascript" src="../../scripts/angular.min.js"></script>    <script type="text/javascript" src="../../../scripts/jquery-1.11.1.min.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/jqxangular.js"></script>    <script type="text/javascript" src="../../scripts/demos.js"></script>    <script type="text/javascript">        var demoApp = angular.module("demoApp", ["jqwidgets"]);        demoApp.controller("demoController", function ($scope) {        });    </script></head><body>    <div ng-controller="demoController">        <button jqx-button>Button</button>    </div></body></html>

These definitions are the equivalent of:

<button id="button"></button><script type="text/javascript">    $("#button").jqxButton();</script>

Widget configuration

You can set up a widget using jqx- attributes. Note: Strings should be quoted with single quotes according to the AngularJS standards. If the property is camel-cased, add a "-" right before the capitalized letter. So if we wanted to apply alternating rows to jqxGrid, we would do the follow:

<jqx-grid jqx-columns="columns" jqx-source="people" jqx-width="700" jqx-alt-rows="true"></jqx-grid>

The "jqx-source" attribute is a special attribute which can be used for setting the widget's data source to an object or property defined in the Controller.
The "jqx-settings" attribute can be used for setting the widget properties through an object defined in the Controller.

    <script type="text/javascript">        var demoApp = angular.module("demoApp", ["jqwidgets"]);        demoApp.controller("demoController", function ($scope) {            // Grid data.            $scope.people = [{                id: 1,                name: "Pedro",                age: 13            }, {                id: 2,                name: "Clara",                age: 22            }, {                id: 3,                name: "John",                age: 33            }, {                id: 4,                name: "Pier",                age: 27            }];            $scope.settings =            {                altrows: true,                width: 500,                height: 300,                source: $scope.people,                columns: [                    { text: 'Id', dataField: 'id', width: 150 },                    { text: 'Name', dataField: 'name', width: 200 },                    { text: 'Age', dataField: 'age', width: 150 }                ]            }        });    </script></head><body>    <div ng-controller="demoController">        <jqx-grid jqx-settings="settings"></jqx-grid>    </div></body></html>

After the initialization, the settings object defined in the controller is automatically extended with "apply" and "refresh" methods. By using "apply", you can invoke widget methods(explained in the "Invoking Methods" section below). The purpose of the "refresh" method is to refresh the widget manually after you changed values in the settings object. Invoking "refresh" without arguments will update all widget settings, but for best performance, you can also pass an Array argument with the settings which were changed and so the jqxAngular plugin will refresh only the necessary widget properties. You can pass a second argument when you call the "refresh" method for synchronizing the widget's instance properties with the settings object. This is usually useful when a property such as "selectedIndex" changes from user action and you do not listen to such event in your code for synchronizing the settings object.

<!DOCTYPE html><html ng-app="demoApp"><head>    <title id="Description">jqxComboBox directive for AngularJS</title>    <link rel="stylesheet" type="text/css" href="../../jqwidgets/styles/jqx.base.css" />    <script type="text/javascript" src="../../scripts/angular.min.js"></script>    <script type="text/javascript" src="../../../scripts/jquery-1.11.1.min.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../../jqwidgets/jqxcombobox.js"></script>    <script type="text/javascript" src="../../jqwidgets/jqxcombobox.js"></script>    <script type="text/javascript" src="../../jqwidgets/jqxangular.js"></script>    <script type="text/javascript" src="../../scripts/demos.js"></script>    <script type="text/javascript">        var demoApp = angular.module("demoApp", ["jqwidgets"]);        demoApp.controller("demoController", function ($scope) {            var data = new Array();            var firstNames = ["Nancy", "Andrew", "Janet", "Margaret", "Steven", "Michael", "Robert", "Laura", "Anne"];            var lastNames = ["Davolio", "Fuller", "Leverling", "Peacock", "Buchanan", "Suyama", "King", "Callahan", "Dodsworth"];            for (var i = 0; i < firstNames.length; i++) {                var row = {};                row["label"] = firstNames[i];                row["value"] = lastNames[i];                data[i] = row;            }            $scope.comboBoxSettings = {                source: data, itemHeight: 50, height: 25, width: 220,                renderer: function (index, label, value) {                    var datarecord = data[index];                    var imgurl = '../../images/' + label.toLowerCase() + '.png';                    var img = '<img height="30" width="25" src="' + imgurl + '"/>';                    var table = '<table style="color: inherit; font-size: inherit; font-style: inherit;"><tr><td style="width: 35px;">' + img + '</td><td>' + label + " " + value + '</td></tr></table>';                    return table;                },                renderSelectedItem: function (index, item) {                    return item.label + " " + item.value;                }            };            $scope.click = function () {                $scope.comboBoxSettings.width = 300;                $scope.comboBoxSettings.height = 40;                // refresh the width and height widget properties.                 $scope.comboBoxSettings.refresh(['width', 'height']);                                // If you call it without arguments, all defined settings in the comboBoxSettings object will by synchronized with the widget.                // $scope.comboBoxSettings.refresh();            };            $scope.apply = function () {                // call apply to select the index.                $scope.comboBoxSettings.apply('selectIndex', 4);                // The above is equal to:                // $scope.comboBoxSettings.jqxComboBox('selectIndex', 4);                //            }            $scope.selectedValue = data[0];        });    </script></head><body>    <div ng-controller="demoController">        <jqx-combo-box ng-model="selectedValue" jqx-ng-model jqx-settings="comboBoxSettings"></jqx-combo-box>        <br />        <br />        Selected: {{selectedValue.label + " " + selectedValue.value}}        <br />        <jqx-button ng-click="click()">Set Width and Height</jqx-button>        <jqx-button ng-click="apply()">Call Method</jqx-button>    </div></body></html>

For automatic refreshes, you can add the "jqx-watch-settings" attribute to your HTML Element. By doing that the plugin will watch for changes in the settings object and will refresh the widget if necessary.

<!DOCTYPE html><html ng-app="demoApp"><head>    <title id="Description">jqxComboBox directive for AngularJS</title>    <link rel="stylesheet" type="text/css" href="../../jqwidgets/styles/jqx.base.css" />    <script type="text/javascript" src="../../scripts/angular.min.js"></script>    <script type="text/javascript" src="../../../scripts/jquery-1.11.1.min.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../../jqwidgets/jqxcombobox.js"></script>    <script type="text/javascript" src="../../jqwidgets/jqxcombobox.js"></script>    <script type="text/javascript" src="../../jqwidgets/jqxangular.js"></script>    <script type="text/javascript" src="../../scripts/demos.js"></script>    <script type="text/javascript">        var demoApp = angular.module("demoApp", ["jqwidgets"]);        demoApp.controller("demoController", function ($scope) {            var data = new Array();            var firstNames = ["Nancy", "Andrew", "Janet", "Margaret", "Steven", "Michael", "Robert", "Laura", "Anne"];            var lastNames = ["Davolio", "Fuller", "Leverling", "Peacock", "Buchanan", "Suyama", "King", "Callahan", "Dodsworth"];            for (var i = 0; i < firstNames.length; i++) {                var row = {};                row["label"] = firstNames[i];                row["value"] = lastNames[i];                data[i] = row;            }            $scope.comboBoxSettings = {                source: data, itemHeight: 50, height: 25, width: 220,                renderer: function (index, label, value) {                    var datarecord = data[index];                    var imgurl = '../../images/' + label.toLowerCase() + '.png';                    var img = '<img height="30" width="25" src="' + imgurl + '"/>';                    var table = '<table style="color: inherit; font-size: inherit; font-style: inherit;"><tr><td style="width: 35px;">' + img + '</td><td>' + label + " " + value + '</td></tr></table>';                    return table;                },                renderSelectedItem: function (index, item) {                    return item.label + " " + item.value;                }            };            $scope.click = function () {                $scope.comboBoxSettings.width = 300;                $scope.comboBoxSettings.height = 40;            };            $scope.selectedValue = data[0];        });    </script></head><body>    <div ng-controller="demoController">        <jqx-combo-box ng-model="selectedValue" jqx-watch-settings jqx-ng-model jqx-settings="comboBoxSettings"></jqx-combo-box>        <br />        <br />        Selected: {{selectedValue.label + " " + selectedValue.value}}        <br />        <jqx-button ng-click="click()">Set Width and Height</jqx-button>    </div></body></html>

The "jqx-watch" attribute can be used for performing an object equality watch. When there is a change in the watched property's value or any of its inner properties, the widget will perform an automatic update. The attribute can be used for watching changes in multiple properties. Example: jqx-watch="[calendarSettings.firstDayOfWeek, calendarSettings.width]"

<!DOCTYPE html><html ng-app="demoApp"><head>    <title id="Description">jqxChart directive for AngularJS</title>    <link rel="stylesheet" type="text/css" href="../../jqwidgets/styles/jqx.base.css" />    <script type="text/javascript" src="../../scripts/angular.min.js"></script>    <script type="text/javascript" src="../../../scripts/jquery-1.11.1.min.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/jqxdraw.js"></script>    <script type="text/javascript" src="../../jqwidgets/jqxchart.core.js"></script>    <script type="text/javascript" src="../../jqwidgets/jqxangular.js"></script>    <script type="text/javascript" src="../../scripts/demos.js"></script>    <script type="text/javascript">        var demoApp = angular.module("demoApp", ["jqwidgets"]);        demoApp.controller("demoController", function ($scope) {            var dataAdapter = new $.jqx.dataAdapter( {                datatype: "csv",                datafields: [                    { name: 'Country' },                    { name: 'GDP' },                    { name: 'DebtPercent' },                    { name: 'Debt' }                ],                url: '../../sampledata/gdp_dept_2010.txt'            }, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } });            // prepare jqxChart settings            $scope.chartSettings = {                title: "Economic comparison",                description: "GDP and Debt in 2010",                showLegend: true,                enableAnimations: true,                padding: { left: 5, top: 5, right: 50, bottom: 5 },                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },                source: dataAdapter,                xAxis:                    {                        dataField: 'Country',                        showGridLines: true                    },                colorScheme: 'scheme01',                seriesGroups:                    [                        {                            type: 'column',                            columnsGapPercent: 50,                            valueAxis:                            {                                unitInterval: 5000,                                displayValueAxis: true,                                description: 'GDP & Debt per Capita($)'                            },                            series: [                                    { dataField: 'GDP', displayText: 'GDP per Capita' },                                    { dataField: 'Debt', displayText: 'Debt per Capita' }                            ]                        },                        {                            type: 'line',                            valueAxis:                            {                                unitInterval: 10,                                displayValueAxis: false,                                description: 'Debt (% of GDP)'                            },                            series: [                                    { dataField: 'DebtPercent', displayText: 'Debt (% of GDP)' }                            ]                        }                    ]            };            $scope.setLineChartType = function () {                $scope.chartSettings.seriesGroups[0].type = 'line';            }        });    </script></head><body>    <div ng-controller="demoController">        <jqx-chart jqx-settings="chartSettings" jqx-watch="chartSettings.seriesGroups" style="width: 850px; height: 500px;"></jqx-chart>        <br />        <jqx-button jqx-on-click="setLineChartType()">Set Line Chart Type</jqx-button>     </div></body></html>

The "jqx-create" attribute can be used for creating the widget on demand or with some delay. For example, you may want the widget to be created after some other action like when an Ajax call is completed or when the widget's settings object is available.

<!DOCTYPE><html ng-app="demoApp"><head>    <title>Binding to JSON</title>    <link rel="stylesheet" type="text/css" href="../../jqwidgets/styles/jqx.base.css" />    <script type="text/javascript" src="../../scripts/angular.min.js"></script>    <script type="text/javascript" src="../../../scripts/jquery-1.11.1.min.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/jqxcheckbox.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/jqxmenu.js"></script>    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script>    <script type="text/javascript" src="../../jqwidgets/jqxangular.js"></script>    <script type="text/javascript" src="../../scripts/demos.js"></script>    <script type="text/javascript">        var demoApp = angular.module("demoApp", ["jqwidgets"]);        demoApp.controller("demoController", function ($scope, $http) {            $scope.createWidget = false;            $http({                method: 'get',                url: '../../sampledata/beverages.txt'            }).success(function (data, status) {                // prepare the data                var source =                {                    datatype: "json",                    datafields: [                        { name: 'name', type: 'string' },                        { name: 'type', type: 'string' },                        { name: 'calories', type: 'int' },                        { name: 'totalfat', type: 'string' },                        { name: 'protein', type: 'string' }                    ],                    id: 'id',                    localdata: data                };                var dataAdapter = new $.jqx.dataAdapter(source);                $scope.gridSettings =                {                    width: 850,                    source: dataAdapter,                    columnsresize: true,                    columns: [                      { text: 'Name', datafield: 'name', width: 250 },                      { text: 'Beverage Type', datafield: 'type', width: 250 },                      { text: 'Calories', datafield: 'calories', width: 180 },                      { text: 'Total Fat', datafield: 'totalfat', width: 120 },                      { text: 'Protein', datafield: 'protein', minwidth: 120 }                    ]                };                $scope.createWidget = true;            }).error(function (data, status) {                // Some error occurred            });        });    </script></head><body>    <div ng-controller="demoController">        <jqx-grid jqx-create="createWidget" jqx-settings="gridSettings"></jqx-grid>    </div></body></html>

Invoking Methods

The "jqx-instance" attribute can be used for setting the widget instance in the Controller. You will have to initialize an empty object in the Controller and then set the "jqx-instance" attribute to point to it. The instance will allow you to easily invoke widget methods.

<!DOCTYPE><html ng-app="demoApp"><head>    <title>Grid directive for AngularJS</title>    <link rel="stylesheet" type="text/css" href="../../jqwidgets/styles/jqx.base.css" />    <script type="text/javascript" src="../../scripts/angular.min.js"></script>    <script type="text/javascript" src="../../../scripts/jquery-1.11.1.min.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/jqxcheckbox.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/jqxmenu.js"></script>    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>    <script type="text/javascript" src="../../jqwidgets/jqxangular.js"></script>    <script type="text/javascript" src="../../scripts/demos.js"></script>    <script type="text/javascript">        var demoApp = angular.module("demoApp", ["jqwidgets"]);        demoApp.controller("demoController", function ($scope) {            // Grid data.            $scope.people = [{                id: 1,                name: "Pedro",                age: 13            }, {                id: 2,                name: "Clara",                age: 22            }, {                id: 3,                name: "John",                age: 33            }, {                id: 4,                name: "Pier",                age: 27            }];            $scope.grid = {};            $scope.settings =            {                altrows: true,                width: 500,                height: 300,                ready: function()                {                    $scope.grid.selectrow(1);                },                source: $scope.people,                columns: [                    { text: 'Id', dataField: 'id', width: 150 },                    { text: 'Name', dataField: 'name', width: 200 },                    { text: 'Age', dataField: 'age', width: 150 }                ]            }        });    </script></head><body>    <div ng-controller="demoController">        <jqx-grid jqx-instance="grid" jqx-settings="settings"></jqx-grid>    </div></body></html>

By using the "jqx-instance" attribute, you can invoke a method using the syntax in the above example. To call a method, you can also use the object bound to the "jqx-settings" attribute. The widget's directive automatically extends that object by adding a function called apply to that object and you can use it to invoke a method of the widget. You can also use the widget's name instead of apply.

$scope.settings ={    altrows: true,    width: 500,    height: 300,    ready: function()    {        $scope.settings.apply('selectrow', 1);    },    source: $scope.people,    columns: [        { text: 'Id', dataField: 'id', width: 150 },        { text: 'Name', dataField: 'name', width: 200 },        { text: 'Age', dataField: 'age', width: 150 }    ]}

$scope.settings ={    altrows: true,    width: 500,    height: 300,    ready: function()    {        $scope.settings.jqxGrid('selectrow', 1);    },    source: $scope.people,    columns: [        { text: 'Id', dataField: 'id', width: 150 },        { text: 'Name', dataField: 'name', width: 200 },        { text: 'Age', dataField: 'age', width: 150 }    ]}

If you need to compile a widget's html tag manually, you can use the $.jqx.angularCompile function and pass a DOM element as function argument.

Binding to Events

You can define events in the HTML markup, or in the settings object bound to the "jqx-settings" attribute. To define events in the markup, you can use the "jqx-on" prefix.

Example with callback function and the "jqx-on" prefix:

<!DOCTYPE><html ng-app="demoApp"><head>    <title>Grid directive for AngularJS</title>    <link rel="stylesheet" type="text/css" href="../../jqwidgets/styles/jqx.base.css" />    <script type="text/javascript" src="../../scripts/angular.min.js"></script>    <script type="text/javascript" src="../../../scripts/jquery-1.11.1.min.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/jqxcheckbox.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/jqxmenu.js"></script>    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>    <script type="text/javascript" src="../../jqwidgets/jqxangular.js"></script>    <script type="text/javascript" src="../../scripts/demos.js"></script>    <script type="text/javascript">        var demoApp = angular.module("demoApp", ["jqwidgets"]);        demoApp.controller("demoController", function ($scope) {            // Grid data.            $scope.people = [{                id: 1,                name: "Pedro",                age: 13            }, {                id: 2,                name: "Clara",                age: 22            }, {                id: 3,                name: "John",                age: 33            }, {                id: 4,                name: "Pier",                age: 27            }];            $scope.grid = {};            $scope.settings =            {                altrows: true,                width: 500,                height: 300,                ready: function()                {                    $scope.grid.selectrow(1);                },                source: $scope.people,                columns: [                    { text: 'Id', dataField: 'id', width: 150 },                    { text: 'Name', dataField: 'name', width: 200 },                    { text: 'Age', dataField: 'age', width: 150 }                ]            }            $scope.bindingComplete = function (event) {                alert("binding is completed");            }        });    </script></head><body>    <div ng-controller="demoController">        <jqx-grid jqx-on-bindingcomplete="bindingComplete()" jqx-instance="grid" jqx-settings="settings"></jqx-grid>    </div></body></html>

Example with AngularJS $on and the "jqx-on" prefix:

<!DOCTYPE><html ng-app="demoApp"><head>    <title>Grid directive for AngularJS</title>    <link rel="stylesheet" type="text/css" href="../../jqwidgets/styles/jqx.base.css" />    <script type="text/javascript" src="../../scripts/angular.min.js"></script>    <script type="text/javascript" src="../../../scripts/jquery-1.11.1.min.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/jqxcheckbox.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/jqxmenu.js"></script>    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>    <script type="text/javascript" src="../../jqwidgets/jqxangular.js"></script>    <script type="text/javascript" src="../../scripts/demos.js"></script>    <script type="text/javascript">        var demoApp = angular.module("demoApp", ["jqwidgets"]);        demoApp.controller("demoController", function ($scope) {            // Grid data.            $scope.people = [{                id: 1,                name: "Pedro",                age: 13            }, {                id: 2,                name: "Clara",                age: 22            }, {                id: 3,                name: "John",                age: 33            }, {                id: 4,                name: "Pier",                age: 27            }];            $scope.grid = {};            $scope.settings =            {                altrows: true,                width: 500,                height: 300,                ready: function()                {                    $scope.grid.selectrow(1);                },                source: $scope.people,                columns: [                    { text: 'Id', dataField: 'id', width: 150 },                    { text: 'Name', dataField: 'name', width: 200 },                    { text: 'Age', dataField: 'age', width: 150 }                ]            }            $scope.$on('bindingComplete', function (event) {                alert("binding is completed");            });        });    </script></head><body>    <div ng-controller="demoController">        <jqx-grid jqx-on-bindingcomplete="bindingComplete" jqx-instance="grid" jqx-settings="settings"></jqx-grid>    </div></body></html>

Example with a callback function defined in the settings object:

<!DOCTYPE><html ng-app="demoApp"><head>    <title>Grid directive for AngularJS</title>    <link rel="stylesheet" type="text/css" href="../../jqwidgets/styles/jqx.base.css" />    <script type="text/javascript" src="../../scripts/angular.min.js"></script>    <script type="text/javascript" src="../../../scripts/jquery-1.11.1.min.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/jqxcheckbox.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/jqxmenu.js"></script>    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>    <script type="text/javascript" src="../../jqwidgets/jqxangular.js"></script>    <script type="text/javascript" src="../../scripts/demos.js"></script>    <script type="text/javascript">        var demoApp = angular.module("demoApp", ["jqwidgets"]);        demoApp.controller("demoController", function ($scope) {            // Grid data.            $scope.people = [{                id: 1,                name: "Pedro",                age: 13            }, {                id: 2,                name: "Clara",                age: 22            }, {                id: 3,                name: "John",                age: 33            }, {                id: 4,                name: "Pier",                age: 27            }];            $scope.grid = {};            $scope.settings =            {                altrows: true,                width: 500,                height: 300,                ready: function()                {                    $scope.grid.selectrow(1);                },                source: $scope.people,                columns: [                    { text: 'Id', dataField: 'id', width: 150 },                    { text: 'Name', dataField: 'name', width: 200 },                    { text: 'Age', dataField: 'age', width: 150 }                ],                bindingcomplete: function (event) {                    alert("binding is completed");                }            }        });    </script></head><body>    <div ng-controller="demoController">        <jqx-grid jqx-instance="grid" jqx-settings="settings"></jqx-grid>    </div></body></html>

When a widget is created, the plug-in raises an event with the following name: 'widget name' + 'Created', i.e for jqxDropDownList, the event name is 'jqxDropDownListCreated'.
The event arguments are:

element - the widget's HTML Element
id - the widget's id
name - the widget's name
scope - the widget's scope
instance - the widget's instnace

Example:

<!DOCTYPE><html ng-app="demoApp"><head>    <title>Event Handling using jqxAngular plug-in</title>    <link rel="stylesheet" type="text/css" href="../../jqwidgets/styles/jqx.base.css" />    <script type="text/javascript" src="../../scripts/angular.min.js"></script>    <script type="text/javascript" src="../../../scripts/jquery-1.11.1.min.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../../jqwidgets/jqxangular.js"></script>    <script type="text/javascript" src="../../scripts/demos.js"></script>    <script type="text/javascript">        var demoApp = angular.module("demoApp", ["jqwidgets"]);        demoApp.controller("demoController", function ($scope) {            $scope.people = [{                id: 1,                name: "Nancy",                age: 52            }, {                id: 2,                name: "Andrew",                age: 31            }, {                id: 3,                name: "Robert",                age: 40            }, {                id: 4,                name: "Peter",                age: 28            }];                   // init DropDownList's settings object.            $scope.dropDownListSettings =            {                width: 200,                height: 30,                autoDropDownHeight: true,                displayMember: "name",                valueMember: "id",                source: $scope.people            }             $scope.$on('jqxDropDownListCreated', function (event, arguments) {            });        });    </script></head><body>    <div ng-controller="demoController">        <jqx-drop-down-list jqx-settings="dropDownListSettings"></jqx-drop-down-list>    </div></body></html>

if you work with jqxSettings, you can also define a "created" callback function in the settings object. We call that function when the widget is created and initialized and pass a JSON object as argument. That JSON object is equal to the one passed in the "created" event described above.

Using ngModel

The inputs and lists like jqxInput, jqxPasswordInput, jqxNumberInput, jqxDateTimeInput, jqxChecBox, jqxRadioButton, jqxListBox, jqxDropDownList, jqxComboBox, jqxSlider, jqxRating, jqxCalendar support the ngModel directive which binds the widget's value to a property on the scope. When you use the ngModel, you will get the widget's value as a string, unless you add the jqx-ng-model attribute. For example, a ListBox with Items and each item is an object. By using ngModel, you will get the item's value. By adding jqxNgModel, you will get the item's object. A similar case is the jqxDateTimeInput, by default you can bind it to a text, but if you add jqxNgModel, you can get the widget's value which is a JavaScript Date object or if you use the widget in range selection mode, it will be an object with "from" and "to" members where from and to are JavaScript Date objects.
The jqxRadiobutton directive supports the "value" argument which is the value to which the expression should be set when selected.
The jqxCheckBox directive supports the "ngTrueValue" and "ngFalseValue" arguments which represent the value to which the expression should be set when selected and not selected.

<!DOCTYPE><html ng-app="demoApp"><head>    <title>Using ngModel with jQWidgets</title>    <link rel="stylesheet" type="text/css" href="../../jqwidgets/styles/jqx.base.css" />    <script type="text/javascript" src="../../scripts/angular.min.js"></script>    <script type="text/javascript" src="../../../scripts/jquery-1.11.1.min.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/jqxcheckbox.js"></script>    <script type="text/javascript" src="../../jqwidgets/jqxinput.js"></script>    <script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script>    <script type="text/javascript" src="../../jqwidgets/jqxradiobutton.js"></script>    <script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script>    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../../jqwidgets/globalization/globalize.js"></script>    <script type="text/javascript" src="../../jqwidgets/jqxangular.js"></script>    <script type="text/javascript" src="../../scripts/demos.js"></script>    <script type="text/javascript">        var demoApp = angular.module("demoApp", ["jqwidgets"]);        demoApp.controller("demoController", function ($scope) {            $scope.user = {                name: "Brian",                working: true,                birthDate: new Date(1980, 3, 2),                friends: [                    "Peter",                    "Nancy",                    "Michael",                    "John",                    "Robert"                ],                bestFriend: "Peter",                married: true,                color: "Blue",                car: true,                children: 'YES'            };        });    </script></head><body>    <div ng-controller="demoController">        <form name="userForm">            <jqx-input jqx-width="200" jqx-height="25" name="userName" ng-model="user.name"></jqx-input>            <br />            <br />            <jqx-date-time-input  jqx-width="200" jqx-height="25" ng-model="user.birthDate"></jqx-date-time-input>            <br />            <jqx-drop-down-list jqx-auto-drop-down-height="true" jqx-width="200" jqx-height="25" jqx-source="user.friends" ng-model="user.bestFriend"></jqx-drop-down-list>            <br />            <jqx-check-box ng-model="user.working">Working</jqx-check-box>            <br />            <jqx-radio-button jqx-group-name="'married'" value="true" ng-model="user.married">Married</jqx-radio-button>            <br />            <jqx-radio-button jqx-group-name="'married'" value="false" ng-model="user.married">Not Married</jqx-radio-button>            <br />            Favorite Color:            <br /><br />            <jqx-radio-button jqx-group-name="'colors'" value="'Green'" ng-model="user.color">Green</jqx-radio-button>            <br />            <jqx-radio-button jqx-group-name="'colors'" value="'Blue'" ng-model="user.color">Blue</jqx-radio-button>            <br />            <jqx-check-box  ng-model="user.car">Car</jqx-check-box>            <br />            <jqx-check-box ng-true-value="'YES'" ng-false-value="'NO'" ng-model="user.children">Children</jqx-check-box>         </form>        <pre>user.name = <span ng-bind="user.name"></span></pre>        <pre>user.working = <span ng-bind="user.working"></span></pre>        <pre>user.birthDate = <span ng-bind="user.birthDate"></span></pre>        <pre>user.bestFriend = <span ng-bind="user.bestFriend"></span></pre>        <pre>user.married = <span ng-bind="user.married"></span></pre>        <pre>user.color = <span ng-bind="user.color"></span></pre>        <pre>user.car = <span ng-bind="user.car"></span></pre>        <pre>user.children = <span ng-bind="user.children"></span></pre>    </div></body></html>

When the model is changed, the plug-in raises an event with the following name: 'widget name' + 'ModelChange' i.e for jqxDropDownList, the event name is 'jqxDropDownListModelChange'.

Asynchronous module definition

The jqxAngular plugin can automatically detect and load the required javascript files of any widget, if you do not wish to do that manually.
In the example below, the required javascript files are defined manually. In order the Grid widget to run, you have to load the jqxcore.js, jqxdata.js, jqxbuttons.js, jqxcheckbox.js, jqxgrid.js, jqxgrid.selection.js, jqxmenu.js, jqxscrollbar.js, jqxgrid.sort.js, jqxangular.js.

<!DOCTYPE html><html ng-app="demoApp"><head>    <title id="Description">jqxGrid directive for AngularJS</title>    <link rel="stylesheet" type="text/css" href="../../jqwidgets/styles/jqx.base.css" />    <script type="text/javascript" src="../../scripts/angular.min.js"></script>    <script type="text/javascript" src="../../../scripts/jquery-1.11.1.min.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/jqxcheckbox.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/jqxmenu.js"></script>    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>    <script type="text/javascript" src="../../jqwidgets/jqxangular.js"></script>    <script type="text/javascript" src="../../scripts/demos.js"></script>    <script type="text/javascript">        var demoApp = angular.module("demoApp", ["jqwidgets"]);        demoApp.controller("demoController", function ($scope) {            // Grid data.            var data = new Array();            var firstNames = ["Nancy", "Andrew", "Janet", "Margaret", "Steven", "Michael", "Robert", "Laura", "Anne"];            var lastNames = ["Davolio", "Fuller", "Leverling", "Peacock", "Buchanan", "Suyama", "King", "Callahan", "Dodsworth"];            var titles = ["Sales Representative", "Vice President, Sales", "Sales Representative", "Sales Representative", "Sales Manager", "Sales Representative", "Sales Representative", "Inside Sales Coordinator", "Sales Representative"];            var address = ["507 - 20th Ave. E. Apt. 2A", "908 W. Capital Way", "722 Moss Bay Blvd.", "4110 Old Redmond Rd.", "14 Garrett Hill", "Coventry House", "Miner Rd.", "Edgeham Hollow", "Winchester Way", "4726 - 11th Ave. N.E.", "7 Houndstooth Rd."];            var city = ["Seattle", "Tacoma", "Kirkland", "Redmond", "London", "London", "London", "Seattle", "London"];            var country = ["USA", "USA", "USA", "USA", "UK", "UK", "UK", "USA", "UK"];                  for (var i = 0; i < firstNames.length; i++) {                var row = {};                row["firstname"] = firstNames[i];                row["lastname"] = lastNames[i];                row["title"] = titles[i];                row["address"] = address[i];                row["city"] = city[i];                row["country"] = country[i];                data[i] = row;            }            $scope.people = data;            $scope.columns =            [                { text: 'Name', datafield: 'firstname', width: 120 },                { text: 'Last Name', datafield: 'lastname', width: 120 },                { text: 'Title', datafield: 'title', width: 180 },                { text: 'Address', datafield: 'address', width: 180},                { text: 'City', datafield: 'city', width: 90 },                { text: 'Country', datafield: 'country' }            ];        });    </script></head><body>    <div ng-controller="demoController">        <jqx-grid jqx-columns="columns" jqx-sortable="true" jqx-source="people" jqx-width="800"  jqx-height="200" jqx-alt-rows="true"></jqx-grid>    </div></body></html>

With the jqxAngular plugin's "jqwidgets-amd" module, you may only load jqxcore.js and jqxangular.js files and the rest of the files will be loaded by the plugin.

<!DOCTYPE html><html ng-app="demoApp"><head>    <title id="Description">jqxGrid directive for AngularJS</title>    <link rel="stylesheet" type="text/css" href="../../jqwidgets/styles/jqx.base.css" />    <script type="text/javascript" src="../../scripts/angular.min.js"></script>    <script type="text/javascript" src="../../../scripts/jquery-1.11.1.min.js"></script>    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../../jqwidgets/jqxangular.js"></script>    <script type="text/javascript" src="../../scripts/demos.js"></script>    <script type="text/javascript">        var demoApp = angular.module("demoApp", ["jqwidgets", "jqwidgets-amd"]);        demoApp.controller("demoController", function ($scope) {            // Grid data.            var data = new Array();            var firstNames = ["Nancy", "Andrew", "Janet", "Margaret", "Steven", "Michael", "Robert", "Laura", "Anne"];            var lastNames = ["Davolio", "Fuller", "Leverling", "Peacock", "Buchanan", "Suyama", "King", "Callahan", "Dodsworth"];            var titles = ["Sales Representative", "Vice President, Sales", "Sales Representative", "Sales Representative", "Sales Manager", "Sales Representative", "Sales Representative", "Inside Sales Coordinator", "Sales Representative"];            var address = ["507 - 20th Ave. E. Apt. 2A", "908 W. Capital Way", "722 Moss Bay Blvd.", "4110 Old Redmond Rd.", "14 Garrett Hill", "Coventry House", "Miner Rd.", "Edgeham Hollow", "Winchester Way", "4726 - 11th Ave. N.E.", "7 Houndstooth Rd."];            var city = ["Seattle", "Tacoma", "Kirkland", "Redmond", "London", "London", "London", "Seattle", "London"];            var country = ["USA", "USA", "USA", "USA", "UK", "UK", "UK", "USA", "UK"];                  for (var i = 0; i < firstNames.length; i++) {                var row = {};                row["firstname"] = firstNames[i];                row["lastname"] = lastNames[i];                row["title"] = titles[i];                row["address"] = address[i];                row["city"] = city[i];                row["country"] = country[i];                data[i] = row;            }            $scope.people = data;            $scope.columns =            [                { text: 'Name', datafield: 'firstname', width: 120 },                { text: 'Last Name', datafield: 'lastname', width: 120 },                { text: 'Title', datafield: 'title', width: 180 },                { text: 'Address', datafield: 'address', width: 180},                { text: 'City', datafield: 'city', width: 90 },                { text: 'Country', datafield: 'country' }            ];        });    </script></head><body>    <div ng-controller="demoController">        <jqx-grid jqx-columns="columns" jqx-sortable="true" jqx-source="people" jqx-width="800"  jqx-height="200" jqx-alt-rows="true"></jqx-grid>    </div></body></html>

When the scripts of a particular widget are loaded, the plug-in raises an event with the following name: 'widget name' + 'ScriptsLoaded', i.e for jqxGrid, the event name is 'jqxGridScriptsLoaded'. When we raise that event, we pass a JSON object with the following members:

element - the widget's HTML Element
name - the widget's name
scope - the widget's scope

. An additional "jQWidgetsScriptsLoaded" event is raised when all widgets javascript files are loaded.

<!DOCTYPE html><html ng-app="demoApp" lang="en"><head>    <title id='Description'>This example illustrates how to asynchronously load the required files.</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/angular.min.js"></script>    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../../jqwidgets/jqxangular.js"></script>    <script type="text/javascript" src="../../scripts/demos.js"></script>    <script type="text/javascript" src="../../sampledata/generatedata.js"></script>    <script type="text/javascript">        var demoApp = angular.module("demoApp", ["jqwidgets", "jqwidgets-amd"]);        demoApp.controller("demoController", function ($scope, $http) {            var data = generatedata(500);            var source =            {                localdata: data,                datafields:                [                    { name: 'name', type: 'string' },                    { name: 'productname', type: 'string' },                    { name: 'available', type: 'bool' },                    { name: 'date', type: 'date'},                    { name: 'quantity', type: 'number' }                ],                datatype: "array"            };            $scope.gridSettings =            {                width: 850,                showfilterrow: true,                filterable: true,                selectionmode: 'multiplecellsextended',                columns: [                  { text: 'Name', columntype: 'textbox', filtertype: 'input', datafield: 'name', width: 215 },                  {                      text: 'Product', filtertype: 'checkedlist', datafield: 'productname', width: 220                  },                  { text: 'Available', datafield: 'available', columntype: 'checkbox', filtertype: 'bool', width: 67 },                  { text: 'Ship Date', datafield: 'date', filtertype: 'range', width: 210, cellsalign: 'right', cellsformat: 'd' },                  { text: 'Qty.', datafield: 'quantity', filtertype: 'number', cellsalign: 'right' }                ]            };            $scope.$on('jqxGridScriptsLoaded', function () {                var dataAdapter = new $.jqx.dataAdapter(source);                $scope.gridSettings.source = dataAdapter;            });        });    </script></head><body ng-controller="demoController">    <jqx-grid jqx-settings="gridSettings"></jqx-grid></body></html>

Web UI Widgets

Integration & Tools

jQWidgets Directives for AngularJS

Getting Started

Component Markup

Widget configuration

Invoking Methods

Binding to Events

Using ngModel

Asynchronous module definition