Updated to v5.0.0

jqwidgets · Aug 9, 2017 · 9fc9ae2 · 9fc9ae2
1 parent b0777a1
commit 9fc9ae2
Show file tree

Hide file tree

Showing 403 changed files with 13,600 additions and 1,674 deletions.
diff --git a/ReleaseNotes.txt b/ReleaseNotes.txt
@@ -1,4 +1,22 @@
 *********************************************
+* jQWidgets v5.0.0 Release, Aug-08-2017     *
+*********************************************
+
+What's New:
+
+ - Custom Elements
+
+
+What's Fixed:
+
+- Fixed an issue in jqxTooltip regarding the open method in combination with refresh method. CSS classes were added multiple times.
+- Fixed an issue in jqxDataTable regarding the ensure row visible keys.
+- Fixed an issue in jqxButtonGroup regarding percentage sizing.
+- Fixed an issue in jqxButton regarding dynamically setting the value property, when image is defined.
+- Fixed an issue in jqxDropDownList regarding the initialization from UL list.
+- Fixed an issue in jqxMenu regarding the closeItem method behavior.
+
+*********************************************
 * jQWidgets v4.5.4 Release, June-27-2017    *
 *********************************************
 

diff --git a/demos/customelements/bargauge/bargauge-element.htm b/demos/customelements/bargauge/bargauge-element.htm
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title id='Description'>BarGauge Custom Element</title>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
+    <link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" />
+    <link rel="stylesheet" href="../../../styles/demos.css" type="text/css" />
+    <script type="text/javascript" src="../../../scripts/webcomponents-lite.min.js"></script>
+    <script type="text/javascript" src="../../../scripts/demos.js"></script>
+    <script type="text/javascript" src="../../../jqwidgets/jqxcore.js"></script>
+    <script type="text/javascript" src="../../../jqwidgets/jqxdraw.js"></script>
+    <script type="text/javascript" src="../../../jqwidgets/jqxcore.elements.js"></script>
+    <script type="text/javascript" src="../../../jqwidgets/jqxbargauge.js"></script>
+    <script type="text/javascript" src="../../../jqwidgets/jqxtooltip.js"></script>
+    <script type="text/javascript">
+
+        JQXElements.settings["barGaugeSettings"] =
+        {
+            colorScheme: "scheme02", values: [102, 115, 130, 137], max: 150,
+            tooltip: {
+                visible: true, formatFunction: function (value) {
+                    var realVal = parseInt(value);
+                    return ('Year: 2016<br/>Price Index:' + realVal);
+                }
+            }
+        }
+    </script>
+</head>
+<body>
+    <div class="example-description">
+        This demo illustrates the basic functionality of the Bar Gauge custom element.
+    </div>
+
+    <jqx-bar-gauge settings="barGaugeSettings"></jqx-bar-gauge>
+</body>
+</html>
diff --git a/demos/customelements/bulletchart/bulletchart-element.htm b/demos/customelements/bulletchart/bulletchart-element.htm
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title id='Description'>BulletChart Custom Element Overview</title>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
+    <link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" />
+    <link rel="stylesheet" href="../../../styles/demos.css" type="text/css" />
+    <script type="text/javascript" src="../../../scripts/webcomponents-lite.min.js"></script>
+    <script type="text/javascript" src="../../../scripts/demos.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/jqxdraw.js"></script>
+    <script type="text/javascript" src="../../../jqwidgets/jqxcore.elements.js"></script>
+    <script type="text/javascript" src="../../../jqwidgets/jqxbargauge.js"></script>
+    <script type="text/javascript" src="../../../jqwidgets/jqxbulletchart.js"></script>
+    <script type="text/javascript" src="../../../jqwidgets/jqxtooltip.js"></script>
+    <script type="text/javascript">      
+        JQXElements.settings["bulletChartSettings"] =
+        {
+            barSize: "40%",
+            title: "Revenue 2014 YTD",
+            description: "(U.S. $ in thousands)",
+            ranges: [
+                { startValue: 0, endValue: 200, color: "#000000", opacity: 0.5 },
+                { startValue: 200, endValue: 250, color: "#000000", opacity: 0.3 },
+                { startValue: 250, endValue: 300, color: "#000000", opacity: 0.1 }
+            ],
+            pointer: { value: 270, label: "Revenue 2014 YTD", size: "25%", color: "Black" },
+            target: { value: 260, label: "Revenue 2013 YTD", size: 4, color: "Black" },
+            ticks: { position: "both", interval: 50, size: 10 },
+            labelsFormat: "c",
+            showTooltip: true
+        }
+    </script>
+</head>
+<body>
+    <div class="example-description">
+        This demo illustrates the basic functionality of the Bullet Chart custom element.
+    </div>
+
+    <jqx-bullet-chart settings="bulletChartSettings"></jqx-bullet-chart>
+</body>
+</html>
diff --git a/demos/customelements/button/button-element.htm b/demos/customelements/button/button-element.htm
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title id='Description'>Button Custom Element Overview</title>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
+    <link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" />
+    <link rel="stylesheet" href="../../../styles/demos.css" type="text/css" />
+    <script type="text/javascript" src="../../../scripts/webcomponents-lite.min.js"></script>
+    <script type="text/javascript" src="../../../jqwidgets/jqxcore.js"></script>
+    <script type="text/javascript" src="../../../jqwidgets/jqxcore.elements.js"></script>
+    <script type="text/javascript" src="../../../jqwidgets/jqxbuttons.js"></script>
+    <script type="text/javascript" src="../../../scripts/demos.js"></script>
+</head>
+<body>
+    <div class="example-description">
+        This demo illustrates the basic functionality of the Button custom element.
+    </div>
+
+   <jqx-button>Click Me</jqx-button>
+</body>
+</html>
diff --git a/demos/customelements/button/button-javascript.htm b/demos/customelements/button/button-javascript.htm
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title id='Description'>Button Custom Element with JavaScript</title>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
+    <link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" />
+    <link rel="stylesheet" href="../../../styles/demos.css" type="text/css" />
+    <script type="text/javascript" src="../../../scripts/webcomponents-lite.min.js"></script>
+    <script type="text/javascript" src="../../../jqwidgets/jqxcore.js"></script>
+    <script type="text/javascript" src="../../../jqwidgets/jqxcore.elements.js"></script>
+    <script type="text/javascript" src="../../../jqwidgets/jqxbuttons.js"></script>
+    <script type="text/javascript" src="../../../scripts/demos.js"></script>
+    <script>
+        window.onload = function () {
+            let button = document.createElement("jqx-button");
+            button.innerHTML = "Click Me";
+            document.body.appendChild(button);
+        }
+    </script>
+</head>
+<body>
+    <div class="example-description">
+        This demo illustrates how to create a new Button custom element with javascript and append it to the DOM.
+    </div>
+
+</body>
+</html>
diff --git a/demos/customelements/button/button-settings.htm b/demos/customelements/button/button-settings.htm
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title id='Description'>Button Custom Element Settings</title>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
+    <link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" />
+    <link rel="stylesheet" href="../../../styles/demos.css" type="text/css" />
+    <script type="text/javascript" src="../../../scripts/webcomponents-lite.min.js"></script>
+    <script type="text/javascript" src="../../../jqwidgets/jqxcore.js"></script>
+    <script type="text/javascript" src="../../../jqwidgets/jqxcore.elements.js"></script>
+    <script type="text/javascript" src="../../../jqwidgets/jqxbuttons.js"></script>
+    <script type="text/javascript" src="../../../scripts/demos.js"></script>
+    <script type="text/javascript">
+        JQXElements.settings["buttonSettings"] =
+        {
+            template: "primary"  
+        }
+    </script>
+</head>
+<body>
+    <div class="example-description">
+        This demo illustrates the Button custom element settings initialization.
+    </div>
+
+   <jqx-button settings="buttonSettings">Click me</jqx-button>
+</body>
+</html>
diff --git a/demos/customelements/buttongroup/buttongroup-element.htm b/demos/customelements/buttongroup/buttongroup-element.htm
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title id='Description'>ButtonGroup Custom Element Overview</title>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
+    <link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" />
+    <link rel="stylesheet" href="../../../styles/demos.css" type="text/css" />
+    <script type="text/javascript" src="../../../scripts/webcomponents-lite.min.js"></script>
+    <script type="text/javascript" src="../../../jqwidgets/jqxcore.js"></script>
+    <script type="text/javascript" src="../../../jqwidgets/jqxcore.elements.js"></script>
+    <script type="text/javascript" src="../../../jqwidgets/jqxbuttons.js"></script>
+    <script type="text/javascript" src="../../../jqwidgets/jqxbuttongroup.js"></script>
+    <script type="text/javascript" src="../../../scripts/demos.js"></script>
+</head>
+<body>
+    <div class="example-description">
+        This demo illustrates the basic functionality of the Button Group custom element.
+    </div>
+
+   <jqx-button-group>
+     <button>Left</button>
+     <button>Center</button>
+     <button>Right</button>
+  </jqx-button-group>
+</body>
+</html>
diff --git a/demos/customelements/buttongroup/buttongroup-settings.htm b/demos/customelements/buttongroup/buttongroup-settings.htm
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title id='Description'>ButtonGroup Custom Element Settings</title>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
+    <link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" />
+    <link rel="stylesheet" href="../../../styles/demos.css" type="text/css" />
+    <script type="text/javascript" src="../../../scripts/webcomponents-lite.min.js"></script>
+    <script type="text/javascript" src="../../../jqwidgets/jqxcore.js"></script>
+    <script type="text/javascript" src="../../../jqwidgets/jqxcore.elements.js"></script>
+    <script type="text/javascript" src="../../../jqwidgets/jqxbuttons.js"></script>
+    <script type="text/javascript" src="../../../jqwidgets/jqxbuttongroup.js"></script>
+    <script type="text/javascript" src="../../../scripts/demos.js"></script>
+    <script type="text/javascript">
+        JQXElements.settings["buttonGroupSettings"] =
+        {
+            template: "primary"  
+        }
+    </script>
+</head>
+<body>
+   <jqx-button-group settings="buttonGroupSettings">
+     <button>Left</button>
+     <button>Center</button>
+     <button>Right</button>
+  </jqx-button-group>
+</body>
+</html>
diff --git a/demos/customelements/calendar/calendar-element.htm b/demos/customelements/calendar/calendar-element.htm
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title id='Description'>Calendar Custom Element Overview</title>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
+    <link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" />
+    <link rel="stylesheet" href="../../../styles/demos.css" type="text/css" />
+    <script type="text/javascript" src="../../../scripts/webcomponents-lite.min.js"></script>
+    <script type="text/javascript" src="../../../jqwidgets/jqxcore.js"></script>
+    <script type="text/javascript" src="../../../jqwidgets/jqxcore.elements.js"></script>
+    <script type="text/javascript" src="../../../jqwidgets/jqxcalendar.js"></script>
+    <script type="text/javascript" src="../../../jqwidgets/jqxdatetimeinput.js"></script>
+    <script type="text/javascript" src="../../../jqwidgets/globalization/globalize.js"></script>
+    <script type="text/javascript" src="../../../scripts/demos.js"></script>
+</head>
+<body>
+    <div class="example-description">
+        This demo illustrates the basic functionality of the Calendar custom element.
+    </div>
+
+   <jqx-calendar></jqx-calendar>
+</body>
+</html>
diff --git a/demos/customelements/calendar/calendar-javascript.htm b/demos/customelements/calendar/calendar-javascript.htm
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title id='Description'>Calendar Custom Element from JavaScript</title>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
+    <link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" />
+    <link rel="stylesheet" href="../../../styles/demos.css" type="text/css" />
+    <script type="text/javascript" src="../../../scripts/webcomponents-lite.min.js"></script>
+    <script type="text/javascript" src="../../../jqwidgets/jqxcore.js"></script>
+    <script type="text/javascript" src="../../../jqwidgets/jqxcore.elements.js"></script>
+    <script type="text/javascript" src="../../../jqwidgets/jqxbuttons.js"></script>
+    <script type="text/javascript" src="../../../jqwidgets/jqxcalendar.js"></script>
+    <script type="text/javascript" src="../../../jqwidgets/jqxdatetimeinput.js"></script>
+    <script type="text/javascript" src="../../../jqwidgets/globalization/globalize.js"></script>
+    <script type="text/javascript" src="../../../scripts/demos.js"></script>
+    <script>
+        window.onload = function () {
+            let calendar = document.createElement("jqx-calendar");
+            document.body.appendChild(calendar);
+        }
+    </script>
+</head>
+<body>
+</body>
+</html>
diff --git a/demos/customelements/calendar/calendar-settings.htm b/demos/customelements/calendar/calendar-settings.htm
@@ -0,0 +1,28 @@
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title id='Description'>Calendar Custom Element Settings</title>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
+    <link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" />
+    <link rel="stylesheet" href="../../../styles/demos.css" type="text/css" />
+    <script type="text/javascript" src="../../../scripts/webcomponents-lite.min.js"></script>
+    <script type="text/javascript" src="../../../jqwidgets/jqxcore.js"></script>
+    <script type="text/javascript" src="../../../jqwidgets/jqxcore.elements.js"></script>
+    <script type="text/javascript" src="../../../jqwidgets/jqxcalendar.js"></script>
+    <script type="text/javascript" src="../../../jqwidgets/jqxdatetimeinput.js"></script>
+    <script type="text/javascript" src="../../../jqwidgets/globalization/globalize.js"></script>
+    <script type="text/javascript" src="../../../scripts/demos.js"></script>
+    <script type="text/javascript">
+        JQXElements.settings["calendarSettings"] =
+        {
+            value: new Date(2017, 10, 25)
+        }
+    </script>
+</head>
+<body>
+    <jqx-calendar settings="calendarSettings"></jqx-calendar>
+</body>
+</html>
+
diff --git a/demos/customelements/chart/chart-bubble-series.htm b/demos/customelements/chart/chart-bubble-series.htm
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title id='Description'>Chart Custom Element Bubble Series</title>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
+    <link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" />
+    <link rel="stylesheet" href="../../../styles/demos.css" type="text/css" />
+    <script type="text/javascript" src="../../../scripts/webcomponents-lite.min.js"></script>
+    <script type="text/javascript" src="../../../scripts/demos.js"></script>
+    <script type="text/javascript" src="../../../jqwidgets/jqxcore.js"></script>
+    <script type="text/javascript" src="../../../jqwidgets/jqxcore.elements.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/jqxdata.js"></script>
+    <script> 
+        var data = [
+            { City: 'New York', SalesQ1: 310500, SalesQ2: 210500, YoYGrowthQ1: 1.05, YoYGrowthQ2: 1.25 },
+            { City: 'London', SalesQ1: 120000, SalesQ2: 169000, YoYGrowthQ1: 1.15, YoYGrowthQ2: 0.95 },
+            { City: 'Paris', SalesQ1: 205000, SalesQ2: 275500, YoYGrowthQ1: 1.45, YoYGrowthQ2: 1.15 },
+            { City: 'Tokyo', SalesQ1: 187000, SalesQ2: 130100, YoYGrowthQ1: 0.45, YoYGrowthQ2: 0.55 },
+            { City: 'Berlin', SalesQ1: 187000, SalesQ2: 113000, YoYGrowthQ1: 1.65, YoYGrowthQ2: 1.05 },
+            { City: 'San Francisco', SalesQ1: 142000, SalesQ2: 102000, YoYGrowthQ1: 0.75, YoYGrowthQ2: 0.15 },
+            { City: 'Chicago', SalesQ1: 171000, SalesQ2: 124000, YoYGrowthQ1: 0.75, YoYGrowthQ2: 0.65 }
+        ];
+        JQXElements.settings["chartSettings"] = {
+            title: "Sales by City in Q1 and Q2, and YoY sales growth",
+            description: "(the size of the circles represents relative YoY growth)",
+            enableAnimations: true,
+            showLegend: true,
+            padding: { left: 5, top: 5, right: 5, bottom: 5 },
+            titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
+            source: data,
+            colorScheme: 'scheme04',
+            xAxis:
+            {
+                dataField: 'City',
+                valuesOnTicks: false
+            },
+            valueAxis:
+            {
+                unitInterval: 50000,
+                minValue: 50000,
+                maxValue: 350000,
+                title: { text: 'Sales ($)<br>' },
+                labels: {
+                    formatSettings: { prefix: '$', thousandsSeparator: ',' },
+                    horizontalAlignment: 'right'
+                }
+            },
+            seriesGroups:
+            [
+                {
+                    type: 'bubble',
+                    series: [
+                        { dataField: 'SalesQ1', radiusDataField: 'YoYGrowthQ1', minRadius: 10, maxRadius: 30, displayText: 'Sales in Q1' },
+                        { dataField: 'SalesQ2', radiusDataField: 'YoYGrowthQ2', minRadius: 10, maxRadius: 30, displayText: 'Sales in Q2' }
+                    ]
+                }
+            ]
+        }
+    </script>
+</head>
+<body>
+    <div class="example-description">
+        This demo illustrates the Bubble Chart.
+    </div>
+
+   <jqx-chart settings="chartSettings"></jqx-chart>
+</body>
+</html>