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:






Themes

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

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


Uncategorized
, , , ,

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

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';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
	jqxBarGaugeModule,
	jqxGridModule,
	jqxBulletChartModule,
	jqxButtonModule,
	jqxCalendarModule,
	jqxCheckBoxModule,
	jqxColorPickerModule,
	jqxComboBoxModule,
	jqxComplexInputModule,
	jqxDataTableModule,
	jqxDateTimeInputModule,
	jqxDockingModule,
	jqxDockingLayoutModule,
	jqxDockPanelModule,
	jqxDragDropModule,
	jqxDropDownButtonModule,
	jqxDropDownListModule,
	jqxEditorModule,
	jqxExpanderModule,
	jqxFormModule,
	jqxFormattedInputModule,
	jqxGaugeModule,
	jqxInputModule,
	jqxKanbanModule,
	jqxKnobModule,
	jqxLayoutModule,
	jqxLinearGaugeModule,
	jqxLinkButtonModule,
	jqxListBoxModule,
	jqxListMenuModule,
	jqxLoaderModule,
	jqxMaskedInputModule,
	jqxMenuModule,
	jqxNavBarModule,
	jqxNavigationBarModule,
	jqxNotificationModule,
	jqxNumberInputModule,
	jqxPanelModule,
	jqxNumberInputModule,
	jqxPasswordInputModule,
	jqxPivotGridModule,
	jqxPopoverModule,
	jqxProgressBarModule,
	jqxRangeSelectorModule,
	jqxRatingModule,
	jqxRepeatButtonModule,
	jqxResponsivePanelModule,
	jqxRibbonModule,
	jqxSchedulerModule,
	jqxScrollViewModule,
	jqxScrollBarModule,
	jqxSliderModule,
	jqxSortableModule,
	jqxSplitterModule,
	jqxSwitchButtonModule,
	jqxTabsModule,
	jqxTagCloudModule,
	jqxTextAreaModule,
	jqxToggleButtonModule,
	jqxToolBarModule,
	jqxTooltipModule,
	jqxTreeModule,
	jqxTreeGridModule,
	jqxTreeMapModule,
	jqxValidatorModule,
	jqxWindowModule,
    AppRoutingModule
 ],
  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

Angular 8

Angular 8 is here!

Angular 8

The new major release of Angular is here and jQWidgets UI Components are ready for Angular 8. This Angular release improves application startup time on modern browsers, provides new APIs for tapping into the CLI, and aligns Angular to the ecosystem and more web standards.



How to update to Angular 8


ng update @angular/cli @angular/core

Smaller Bundle Size: 7-20%


This is achieved with the new Angular 8 differential loading. That is a process by which the browser chooses between modern or legacy JavaScript based on its own capabilities. Angular 8 takes advantage of this by default by performing a modern build (es2015) and a legacy build (es5) of your application. When users load your application, they’ll automatically get the bundle they need. When target is set to es2015, Angular 8 generates and label two bundles.

At runtime, the browser uses attributes on the script tag to load the right bundle.

 <script type="module" src="…""> // Modern JS
 <script nomodule src="…"">  // Legacy JS

Builder APIs in the Angular CLI


In the same way that Schematics allow you to tap into ng new ng generate ng add and ng update, Angular 8 includes new Builder APIs that allow you to tap into ng build ng test and ng run to perform processes like build and deployment.

jQWidgets and Angular 8


The jQWidgets Team tries to provide the industry’s best Angular 8 UI Components. jQWidgets UI Components for Angular are being carefully tested with Angular 8 since it was still in a Beta version. With each Angular release, our Team tests and fixes issues in the components. See our demos: https://www.jqwidgets.com/angular/. Each one of our demos can be edited in StackBlitz(StackBlitz is an online IDE which supports Angular development projects out-of-the box.

Documentation Updates


We’re always working hard to improve our guides and reference materials. The documentation about Angular is available on: https://www.jqwidgets.com/angular-components-documentation/
ANGULAR, angular8
, , , , ,

2 Comments

jQWidgets Sponsors Vue.js Development

jQWidgets – Vue.js

vue.js jqwidgets

We are happy to announce that jQWidgets became a Patreon Gold Sponsor of Vue.js, an open source, progressive JavaScript framework for web developers. It is one of the most famous frameworks used in modern web development and focuses on the view layer. The framework can be quickly integrated into small or large enterprise projects. Through our sponsorship, we show our appreciation and promote the development of the framework.

Why we like Vue.js?

jQWidgets chose Vue.js. because of its ease of use, data binding and framework features. Our team extended the platform with more than 60 Vue UI components, including a data grid, chart, scheduler, pivot grid, tree grid, docking layout and many other User Interface components.

Vue.js features

  • Data binding: The data binding feature helps manipulate or assign values to HTML attributes, change the style, assign classes with the help of binding directive called v-bind available with VueJS.

  • Event Handling: v-on is the attribute added to the DOM elements to listen to the events in the framework.

  • Templates: VueJS provides HTML-based templates that bind the DOM with the Vue instance data. The framework compiles the templates into virtual DOM Render functions. We can make use of the template of the render functions and to do so we have to replace the template with the render function. Our jQWidgets components can be customized with the template support.

  • Vue-CLI: VueJS can be installed at the command line using the vue-cli command line interface. It helps to build and compile the project easily using vue-cli. In order to learn how to use jQWidgets with the CLI, visit: https://www.jqwidgets.com/vue-components-documentation/documentation/vue-cli/vue-cli.htm and https://www.jqwidgets.com/vue-components-documentation/documentation/create-jqwidgets-vue-app/index.htm.

  • File Size: The file size is much lighter compared to other frameworks.


To learn more about Vue.js or contribute to the project, visit Vuejs.org. To view jQWidgets’s Vue.js controls, please visit https://www.jqwidgets.com/vue/
VUE, VUEJS
, ,

Leave a comment

jQWidgets ver. 8.0.0

We are happy to announce the release of jQWidgets ver. 8.0.0. This release brings a new Material Color Picker UI Component, Angular 8 support and bug fixes.

What’s New:

– Material Color Picker Javascript component.

What’s Improved:

– Angular 8 components integration.

What’s Fixed:

– Fixed an issue in jqxScheduler regarding the Edit Appointment dialog.
– Fixed an issue in jqxScheduler regarding the weekly recurring appointments when localization is applied.
– Fixed an issue in jqxDateTimeInput Vue component.
– Fixed an issue in jqxInput regarding the maxlength property with material themes.
– Fixed an issue in jqxInput regarding its ‘close’ event.
– Fixed an issue in jqxNumberInput regarding the Null value support with material themes.
– Fixed an issue in jqxPasswordInput regarding its placeholder with material themes.
– Fixed an issue in jqxDateTimeInput Angular component regarding the placeholder property.

ANGULAR, Angular 2, angular 4, angular 5, Angular 6, ANGULAR GRID, Angular5, angular7, angular8, Chart, Grid, JavaScript, JavaScript Plugins, JavaScript UI, JavaScript UI Plugins, JavaScript UI Widgets, JavaScript Widgets, jQuery, jQuery Plugins, jQuery UI, jQuery UI Plugins, jQuery UI Widgets, jQuery Widgets, jQWidgets, jqxGrid, VUE, VUEJS

Leave a comment