jQWidgets ver10.0.0

jqwidgets · Jul 20, 2020 · 3e75d2a · 3e75d2a
1 parent 6230695
commit 3e75d2a
Show file tree

Hide file tree

Showing 1,123 changed files with 12,095 additions and 201,969 deletions.
diff --git a/ReleaseNotes.txt b/ReleaseNotes.txt
@@ -1,4 +1,16 @@
 *********************************************
+* jQWidgets v10.0.0 Release, July-20-2020   *
+*********************************************
+
+What's New:
+
+- Angular 10 support.
+- Modern Light and Dark Themes with CSS variables support. 
+- jqxGrid Filter all functionality.
+- jqxGrid Excel import.
+- New demos.
+
+*********************************************
 * jQWidgets v9.1.6 Release, May-18- 2020    *
 *********************************************
 

diff --git a/demos/Javascript & JQuery/jqxgrid/dataimport.htm b/demos/Javascript & JQuery/jqxgrid/dataimport.htm
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title id='Description'>Import from Excel with jqxGrid.</title>
+	<meta name="description" content="Javascript Grid Data Import from Excel" /> 	
+    <link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" />
+    <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" />
+    <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/jqxscrollbar.js"></script>
+    <script type="text/javascript" src="../../../jqwidgets/jqxmenu.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/jqxgrid.columnsresize.js"></script> 
+    <script type="text/javascript" src="../../../jqwidgets/jqxdata.js"></script> 
+    <script type="text/javascript" src="../../../jqwidgets/jqxdata.export.js"></script> 
+    <script type="text/javascript" src="../../../jqwidgets/jqxgrid.export.js"></script> 
+    <script type="text/javascript" src="../../../jqwidgets/jqxgrid.sort.js"></script> 
+	<script type="text/javascript" src="https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxexport.js"></script> 
+	<script type="text/javascript" src="https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqximport.js"></script> 
+    <script type="text/javascript" src="../../../scripts/demos.js"></script>
+    <!-- JSZip -->
+    <script type="text/javascript" src="../../../scripts/jszip.min.js"></script>
+    <!-- pdfmake -->
+    <script type="text/javascript" src="../../../scripts/pdfmake.min.js"></script>
+    <script type="text/javascript" src="../../../scripts/vfs_fonts.js"></script>
+
+    <script type="text/javascript" src="generatedata.js"></script>
+    <script type="text/javascript">
+        $(document).ready(function () {
+            // prepare the data
+
+		    var source = new jqx.dataAdapter({
+				datatype: 'xlsx',
+				url: '../../../scripts/data.xlsx',
+				datafields: [
+                    { name: 'id', type: 'number' },
+                    { name: 'firstName', type: 'string' },
+                    { name: 'lastName', type: 'string' },
+                    { name: 'productName', type: 'string' },
+                    { name: 'quantity', type: 'number' },
+                    { name: 'price', type: 'number' },
+					{ name: 'total', type: 'string' }
+                ]
+			});
+
+			var grid = new jqxGrid("#grid", {
+				source: source,
+				autoheight:true,
+				width: '100%',
+				columns: [
+				{ text: 'id', dataField: 'id'},
+				{ text: 'First Name', dataField: 'firstName'},
+				{ text: 'Last Name', dataField: 'lastName' },
+				{ text: 'Product', dataField: 'productName' },
+				{ text: 'Quantity', dataField: 'quantity', align: 'right', cellsAlign: 'right', },
+				{ text: 'Unit Price', dataField: 'price', align: 'right', cellsAlign: 'right', cellsFormat: 'c2' },
+				{ text: 'Total', dataField: 'total', align: 'right', cellsAlign: 'right', cellsFormat: 'c2' }
+				]
+			});			
+        });
+    </script>
+</head>
+<body class='default'>
+	<div id="grid"></div>
+</body>
+</html>
diff --git a/demos/Javascript & JQuery/jqxgrid/filterall.htm b/demos/Javascript & JQuery/jqxgrid/filterall.htm
@@ -0,0 +1,121 @@
+<!DOCTYPE html>
+<html lang="en">
+
+    <head>
+        <title id='Description'>In this sample is demonstrated how to filter through all records in the Grid.</title>
+        <meta name="description" content="JavaScript Grid which has multiple built-in aggregates" />
+        <link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+        <link rel="stylesheet" href="../../../jqwidgets/styles/jqx.blue.css" type="text/css" />
+        <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
+        <script type="text/javascript" src="../../../scripts/jquery-1.12.4.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/jqxmenu.js"></script>
+        <script type="text/javascript" src="../../../jqwidgets/jqxgrid.js"></script>
+        <script type="text/javascript" src="../../../jqwidgets/jqxgrid.edit.js"></script>
+        <script type="text/javascript" src="../../../jqwidgets/jqxgrid.filter.js"></script>
+        <script type="text/javascript" src="../../../jqwidgets/jqxgrid.sort.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/jqxgrid.selection.js"></script>
+        <script type="text/javascript" src="../../../jqwidgets/jqxgrid.aggregates.js"></script>
+        <script type="text/javascript" src="../../../jqwidgets/jqxcheckbox.js"></script>
+        <script type="text/javascript" src="../../../scripts/demos.js"></script>
+        <script type="text/javascript" src="generatedata.js"></script>
+        <script type="text/javascript">
+            $( document ).ready( function () {
+                // prepare the data
+                var data = generatedata( 200 );
+
+                var source =
+                {
+                    localdata: data,
+                    datatype: "array",
+                    datafields:
+                        [
+                            { name: 'firstname', type: 'string' },
+                            { name: 'lastname', type: 'string' },
+                            { name: 'productname', type: 'string' },
+                            { name: 'available', type: 'bool' },
+                            { name: 'quantity', type: 'number' },
+                            { name: 'price', type: 'number' }
+                        ],
+                    updaterow: function ( rowid, rowdata ) {
+                        // synchronize with the server - send update command
+                    }
+                };
+
+                var dataAdapter = new $.jqx.dataAdapter( source );
+
+                // initialize jqxGrid
+                var grid = new jqxGrid( "#grid",
+                    {
+                        width: getWidth( 'Grid' ),
+                        source: dataAdapter,
+                        filterable: true,
+                        sortable: true,
+                        showfilterbar: true,
+                        columns: [
+                            { text: 'First Name', columntype: 'textbox', datafield: 'firstname', width: 170 },
+                            { text: 'Last Name', datafield: 'lastname', columntype: 'textbox', width: 170 },
+                            {
+                                text: 'Product', datafield: 'productname', width: 170,
+
+                            },
+                            {
+                                text: 'In Stock', datafield: 'available', columntype: 'checkbox', width: 125,
+
+                            },
+                            {
+                                text: 'Quantity', datafield: 'quantity', width: 85, cellsalign: 'right', cellsformat: 'n2',
+
+                            },
+                            {
+                                text: 'Price', datafield: 'price', cellsalign: 'right', cellsformat: 'c2'
+                            } ]
+                    } );
+
+                var grid2 = new jqxGrid( "#grid2",
+                    {
+                        width: getWidth( 'Grid' ),
+                        source: dataAdapter,
+                        filterable: true,
+                        sortable: true,
+                        filterbarmode: 'simple',
+                        showfilterbar: true,
+                        columns: [
+                            { text: 'First Name', columntype: 'textbox', datafield: 'firstname', width: 170 },
+                            { text: 'Last Name', datafield: 'lastname', columntype: 'textbox', width: 170 },
+                            {
+                                text: 'Product', datafield: 'productname', width: 170,
+
+                            },
+                            {
+                                text: 'In Stock', datafield: 'available', columntype: 'checkbox', width: 125,
+
+                            },
+                            {
+                                text: 'Quantity', datafield: 'quantity', width: 85, cellsalign: 'right', cellsformat: 'n2',
+
+                            },
+                            {
+                                text: 'Price', datafield: 'price', cellsalign: 'right', cellsformat: 'c2'
+                            } ]
+                    } );
+            } );
+        </script>
+    </head>
+
+    <body class='default'>
+        <h3>Grid with Search Input and Filter By List</h3>
+        <div id="grid"></div>
+        <br />
+        <h3>Grid with Search Input</h3>
+        <div id="grid2"></div>
+
+    </body>
+
+</html>
diff --git a/jqwidgets-react-tsx/jqxdatetimeinput/react_jqxdatetimeinput.d.ts b/jqwidgets-react-tsx/jqxdatetimeinput/react_jqxdatetimeinput.d.ts
@@ -46,6 +46,7 @@ interface IDateTimeInputOptions {
     disabled?: boolean;
     enableBrowserBoundsDetection?: boolean;
     enableAbsoluteSelection?: boolean;
+    editMode?: string;
     firstDayOfWeek?: number;
     formatString?: string;
     height?: string | number;
@@ -67,6 +68,7 @@ interface IDateTimeInputOptions {
     todayString?: string;
     value?: Date | null;
     width?: string | number;
+    yearCutoff?: number;
 }
 export interface IDateTimeInputProps extends IDateTimeInputOptions {
     className?: string;

diff --git a/jqwidgets-react-tsx/jqxdatetimeinput/react_jqxdatetimeinput.esm.js b/jqwidgets-react-tsx/jqxdatetimeinput/react_jqxdatetimeinput.esm.js
@@ -131,7 +131,7 @@ var JqxDateTimeInput = /** @class */ (function (_super) {
         }
     };
     JqxDateTimeInput.prototype._manageProps = function () {
-        var widgetProps = ['animationType', 'allowNullDate', 'allowKeyboardDelete', 'clearString', 'culture', 'closeDelay', 'closeCalendarAfterSelection', 'dropDownHorizontalAlignment', 'dropDownVerticalAlignment', 'disabled', 'enableBrowserBoundsDetection', 'enableAbsoluteSelection', 'firstDayOfWeek', 'formatString', 'height', 'min', 'max', 'openDelay', 'placeHolder', 'popupZIndex', 'rtl', 'readonly', 'showFooter', 'selectionMode', 'showWeekNumbers', 'showTimeButton', 'showCalendarButton', 'theme', 'template', 'textAlign', 'todayString', 'value', 'width'];
+        var widgetProps = ['animationType', 'allowNullDate', 'allowKeyboardDelete', 'clearString', 'culture', 'closeDelay', 'closeCalendarAfterSelection', 'dropDownHorizontalAlignment', 'dropDownVerticalAlignment', 'disabled', 'enableBrowserBoundsDetection', 'enableAbsoluteSelection', 'editMode', 'firstDayOfWeek', 'formatString', 'height', 'min', 'max', 'openDelay', 'placeHolder', 'popupZIndex', 'rtl', 'readonly', 'showFooter', 'selectionMode', 'showWeekNumbers', 'showTimeButton', 'showCalendarButton', 'theme', 'template', 'textAlign', 'todayString', 'value', 'width', 'yearCutoff'];
         var options = {};
         for (var prop in this.props) {
             if (widgetProps.indexOf(prop) !== -1) {

diff --git a/jqwidgets-react-tsx/jqxdatetimeinput/react_jqxdatetimeinput.umd.js b/jqwidgets-react-tsx/jqxdatetimeinput/react_jqxdatetimeinput.umd.js
@@ -135,7 +135,7 @@ require('../../jqwidgets/jqxcalendar');
             }
         };
         JqxDateTimeInput.prototype._manageProps = function () {
-            var widgetProps = ['animationType', 'allowNullDate', 'allowKeyboardDelete', 'clearString', 'culture', 'closeDelay', 'closeCalendarAfterSelection', 'dropDownHorizontalAlignment', 'dropDownVerticalAlignment', 'disabled', 'enableBrowserBoundsDetection', 'enableAbsoluteSelection', 'firstDayOfWeek', 'formatString', 'height', 'min', 'max', 'openDelay', 'placeHolder', 'popupZIndex', 'rtl', 'readonly', 'showFooter', 'selectionMode', 'showWeekNumbers', 'showTimeButton', 'showCalendarButton', 'theme', 'template', 'textAlign', 'todayString', 'value', 'width'];
+            var widgetProps = ['animationType', 'allowNullDate', 'allowKeyboardDelete', 'clearString', 'culture', 'closeDelay', 'closeCalendarAfterSelection', 'dropDownHorizontalAlignment', 'dropDownVerticalAlignment', 'disabled', 'enableBrowserBoundsDetection', 'enableAbsoluteSelection', 'editMode', 'firstDayOfWeek', 'formatString', 'height', 'min', 'max', 'openDelay', 'placeHolder', 'popupZIndex', 'rtl', 'readonly', 'showFooter', 'selectionMode', 'showWeekNumbers', 'showTimeButton', 'showCalendarButton', 'theme', 'template', 'textAlign', 'todayString', 'value', 'width', 'yearCutoff'];
             var options = {};
             for (var prop in this.props) {
                 if (widgetProps.indexOf(prop) !== -1) {

diff --git a/jqwidgets-react-tsx/jqxgrid/react_jqxgrid.d.ts b/jqwidgets-react-tsx/jqxgrid/react_jqxgrid.d.ts
@@ -139,6 +139,7 @@ export interface IGridColumn {
     threestatecheckbox?: boolean;
     sortable?: boolean;
     filterable?: boolean;
+    filterbarmode?: string;
     filter?: (cellValue?: any, rowData?: any, dataField?: string, filterGroup?: any, defaultFilterResult?: any) => any;
     buttonclick?: (row: number) => void;
     hideable?: boolean;
@@ -435,6 +436,7 @@ interface IGridOptions {
     showstatusbar?: boolean;
     statusbarheight?: number;
     showtoolbar?: boolean;
+    showfilterbar?: boolean;
     selectionmode?: 'none' | 'singlerow' | 'multiplerows' | 'multiplerowsextended' | 'singlecell' | 'multiplecells' | 'multiplecellsextended' | 'multiplecellsadvanced' | 'checkbox';
     updatefilterconditions?: (type?: string, defaultconditions?: any) => any;
     updatefilterpanel?: (filtertypedropdown1?: any, filtertypedropdown2?: any, filteroperatordropdown?: any, filterinputfield1?: any, filterinputfield2?: any, filterbutton?: any, clearbutton?: any, columnfilter?: any, filtertype?: any, filterconditions?: any) => any;

diff --git a/jqwidgets-react-tsx/jqxgrid/react_jqxgrid.esm.js b/jqwidgets-react-tsx/jqxgrid/react_jqxgrid.esm.js
@@ -424,7 +424,7 @@ var JqxGrid = /** @class */ (function (_super) {
         return this._jqx(this._componentSelector).jqxGrid('savestate');
     };
     JqxGrid.prototype._manageProps = function () {
-        var widgetProps = ['altrows', 'altstart', 'altstep', 'autoshowloadelement', 'autoshowfiltericon', 'autoshowcolumnsmenubutton', 'showcolumnlines', 'showrowlines', 'showcolumnheaderlines', 'adaptive', 'adaptivewidth', 'clipboard', 'closeablegroups', 'columnsmenuwidth', 'columnmenuopening', 'columnmenuclosing', 'cellhover', 'enablekeyboarddelete', 'enableellipsis', 'enablemousewheel', 'enableanimations', 'enabletooltips', 'enablehover', 'enablebrowserselection', 'everpresentrowposition', 'everpresentrowheight', 'everpresentrowactions', 'everpresentrowactionsmode', 'filterrowheight', 'filtermode', 'groupsrenderer', 'groupcolumnrenderer', 'groupsexpandedbydefault', 'handlekeyboardnavigation', 'pagerrenderer', 'rtl', 'showdefaultloadelement', 'showfiltercolumnbackground', 'showfiltermenuitems', 'showpinnedcolumnbackground', 'showsortcolumnbackground', 'showsortmenuitems', 'showgroupmenuitems', 'showrowdetailscolumn', 'showheader', 'showgroupsheader', 'showaggregates', 'showgroupaggregates', 'showeverpresentrow', 'showfilterrow', 'showemptyrow', 'showstatusbar', 'statusbarheight', 'showtoolbar', 'selectionmode', 'updatefilterconditions', 'updatefilterpanel', 'theme', 'toolbarheight', 'autoheight', 'autorowheight', 'columnsheight', 'deferreddatafields', 'groupsheaderheight', 'groupindentwidth', 'height', 'pagerheight', 'rowsheight', 'scrollbarsize', 'scrollmode', 'scrollfeedback', 'width', 'autosavestate', 'autoloadstate', 'columns', 'columngroups', 'columnsmenu', 'columnsresize', 'columnsautoresize', 'columnsreorder', 'charting', 'disabled', 'editable', 'editmode', 'filter', 'filterable', 'groupable', 'groups', 'horizontalscrollbarstep', 'horizontalscrollbarlargestep', 'initrowdetails', 'keyboardnavigation', 'localization', 'pagesize', 'pagesizeoptions', 'pagermode', 'pagerbuttonscount', 'pageable', 'rowdetails', 'rowdetailstemplate', 'ready', 'rendered', 'renderstatusbar', 'rendertoolbar', 'rendergridrows', 'sortable', 'sortmode', 'selectedrowindex', 'selectedrowindexes', 'source', 'sorttogglestates', 'updatedelay', 'virtualmode', 'verticalscrollbarstep', 'verticalscrollbarlargestep'];
+        var widgetProps = ['altrows', 'altstart', 'altstep', 'autoshowloadelement', 'autoshowfiltericon', 'autoshowcolumnsmenubutton', 'showcolumnlines', 'showrowlines', 'showcolumnheaderlines', 'adaptive', 'adaptivewidth', 'clipboard', 'closeablegroups', 'columnsmenuwidth', 'columnmenuopening', 'columnmenuclosing', 'cellhover', 'enablekeyboarddelete', 'enableellipsis', 'enablemousewheel', 'enableanimations', 'enabletooltips', 'enablehover', 'enablebrowserselection', 'everpresentrowposition', 'everpresentrowheight', 'everpresentrowactions', 'everpresentrowactionsmode', 'filterrowheight', 'filtermode', 'groupsrenderer', 'groupcolumnrenderer', 'groupsexpandedbydefault', 'handlekeyboardnavigation', 'pagerrenderer', 'rtl', 'showdefaultloadelement', 'showfiltercolumnbackground', 'showfiltermenuitems', 'showpinnedcolumnbackground', 'showsortcolumnbackground', 'showsortmenuitems', 'showgroupmenuitems', 'showrowdetailscolumn', 'showheader', 'showgroupsheader', 'showaggregates', 'showgroupaggregates', 'showeverpresentrow', 'showfilterrow', 'showemptyrow', 'showstatusbar', 'statusbarheight', 'showtoolbar', 'showfilterbar', 'selectionmode', 'updatefilterconditions', 'updatefilterpanel', 'theme', 'toolbarheight', 'autoheight', 'autorowheight', 'columnsheight', 'deferreddatafields', 'groupsheaderheight', 'groupindentwidth', 'height', 'pagerheight', 'rowsheight', 'scrollbarsize', 'scrollmode', 'scrollfeedback', 'width', 'autosavestate', 'autoloadstate', 'columns', 'columngroups', 'columnsmenu', 'columnsresize', 'columnsautoresize', 'columnsreorder', 'charting', 'disabled', 'editable', 'editmode', 'filter', 'filterable', 'groupable', 'groups', 'horizontalscrollbarstep', 'horizontalscrollbarlargestep', 'initrowdetails', 'keyboardnavigation', 'localization', 'pagesize', 'pagesizeoptions', 'pagermode', 'pagerbuttonscount', 'pageable', 'rowdetails', 'rowdetailstemplate', 'ready', 'rendered', 'renderstatusbar', 'rendertoolbar', 'rendergridrows', 'sortable', 'sortmode', 'selectedrowindex', 'selectedrowindexes', 'source', 'sorttogglestates', 'updatedelay', 'virtualmode', 'verticalscrollbarstep', 'verticalscrollbarlargestep'];
         var options = {};
         for (var prop in this.props) {
             if (widgetProps.indexOf(prop) !== -1) {