jqwidgets / jqwidgets

Angular, Vue, React, Web Components, Blazor, Javascript, jQuery and ASP .NET Framework,

jQWidgets

jQWidgets is an advanced UI framework for Angular, React, Vue, Blazor, Web Components, Javascript and ASP .NET.

What is jQWidgets?

jQWidgets represents a framework based on Javascript for building web-based applications that run on PC, Touch and Mobile devices. jQWidgets includes more than 60 User Interface widgets. All UI widgets are designed from ground-up and based on a powerful common core. The framework core provides fundamental capabilities like support for widget extensions and inheritance, widget settings, internal event handling and routing, property change notifications, device and browser compatibility detection and adjustments.

Highlights

• Feature complete User Interface widgets.
• Works on PC, Touch and Mobile Devices.
• Rich functionality and great performance.
• Web Components built from ground-up.
• React Javascript Library User Interface Components
• Angular 14 and AngularJS 1.x Directives for every widget.
• Blazor Controls.
• ASP .NET Core UI Components
• Easy PHP & ASP .NET integration and how-to demos.
• Typescript Definitions for all widgets.
• PhoneGap Integration.
• Java Integration.
• 60+ UI components, 30+ Charts, 1000+ code samples are provided to accelerate your learning.
• Search-engine friendly.
• Guaranteed 24h support time for licensed developers Mon-Fri.
• Outstanding technical assistance provided by software developers.
• Free fully functional Download and upgrades for a full calendar year.
• Chart Studio - cloud solution for visual editing and hosting of interactive charts.
• jsEditor - cloud solution for JavaScript, HTML and CSS editing, hosting and sharing your web development ideas.
• Easy CSS styling and Online Theme Builder.
• Ready to use, built-in Themes.
• Unique and completely customizable architecture for JQuery widgets.
• Integration tutorials for Bootstrap, RequireJS, BreezeJS, KnockoutJS.
• jQuery Mobile, WordPress, Joomla and more.

Works across devices and browsers

jQWidgets takes the JavaScript & HTML UI development to a new level. It is platform independent, cross-browser compatible and works on PC and mobile devices. Don’t spend time testing on different devices and browsers. Use a reliable, CSS compliant JavaScript library based jQuery, HTML5 and CSS3.The product supports all major desktop and mobile web browsers - Internet Explorer 7.0+, Firefox 2.0+, Safari 3.0+, Opera 9.0+, Google Chrome, IE Mobile, Android, Opera Mini, Mobile Safari(IPhone, IPad).

Licensing

Non-Commercial License

Do you want to use jQWidgets for a non-profit project? Then you can use jQWidgets for free under the Creative Commons Attribution-NonCommercial 3.0 License.

• For non-profit organizations, public schools and non-commercial personal websites.
• For testing applications using jQWidgets.

You are allowed to distribute jQWidgets with non-commercial packages given that you fulfill two conditions:

• Emphasize to your users that jQWidgets is not free for commercial use. You can do this on your download page or when your users activate jQWidgets in your application.
• Provide a link back to this web page in the same location: https://www.jqwidgets.com/license/.

Commercial License

The commercial license is suitable for commercial websites and projects or a corporate intranet. The license is perpetual and allows royalty free distribution with your websites and applications. Each license includes 1-year subscription for free product updates and platinum, premium or standard technical support plan. Subscription renewal is optional and costs 50% of the price of a new license. For subscription renewals, license upgrades, licenses with more than 1-year subscription or if you wish to license subsidiary or affiliate organizations, please contact us.

For more information, please visit https://www.jqwidgets.com/license/.

More

• React Demos: https://www.jqwidgets.com/react/ and https://www.htmlelements.com/react/
• Angular Demos: https://www.jqwidgets.com/angular/ and https://www.htmlelements.com/angular/
• Blazor Demos: https://blazor.jqwidgets.com/ and https://www.htmlelements.com/blazor/
• Vue Demos: https://www.jqwidgets.com/vue/ and https://www.htmlelements.com/vue/
• ASP .NET Core Demos: https://www.jqwidgets.com/asp.net-core-mvc-tag-helpers/
• Showcase Demos: https://www.jqwidgets.com/jquery-widgets-demo/showcasedemos/
• Javascript/jQuery Demos: https://www.jqwidgets.com/jquery-widgets-demo/
• Vanilla Javascript Demos: https://www.htmlelements.com/demos/
• Web Components Demos: https://www.htmlelements.com/
• Services: https://www.jqwidgets.com/services/
• Community Forums: https://www.jqwidgets.com/community/

jqwidgets's Issues

jqxScheduler - in "timelineMonthView" view the appointments do not take expected place with the "exactTime" feature

Topic where this is mentioned.

Example:
https://jseditor.io/?key=5c0fd550f4b111e896c300224d6bfcd5

jqxTabs - the "rtl" with "margin-left" set the first tab on incorrect position

Switch between the first tab and someone else.

Example:
http://jsfiddle.net/jqwidgets/6e2rM/

jqxTabs - the "Map inside Tab" demo does not look fine (black overlay)

Example:
https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxtabs/javascript-tabs-map.htm?light

how to use this component in antd design pro ?

hello ,I want to use this component in our project, but our project is used by antd design pro ,I tried a lot of ways to configure webpack， But still doesn't work， Can you help me? I am going crazy.

=

Angular CLI & jqwidgets-ng prod build error

Following these instructions the --prod build fails:

JQWidgets version: 7.0.0
Angular version: 7.2.4

ok:

ng build

Date: 2019-02-07T11:44:10.360Z
Time: 11541ms
chunk {es2015-polyfills} es2015-polyfills.js, es2015-polyfills.js.map (es2015-polyfills) 284 kB [initial] [rendered]
chunk {main} main.js, main.js.map (main) 10.8 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 236 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.08 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 535 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3.69 MB [initial] [rendered]

not ok:

ng build --prod

Date: 2019-02-07T11:45:42.759Z
Time: 30693ms
chunk {0} runtime.a5dd35324ddfd942bef1.js (runtime) 1.41 kB [entry] [rendered]
chunk {1} es2015-polyfills.12eccedba99646c7daca.js (es2015-polyfills) 56.4 kB [initial] [rendered]
chunk {2} main.4a4d1c17055ab1886bb3.js (main) 241 kB [initial] [rendered]
chunk {3} polyfills.407a467dedb63cfdd103.js (polyfills) 41 kB [initial] [rendered]
chunk {4} styles.39eda5e30810f97ebe74.css (styles) 115 kB [initial] [rendered]

ERROR in ./node_modules/jqwidgets-scripts/jqwidgets-ng/jqxbargauge/jqwidgets-ng-jqxbargauge.ngfactory.js
Module not found: Error: Can't resolve 'jqwidgets-ng/jqxbargauge' in 'C:\jqxapp\node_modules\jqwidgets-scripts\jqwidgets-ng\jqxbargauge'
ERROR in ./src/app/app.module.ngfactory.js
Module not found: Error: Can't resolve 'jqwidgets-ng/jqxbargauge' in 'C:\jqxapp\src\app'
ERROR in ./src/app/app.component.ngfactory.js
Module not found: Error: Can't resolve 'jqwidgets-ng/jqxbargauge' in 'C:\jqxapp\src\app'

jqxGrid - the "updatebounddata" method with "sort" argument does not work appropriately with the "sortmode: 'many'"

Example:
http://jsfiddle.net/txhi/e47t6jv1/

jqxDateTimeInput - with "allowNullDate" and initial 'null' value set with the "value" property - inappropriate behavior

Accept NaN values, for this reason, the jqxDateTimeInput throws errors in the console.

Example:
http://jsfiddle.net/gtear13c/1/

How can i remove multi items at once

Thanks,
How can i remove multi items at once, like this:

jqxTree - when using ensureVisible, horizontal scrollbar is covering the item

When we have a jqxTree with a horizonatal scrollbar, if ensureVisible method is used the item is not fully showed.

Example:
http://jsfiddle.net/L9pq17at/

jqxNumberInput - when the width is set to "100%" it duplicates elements on resize

If resize the browser when the jqxNumberInput's width is "100%" then it duplicates and .

Example:
http://jsfiddle.net/gzowc3kr/

jqxScheduler - Recurring Appointments with Resources

1. Let us say there are two resources(room1, room2)

2. create a weekly recurring appointment from monday to friday in room1.
3. Delete any one occurence.(Let us say we have deleted the occurence/recurrence on monday). That particular appointment will disappear.
4. Turn off room1 and again turn on room1 now the deleted appointment will again appear.

jqxEditor - change color style two times and return the old value

When trying to change the color style from 'some color' to 'black' and then return old value with Ctrl + z it duplicates the value.

Example:
https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxeditor/defaultfunctionality.htm?light

jqxGrid - cannot filtering by time option

Example:
https://jseditor.io/?key=324083907f6e11e8a9ff00224d6bfcd5-ver-2

jqxTreeGrid - navigation with the arrow does not follow the selected row

When select one row and continuously selecting next rows below the view stops to follow the selected records at one moment.

Example:
https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxtreegrid/javascript-tree-grid-binding-to-tab.htm?light

jqxGrid - when autoheight is set to true, height property always returns 400

Example:
http://jsfiddle.net/mogador/mfx4c2w0/

JQX TreeGrid

Hi,

I would like to have columngroups as well as subgroups for set of columns.

Eg: Header 1 -> Sub Header 1 -> colulmn name.

But In Jqx Treegrid we have Header -> Column.

Do we have any way to achieve this?

jqxTextArea - the "select" event does not fire

Example:
http://jsfiddle.net/85rca90v/

jqGrid - filtering on grouped columns it produce inappropriate appearance

How to reproduce it:
Expand the first row to the leaf group.
After that filtering with the "Caf" value in the 'Product' column

Example:
https://jsfiddle.net/4fupd2w3/

jqxGrid - when using "createeditor" in an example with 'localization' it throws an error

When starting to edit the number column with the custom editor it throws an error.

Example:
https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/localization.htm?light

Additional:

{
     text: 'Qt.', datafield: 'quantity',
     filtertype: 'textbox', cellsalign: 'right', width: 60,
     columntype: 'custom',
     createeditor: function (row, cellvalue, editor, celltext, cellwidth, cellheight)
     {
          editor.jqxNumberInput({ width: 100 });
     },
     cellsformat: "d2"
},

jqxGrid - the "columnmenuopening" callback does not cancel the opening process with "return false"

Example:
In the example below with return false.
https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/filtering-menu-custom-widgets.htm?light

jqxScheduler - appointmentOpacity does not reflect on the appointments

Example:
https://www.jqwidgets.com/jseditor/?key=jqxscheduler-appointmentopacity-property

jqxTreeGrid (Angular) - the "focus()" method does not work

Example:
https://stackblitz.com/edit/github-de9uhs-kzdlcr?file=src/app/app.component.ts

jqxKnob - the "labels.style" does not react to changes

If I try to change the style of the labels with its style member it does not react.

Topic:
https://www.jqwidgets.com/community/topic/labelstyles-prop-does-not-work-in-jqxknob

Example:
https://jseditor.io/?key=f2ca01adfeb811e896c300224d6bfcd5

jqxTreeGrid - incorrectly calculated values of the aggregates in the exported files

The case could be reproduced with enabled "showAggregates" option.

Example:
https://jseditor.io/?key=jqxtreegrid-aggregates-issue
https://jseditor.io/?key=jqxtreegrid-aggregates-issue-second

http://jsfiddle.net/txhi/j4n7e6bp/1/
http://jsfiddle.net/txhi/m0rgznbf/1/

jqxEditor - cannot 'copy' and 'paste' a stylized word

After the paste operation, the word is as plain text.

Example:
https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxeditor/defaultfunctionality.htm?light

jqxCheckBox - duplicate checkbox

It happens only in Chrome. Plunker. AngularJS.

Example:
https://plnkr.co/edit/oLek3lbnwgSKiyEhurFp?p=preview

internal address

jqxChart - columns do not look at the right position when resizing with the "rangeselector"

While moving the jqxChart's rangeselector it shows some of the columns on a not specific position.
It looks like the columns are not on the correct date.

Example:
http://jsfiddle.net/gk98jbs0/

Topic:
https://www.jqwidgets.com/community/topic/rangeselector

jqxGrid (demo) - missing implementation of the "initwidget" callback function

This is the "Widget Column" demo.

Example:
https://www.jqwidgets.com/angular/angular-grid/angular-grid-widgetcolumn.htm?material

The right approach:
https://stackblitz.com/github/jqwidgets/angular_demos/tree/master/grid/widgetcolumn/

jqxScheduler - different style settings to change the position cause strange behavior when resizing appointments

If using

• 'absolute' position;
• float;
• or margin;

this cause strange behavior in case of resizing of the appointments.

Topic:
https://www.jqwidgets.com/community/topic/appointment-resize-bug-with-absolute-div-scheduler/#post-103229

Example:
https://jseditor.io/?key=e06f84fefdf211e896c300224d6bfcd5

ERROR in angular_jqxchart.ts

Angular_jqxchart Demo not working.

ERROR in ./node_modules/jqwidgets-scripts/jqwidgets-ts/angular_jqxchart.ts
Module build failed (from ./node_modules/@ngtools/webpack/src/index.js):
Error: E:\gqaixbqm.github\node_modules\jqwidgets-scripts\jqwidgets-ts\angular_jqxchart.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the
'files' or 'include' property.
The missing file seems to be part of a third party library. TS files in published libraries are often a sign of a badly packaged library. Please open an issue in the library repository to alert its author and ask them to package the library using the Angular Package Format (https://goo.gl/jB3GVv).
at AngularCompilerPlugin.getCompiledFile (E:\gqaixbqm.github\node_modules@ngtools\webpack\src\angular_compiler_plugin.js:767:23)
at plugin.done.then (E:\gqaixbqm.github\node_modules@ngtools\webpack\src\loader.js:41:31)
at process.internalTickCallback (internal/process/next_tick.js:77:7)

jqxTabs - it is blocked in Chrome

It happens only in Chrome. Plunker. AngularJS.

Example:
https://next.plnkr.co/edit/sN9cs3sPhUsDLNLXNxAr

internal address

jqxDockingLayout - "width" property throws error message with "jqx-all.js" file

jqxPanel - scrolling to the bottom

Mobile device. Reproduced on Chrome's Emulator.
If start scrolling click down to up and the viewport goes to the bottom of the page.
It is impossible to return back.

Example:
http://jsfiddle.net/txhi/h54d0Lur/

jqxGrid - scrollbarsize property does not change the size of the scrollbar

It is the same for other widgets as jqxTreeGrid.

Example:
http://jsfiddle.net/txhi/8yhcumpz/

jqxGrid - dynamically change "columnsheight" with "sortmode: 'many'" does not show arrows of the menu

The arrow of the menu of the sorted columns disappeared.

Example:
http://jsfiddle.net/txhi/z2rde3fb/

jqxGrid - horizontal scrollbar appears at specific moments while resizing

Example:
http://jsfiddle.net/txhi/bf9dtxpq/

jqxGrid - copying of one cell's value does not work in jqxWindow with modal option for "Edge"

Example:
https://jsfiddle.net/upfywv9L/

keyboard navigation with grouping

https://www.jqwidgets.com/community/topic/multiple-column-groupings-not-working-with-keyboard-navigation/#post-103852

jqxGrid - exporting the cell with double quotes reformatting the table in CSV format

Example:
https://stackblitz.com/edit/github-zzxjkv-dhujlo?file=src/app/app.component.ts

and

http://jsfiddle.net/a3fdeoq4/

Single page application Tree with tabs - Jqwidgets

Hello , Iam having two tree structure and each tree will have its own nodes and there will be a tab view .
when i merge the two tree following things should be achived .
Problem statement : Once the tab has been opened if the same tree node is click tab should be with out reloading again from the database [it should become active ]
Background work : i had made this working in individual tree [i.e if menu B is clicked page will be reloaded and previous menus will be closed and new fresh tree will be opened up]

<script type="text/javascript">
       
        $(document).ready(function () {
        	
            $('#detschModMaster').jqxTree({ height: '800px', width: '245px' });
            $('#detschModTransaction').jqxTree({ height: '800px', width: '245px' });
            
            var tabsCount = $("#jqxTabs").jqxTabs('length');
            $('#detschModTransaction').on('select', function (event) {

            	var htmlElement1 = event.args.element;
                var item1 = $('#detschModTransaction').jqxTree('getItem', htmlElement1);
                
                var position1;
                var content2 = null;
                             
                var id1= $(item1).attr('id');
				if(id1 == 'xccvvv'){
                    content2 = '<div><iframe width="1200" height="800" frameborder="0" src="detschtransaction/uiuiuiu.io"/></div>';
                 }
				if(id1 == 'sdfwe'){
                    content2 = '<div><iframe width="1200" height="800" frameborder="0" src="detschtransaction/wassddx.io"/></div>';
                 }
			
                });
            
            $('#detschModMaster').bind('select', function (event) {
            	
                var htmlElement = event.args.element;
                var item = $('#detschModMaster').jqxTree('getItem', htmlElement);
                var position;
                var content1 = null;

               alert(tabsCount);
                
              //  for (var i = 0; i &lt; tabsCount; i++) {
               //     alert(tabsCount);
                 //   var tabTitle = $("#jqxTabs").jqxTabs('getTitleAt', i);
                   // if (tabTitle == item.label) {
                    //    position = i;
                     //   alert(position);
                      //  break;
                    //};
               // };

                var id= $(item).attr('id');
                //$('#jqxTabs').jqxTabs('removeAt', position);
                if(id == 'ccc1'){
                     content1 = '<div><iframe width="1200" height="800" frameborder="0" src="detschmaster/xcvvv.io"/></div>';
                    }
                if(id == 'xxx1'){
                    content1 = '<div><iframe width="1200" height="800" frameborder="0" src="detschmaster/ert.io"/></div>';
                   }
               
               
             if(content1 != null){
                $('#jqxTabs').jqxTabs('addLast', item.label , content1);
                $('#jqxTabs').jqxTabs('ensureVisible', -1);
                }
                });
        });
    </script> <script type="text/javascript">
        $(document).ready(function () {
            $('#jqxTabs').jqxTabs({ height: 800, width: 1200  , showCloseButtons: true});
            var tabsCount1 = $("#jqxTabs").jqxTabs('length');
            for (var i = tabsCount1; i >= 0; i--) {
            		$("#jqxTabs").jqxTabs('removeAt', i);
            };
        });
    </script>

jqxTextArea - the "selectAll" method throws error

Example:
http://jsfiddle.net/jqwidgets/4nh5zjby/

jqxGrid - the "filtertype: 'range'" option is enabled but the calendar does not look properly

When opening the calendar the month is align to the right side.

Example:
https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/filterrow.htm?light

jqxSlider - when clicking with the cursor on the range the pointer does not stay under the cursor

The 'ball' is a little bit right of the cursor.

Example:
https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxslider/defaultfunctionality.htm?arctic

jqxGrid - "No data to display" string disappear at 11 and more columns and with "pageable: true"

Example:
http://jsfiddle.net/6w4q9nvg/1/

Workaround:
http://jsfiddle.net/5qnLg3hf/

jqxScheduler - the labels of the resources disappeared on changing of the date in 'timeline view'

Example:
https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxscheduler/scheduler-timeline-views-resources.htm?light

jqxGrid - the "removesort" does not work properly as expected with the "sortmode: 'many'"

Example:
http://jsfiddle.net/txhi/rwsa2Lpb/

jqxCalendar - there is no class for the weekend

The ".jqx-calendar-cell-weekend" class does not exist.

Example:
http://jsfiddle.net/bt3dnhg5/

Packaging correctly for angular

Hi,

Any plans of fixing this?

ERROR in ./node_modules/jqwidgets-scripts/jqwidgets-ts/angular_jqxtreegrid.ts
Module build failed (from ./node_modules/@ngtools/webpack/src/index.js):
Error: C:\TRV\Metis.Frontend\node_modules\jqwidgets-scripts\jqwidgets-ts\angular_jqxtreegrid.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.
The missing file seems to be part of a third party library. TS files in published libraries are often a sign of a badly packaged library. Please open an issue in the library repository to alert its author and ask them
to package the library using the Angular Package Format (https://goo.gl/jB3GVv).

This message especially:
TS files in published libraries are often a sign of a badly packaged library

jqxBarGauge (Angular) - cannot use the "customColorScheme" property

Example:
https://stackblitz.com/edit/github-gisq1v?file=src/app/app.component.ts