jQWidgets ver8.2.0

The newest version of jQWidgets includes the following changes:

What’s New:

– Added Smart Web Components to the package.

What’s Fixed:

– Fixed Angular 8 related issue in jqxGrid grouping.
– Fixed Angular 8 related issue in jqxGrid filtering.
– Fixed Angular 8 related issue in jqxGrid, jqxDataTable and jqxTreeGrid about data export.
– Fixed Angular 8 related issue in jqxListBox about inserting new items.
– Fixed Angular 8 related issue in jqxCheckBox about the checked event.
– Fixed Angular 8 related issue in jqxGrid about the virtualization.
– Fixed Angular 8 related issue in jqxDateTimeInput about the Localization and Formatting.
– Fixed Angular 8 related issue in jqxCalendar about the Localization and Formatting.
ANGULAR, angular8

Leave a comment

Rotate Grid Column Headers

With this post, we will teach you how to rotate Grid column headers. 1. Add a new DIV tag to the HTML page and set its “id” to “jqxgrid”. 2. Create a new jqxGrid instance. Each column in the Grid has a ‘classname’ property which we set to a custom class called ‘rotate’.

  var data = new Array();
  var firstNames = [
      "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"];
  var lastNames = [
      "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"];
  var productNames = [
      "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"];
  var priceValues = [
      "2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"];
  for (var i = 0; i < 100; i++) {
      var row = {};
      var productindex = Math.floor(Math.random() * productNames.length);
      var price = parseFloat(priceValues[productindex]);
      var quantity = 1 + Math.round(Math.random() * 10);
      row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
      row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
      row["productname"] = productNames[productindex];
      row["price"] = price;
      row["quantity"] = quantity;
      row["total"] = price * quantity;
      data[i] = row;
  var source = {
      localdata: data,
      datatype: "array"
  var dataAdapter = new jqx.dataAdapter(source, {
      loadComplete: function (data) {},
      loadError: function (xhr, status, error) {}

  const grid = new jqxGrid('#jqxgrid', {
      theme: 'energyblue',
      altrows: true,
      width: 500,
      columnsheight: 100,
      source: dataAdapter,
      columns: [{
          text: 'First Name',
          datafield: 'firstname',
          width: 100,
          classname: 'rotate'
      }, {
          text: 'Last Name',
          classname: 'rotate', 
          datafield: 'lastname',
          width: 100
      }, {
          classname: 'rotate', 
          text: 'Product',
          datafield: 'productname',
          width: 180
      }, {
          classname: 'rotate', 
          text: 'Quantity',
          datafield: 'quantity',
          width: 80,
          cellsalign: 'right'
      }, {
          classname: 'rotate', 
          text: 'Unit Price',
          datafield: 'price',
          width: 90,
          cellsalign: 'right',
          cellsformat: 'c2'
      }, {
          classname: 'rotate', 
          text: 'Total',
          datafield: 'total',
          width: 100,
          cellsalign: 'right',
          cellsformat: 'c2'

3. The third and final step is to add our .rotate class to the Style section.

.rotate > div > div {
  display: flex;
  justify-content: center;
  transform: rotate(45deg);
  transform-origin: center center;

jQWidgets, jqxGrid
, , ,

Leave a comment

Gantt Chart

New Gantt Chart Component

We are happy to announce our new Gantt Chart component. It is included in our “Smart” product line and is part of the jQWidgets subscription for new and existing customers.

Gantt chart

Gantt Features

  • Auto Schedule
  • Expand/Collapse
  • Localization
  • State Maintenance
  • Project Drag and Resize
  • Tasks Drag and Resize
  • Synced Projects
  • Nonworking days and hours
  • Nested Projects
  • Ranges of tasks and projects
  • Task Connections
  • Zooming
  • Auto Height
  • Custom Task Editor

Gantt Chart Example

Gantt Chart

More examples: https://www.htmlelements.com/demos/.
, , , ,

Leave a comment

Meet the Theme Builder ver.2.0.0

Our New jQWidgets Theme Builder

We are very happy to announce that the jQWidgets Team built a brand new, cute and fresh Theme Builder tool. With the new theme builder, you will be able to more easily create, edit themes, import and export settings. It has two modes – Basic and Advanced. The Basic mode allows you to edit the most common settings for all UI components. In the Advanced mode, you can edit more specific and detailed settings for the particular components. For example: “Row alternation text color” when editing the Grid component.
The Theme Builder targets modern web browsers with CSS3 variables support i.e Edge, Chrome, Firefox, Safari and Opera. For old web browsers like IE10, IE11, etc, you can still use our previous theme builder available on that page: https://jqwidgets.com/themebuilder-ver1.0/.

Theme Builder Images:


The themes can be applied to applications built with any of the frameworks jQWidgets supports: Angular, React, Vue, jQuery, ASP .NET Core.

Leave a comment

jQWidgets ver.8.1.4

The new version is a minor build of jQWidgets, which includes two bug fixes related to the jqxScheduler component.

What’s Fixed:

– Fixed an issue in jqxScheduler regarding the rendering of appointments in timelineDayView when “exactTime” is turned on, the scale is 10 minutes and the appointment’s duration is less than 5 minutes.
– Fixed an issue in jqxScheduler resulting in error about globalize.js in Angular 8.
ANGULAR, angular8
, , ,

Leave a comment

jQWidgets ver.8.1.3

We are happy to announce the newest version of jQWidgets.

What’s Improved:

– jqxGrid row details can have variable dynamic height.

What’s Fixed:

– Fixed an issue in jqxGrid about row details visibility in Firefox when the Grid has many columns.
– Fixed an issue in jqxGrid about incorrect filtering through checkedlist filter, when there is “null” value in the Grid’s data.
– Fixed an issue in jqxGrid about scrolling right, then the exported data (xls) shows as a blank column.
– Fixed an issue in jqxScheduler about incorrectly rendered timeline appointment, when the appointment is longer than month, exact-time rendering is enabled and the view is timeline month view.
– Fixed an issue in jqxKanban about the columns rendering, expand and collapse, when trying to add dynamically new columns.
– Fixed an issue in jqxKanban addItem method. The kanban-item-id was incorrectly set.
– Fixed an issue in jqxKanban regarding dynamically setting the source. That may result to duplicated items in some cases.
– Fixed an issue in jqxDropDownList regarding the label rendering when the width is in percentages.
– Fixed an issue regarding Angular 8 production build, Globalize.js and jqxCalendar, jqxDateTimeInput and jqxScheduler.

ANGULAR, Angular 2, angular 4, angular 5, Angular 6, ANGULAR GRID, angular tree, Angular5, angular7, angular8, Chart, Grid, html elements, JavaScript, JavaScript Plugins, JavaScript UI, JavaScript UI Plugins, JavaScript UI Widgets, JavaScript Widgets, jQuery, jQuery Plugins, jQuery UI, jQuery UI Plugins, jQuery Widgets, jQWidgets, jqxButton, jqxCalendar, jqxChart, jqxCheckBox, jqxComboBox, jqxDock, jqxDropDownList, jqxExpander, jqxGrid, jqxInput, jqxListBox, jqxMaskedInput, jqxMenu, jqxNavigationBar, jqxNumberInput, jqxProgressBar, jqxRadioButton, jqxRating, jqxResponse, jqxRibbon, jqxScrollBar, jqxSlider, jqxSplitter, jqxTabs, jqxTooltip, jqxTree, jqxTreeMap, jqxValidator, jqxWindow, PHP, Pivot Grid, React, react grid, React Javascript Library, REACTJS, typescript, VUE, VUEJS

Leave a comment

Integrating jQWidgets with Python and Zerynth for IOT

Our partner Zerynth wrote an interesting post which shows how to control Servo Motors for Internet of Things projects by using Python, Zerynth Studio and jQWidgets.

Servo Motor is a rotary actuator used for precise control of angular position.

Zerynth Studio is used to program the microcontroller-based board in Python and Zerynth App to run the JQWidgets-based graphical user interface. The web ui component used in the app is our jqxKnob component.

Read the full post here: Using Python to control Servo Motors for Internet of Things projects.

Another interesting post with Python and our ColorPicker web UI Component: Control Neopixels using Python and JQWidgets

, , , ,

Leave a comment

Angular 8 related production build

The newest patch release of jQWidgets resolves Angular 8 ES6 production build issues. All Angular demos in the download package are also updated.
ANGULAR, angular8
, ,

Leave a comment

jQWidgets ver.8.1.0 with New Components

We are happy to announce the newest version of jQWidgets which has two brand new Javascript Components – HeatMap and TimePicker

time picker


heatmap 2

Time Picker

Heat Map

jQWidgets v8.1.0 Release, June-17-2019

What’s New:

– Javascript Time Picker component.
– Javascript Heatmap component.

What’s Fixed:

– Fixed an issue in several components about Angular 8 production build error.
– Fixed an issue in jqxPivotGrid’s setCellValue method behavior.
– Fixed an issue in jqxGrid. When scrolling to the last right column and using the “showvalidationpopup” method for the second column.
– Fixed an issue in jqxGrid. Selection rendering was incorrect after deleting a row.
– Fixed an issue in jqxGrid regarding the Data Export to Excel of Date Columns exported as Strings. Now, the data is correctly exported.
– Fixed an issue in jqxGrid when grouping aggregates are dynamically turned on/off.
– Fixed an issue in jqxNumberInput. When the initial state of the input is empty and the value is null, the editing was not working correctly.
– Fixed an issue in jqxNumberInput. Initial value is negative and rendering in “advanced” mode is wrong.
– Fixed an issue in jqxScheduler regarding the localization rendering when showWeekends is false.
ANGULAR, angular8, custom elements, html elements, JavaScript, JavaScript Plugins, JavaScript UI, JavaScript UI Plugins, JavaScript UI Widgets, JavaScript Widgets, jQuery, jQuery Plugins, jQuery UI, jQuery UI Plugins, React, VUE, VUEJS

Leave a comment

How to Import all jQWidgets for Angular 8 Modules?

Tip: Angular 8 & jQWidgets Modules

A customer of jQWidgets for Angular, recently asked our Support Team how to import all jQWidgets Angular Modules from the “jqwidgets-ng” npm package. The sample “app.module.ts” below shows how to import all modules.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { jqxBarGaugeModule }    from 'jqwidgets-ng/jqxbargauge';
import { jqxBulletChartModule }    from 'jqwidgets-ng/jqxbulletchart';
import { jqxButtonModule }    from 'jqwidgets-ng/jqxbuttons';
import { jqxCalendarModule }    from 'jqwidgets-ng/jqxcalendar';
import { jqxGridModule }    from 'jqwidgets-ng/jqxgrid';
import { jqxChartModule }    from 'jqwidgets-ng/jqxchart';
import { jqxCheckBoxModule }    from 'jqwidgets-ng/jqxcheckbox';
import { jqxColorPickerModule }    from 'jqwidgets-ng/jqxcolorpicker';
import { jqxComboBoxModule }    from 'jqwidgets-ng/jqxcombobox';
import { jqxComplexInputModule }    from 'jqwidgets-ng/jqxcomplexinput';
import { jqxDataTableModule }    from 'jqwidgets-ng/jqxdatatable';
import { jqxDateTimeInputModule }    from 'jqwidgets-ng/jqxdatetimeinput';
import { jqxDockingModule }    from 'jqwidgets-ng/jqxdocking';
import { jqxDockingLayoutModule }    from 'jqwidgets-ng/jqxdockinglayout';
import { jqxDockPanelModule }    from 'jqwidgets-ng/jqxdockpanel';
import { jqxDragDropModule }    from 'jqwidgets-ng/jqxdragdrop';
import { jqxDropDownButtonModule }    from 'jqwidgets-ng/jqxdropdownbutton';
import { jqxDropDownListModule }    from 'jqwidgets-ng/jqxdropdownlist';
import { jqxEditorModule }    from 'jqwidgets-ng/jqxeditor';
import { jqxExpanderModule }    from 'jqwidgets-ng/jqxexpander';
import { jqxFileUploadModule }    from 'jqwidgets-ng/jqxfileupload';
import { jqxFormModule }    from 'jqwidgets-ng/jqxform';
import { jqxFormattedInputModule }    from 'jqwidgets-ng/jqxformattedinput';
import { jqxGaugeModule }    from 'jqwidgets-ng/jqxgauge';
import { jqxInputModule }    from 'jqwidgets-ng/jqxinput';
import { jqxKanbanModule }    from 'jqwidgets-ng/jqxkanban';
import { jqxKnobModule }    from 'jqwidgets-ng/jqxknob';
import { jqxLayoutModule }    from 'jqwidgets-ng/jqxlayout';
import { jqxLinearGaugeModule }    from 'jqwidgets-ng/jqxlineargauge';
import { jqxLinkButtonModule }    from 'jqwidgets-ng/jqxlinkbutton';
import { jqxListBoxModule }    from 'jqwidgets-ng/jqxlistbox';
import { jqxListMenuModule }    from 'jqwidgets-ng/jqxlistmenu';
import { jqxLoaderModule }    from 'jqwidgets-ng/jqxloader';
import { jqxMaskedInputModule }    from 'jqwidgets-ng/jqxmaskedinput';
import { jqxMenuModule }    from 'jqwidgets-ng/jqxmenu';
import { jqxNavBarModule }    from 'jqwidgets-ng/jqxnavbar';
import { jqxNavigationBarModule }    from 'jqwidgets-ng/jqxnavigationbar';
import { jqxNotificationModule }    from 'jqwidgets-ng/jqxnotification';
import { jqxNumberInputModule }    from 'jqwidgets-ng/jqxnumberinput';
import { jqxPanelModule }    from 'jqwidgets-ng/jqxpanel';
import { jqxPasswordInputModule }    from 'jqwidgets-ng/jqxpasswordinput';
import { jqxPivotGridModule }    from 'jqwidgets-ng/jqxpivotgrid';
import { jqxPopoverModule }    from 'jqwidgets-ng/jqxpopover';
import { jqxProgressBarModule }    from 'jqwidgets-ng/jqxprogressbar';
import { jqxRadioButtonModule }    from 'jqwidgets-ng/jqxradiobutton';
import { jqxRangeSelectorModule }    from 'jqwidgets-ng/jqxrangeselector';
import { jqxRatingModule }    from 'jqwidgets-ng/jqxrating';
import { jqxRepeatButtonModule }    from 'jqwidgets-ng/jqxrepeatbutton';
import { jqxResponsivePanelModule }    from 'jqwidgets-ng/jqxresponsivepanel';
import { jqxRibbonModule }    from 'jqwidgets-ng/jqxribbon';
import { jqxSchedulerModule }    from 'jqwidgets-ng/jqxscheduler';
import { jqxScrollBarModule }    from 'jqwidgets-ng/jqxscrollbar';
import { jqxScrollViewModule }    from 'jqwidgets-ng/jqxscrollview';
import { jqxSliderModule }    from 'jqwidgets-ng/jqxslider';
import { jqxSortableModule }    from 'jqwidgets-ng/jqxsortable';
import { jqxSplitterModule }    from 'jqwidgets-ng/jqxsplitter';
import { jqxSwitchButtonModule }    from 'jqwidgets-ng/jqxswitchbutton';
import { jqxTabsModule }    from 'jqwidgets-ng/jqxtabs';
import { jqxTagCloudModule }    from 'jqwidgets-ng/jqxtagcloud';
import { jqxTextAreaModule }    from 'jqwidgets-ng/jqxtextarea';
import { jqxToggleButtonModule }    from 'jqwidgets-ng/jqxtogglebutton';
import { jqxToolBarModule }    from 'jqwidgets-ng/jqxtoolbar';
import { jqxTooltipModule }    from 'jqwidgets-ng/jqxtooltip';
import { jqxTreeModule }    from 'jqwidgets-ng/jqxtree';
import { jqxTreeGridModule }    from 'jqwidgets-ng/jqxtreegrid';
import { jqxTreeMapModule }    from 'jqwidgets-ng/jqxtreemap';
import { jqxValidatorModule }    from 'jqwidgets-ng/jqxvalidator';
import { jqxWindowModule }    from 'jqwidgets-ng/jqxwindow';

  declarations: [
  imports: [
  providers: [],
  bootstrap: [AppComponent]
export class AppModule { }

Hope this helps you.
ANGULAR, Angular 2, angular 4, angular 5, Angular 6, ANGULAR GRID, angular tree, Angular5, angular7, angular8, AngularJS

Leave a comment