Angular CLI

To use Angular CLI with jQWidgets, this tutorial will help you: Angular CLI with jQWidgets.

We also added tutorial about Angular CLI with our Grid and Chart components: Angular CLI and jqxChart
Angular CLI and jqxGrid

Leave a comment

Angular Reactive Forms

To use Angular Reactive Forms with jQWidgets, we prepared this help tutorial: angular-reactive-forms

Leave a comment

Create JQwidgets Angular App

To quickly setup jQWidgets with Angular we created a small NPM package. The link to it is: create-jqwidgets-angular-app

Leave a comment

Angular CLI and jQWidgets Angular Components

In this tutorial, we will show you how to use along with the Angular Components by jQWidgets.
Please, follow the step by step instructions below:

  • npm install -g angular-cli
  • ng new jqwidgets
  • cd jqwidgets
  • npm install jqwidgets-framework --save
  • ng serve
  • Edit src/index.html:
    <!doctype html>
    <meta charset="utf-8">
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <!-- Styles -->
    <link rel="stylesheet" href="" type="text/css" />
    <!-- jQWidgets -->
    <script src=""></script>
    <script src=""></script>
    <script src=""></script>
  • Edit src/app.component.ts:
    import { Component } from '@angular/core';
    import { jqxBarGaugeComponent } from 'jqwidgets-framework/jqwidgets-ts/angular_jqxbargauge';
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
    export class AppComponent {
    values: number[] = [102, 115, 130, 137];
  • Edit src/app.component.htm:
    [width]="600" [height]="600" [colorScheme]="'scheme02'"
    [max]="150" [values]="values">
  • Edit src/app.module.ts:
    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { FormsModule } from '@angular/forms';
    import { HttpModule } from '@angular/http';
    import { AppComponent } from './app.component';
    import { jqxBarGaugeComponent } from 'jqwidgets-framework/jqwidgets-ts/angular_jqxbargauge';
    declarations: [
    imports: [
    providers: [],
    bootstrap: [AppComponent]
    export class AppModule { }
  • Navigate to http://localhost:4200/ in your web browser


Leave a comment

jQWidgets 4.5.4

This release of jQWidgets includes the new Angular examples. Now we have equal set of demos for jQuery, Angular and React.

The list of changes:

– Added 1500+ Angular Demos.
– Fixed an issue in the CSS styling about DataTable and TreeGrid pager.
– Fixed an issue in jqxScheduler about the Edit Dialog title showing incorrect results when adding and editing appointments.
– Fixed an issue in jqxScheduler about the Edit Dialog Delete button visibility.

Leave a comment

New Angular 4 Demos

On our Angular page, you can now find more than 1500 new demos. The code used for preparing these demos can be found in each demo’s tabs.

1 Comment

JQWidget-based GUI usage in an App

We found an interesting post about using jQWidgets in an App. For more details visit: Control Neopixels using Python and JQWidgets

Leave a comment

Using jQWidgets React Components with Create-React-App

What is Create-React-App

Many React developers wanted to have a React Enviroment where they can focus only on their code, having all the configuration files like webpack, babel, react pre set-up.
create-react-app comes in strong here. When you install it all the config files are hidden so you can start working on your application right away. Of course if you want to pull out all of the configuration files, then the eject command comes in. With it you can further tweak your configuration.

Installing Create-React-App

Assuming we already have node installed, run the following comamnd in our terminal:

$ npm install -g create-react-app

Creating an App

To create a new app, run the following command:

create-react-app my-app

It will create a directory called my-app inside the current folder. Inside that directory, it will generate the initial project structure and install the transitive dependencies:

No configuration or complicated folder structures, just the files you need to build your app.

Now in order to start the app, run the following command:

npm start

This runs the app in development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will see the build errors and lint warnings in the console.

Integrating jQWidgets React Components

  • Create jqwidgets-react folder inside the src folder and add the needed react_jqxXXXX.js files in it:

  • Create jqwidgets folder inside the public folder and add the needed jqxXXXX.js files in it:

  • Inside index.html file add the needed jqxXXXX.js references:

    <!doctype html>
    <html lang="en">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <title>React App</title>
    <!-- jQWidgets -->
    <link rel="stylesheet" href="./jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="./jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="./jqwidgets/jqxdatetimeinput.js"></script>
    <script type="text/javascript" src="./jqwidgets/jqxcalendar.js"></script>
    <script type="text/javascript" src="./jqwidgets/jqxtooltip.js"></script>
    <script type="text/javascript" src="./jqwidgets/globalization/globalize.js"></script>
    <div id="root"></div>
  • Finally inside App.js file write your widget code:

    import React, { Component } from 'react';
    import JqxDateTimeInput from './jqwidgets-react/react_jqxdatetimeinput'
    class App extends Component {
    render() {
    return (
    <h4>My First jQWidgets React Component</h4>
    <JqxDateTimeInput width={200} height={30} />
    export default App;

And here is the output:


So you’ve made your application with webpack, babel and everything else all figured out and installed for you. You just added the needed files, wrote some code and the application was ready to go! If you consider building a React application create-react-app is one of the best starter projects you can use.

React, React Javascript Library, REACTJS
, , ,

Leave a comment

jQWidgets 4.5.3

jQWidgets v4.5.3 Release, June-01-2017

What’s Fixed:

– Fixed an issue in jqxGrid regarding the data editing when the edit mode is ‘selectedrow’ and selection mode is cell based.
– Fixed an issue in jqxGrid regarding loading dates with milliseconds precision.
– Fixed an issue in jqxGrid regarding the destroy method when filter row is enabled and there are INPUT filters.
– Fixed an issue in jqxGrid when caps-lock is on and you start editing with a key press.
– Fixed an issue in jqxGrid when columns reorder is true in RTL mode.
– Fixed an issue in jqxGrid regarding DatetimeInput editor when it is in time-input mode.
– Fixed an issue in jqxScheduler regarding the agendaView usage on touch devices.
– Fixed an issue in jqxListBox about submitting item value when the listbox is empty.
– Fixed an issue in jqxDateTimeInput regarding showing time popup with Alt + Down key, if calendar button is hidden.

Leave a comment

Angular Grid

Angular Grid UI Component

jQWidgets Angular Grid is an advanced data grid user interface component built on top of Typescript, Angular and the jQWidgets framework. It is feature complete and is built by the same developers who implemented the best Javascript Grid – jqxGrid. With our Angular Grid, you can use the same API and functionalities.


jqxGrid offers fast data updates on all end-user features such as grouping, sorting, paging, and scrolling. The Angular Grid also comes with row and column virtualization, which minimizes the amount of items that need to be rendered, and ensures unbeatable performance in spread-like scenarios with thousands of rows and columns.


jqxGrid is developed on top of the jQWidgets UI Framework and delivers a combination of unique features which can be easily enabled, disabled or customized. Our Angular Grid provides the ultimate flexibility over your data and its presentations including paging, grouping and sorting.


The Angular Grid supports built-in powerful sorting capabilities like one-click automatic sorting, selection of sort option from a context menu, and sorting through APIs. The data grid automatically chooses the most appropriate comparison. Users can also implement and use a custom sort comparer. The sorting works well with all possible configurations including rows grouping and paging. Angular Grid also has an option to display an additional background in the sorted column.

Some of the other supported features by our Angular Grid are: Filtering, Paging, Grouping, Nested Grids, Pinned(Frozen) Columns, Conditional Formatting, Cells Editing, Row Editing, Data Validation and many more.

Lets start with a simple Angular Grid setup:

    <jqxgrid [width]="500" [source]="dataAdapter" [columns]="columns">


    export class AppComponent {
//This generates some random array with data
data: any[] = generatedata(100);
source: any =
{ name: 'firstname', type: 'string' },
{ name: 'lastname', type: 'string' },
{ name: 'price', type: 'number' }
datatype: 'array'
dataAdapter: any = new $.jqx.dataAdapter(this.source);
columns: any[] =
{ text: 'First Name', datafield: 'firstname', width: 200 },
{ text: 'Last Name', datafield: 'lastname', width: 200 },
{ text: 'Unit Price', datafield: 'price', cellsalign: 'right', cellsformat: 'c2' }

As you can see we can either directly assign value to the property like with the width or we can use a property from our component class – source & columns.

And here is the result:

angular grid

Now let’s add some features to the Angular Grid:

    <jqxgrid [width]="500" [source]="dataAdapter" [columns]="columns"
[pageable]="true" [editable]="true" [filterable]="true" [autoheight]="true">

The code in AppComponent stays the same(as above Component example), because we don’t have anything new we need from there. This looks like this:

Editing Feature:

angular grid editing

Paging Feature:

jQWidgets Angular Grid has integrated paging functionality that lets the users to view large data sets in multiple pages for faster loading and intuitive navigation. Users also have an option to select how many records they would like to see on a page by using a page-size dropdown. To navigate to a page, users can enter the page number in the page-input box and click the ‘enter’ key or they can click the ‘next’ and ‘previous’ navigation buttons to navigate to the next or the previous page.

angular grid paging

Filtering Feature:

angular grid filtering

Every event you have in the normal jqxGrid is available in Angular Grid too. All you need to do is write on before it and upperCase it’s first letter.

You bind it like this:

 <jqxgrid (onCellbeginedit)="cellBeginEditEvent($event)"
[width]="500" [source]="dataAdapter" [columns]="columns">

The Angular Grid by jQWidgets is fast and easy to use. It works across devices and has a consistent look and behavior on PCs, tablets and mobile phones. It is a perfect solution for complex Angular UI applications.

Browser our Grid demos:
ANGULAR, Angular 2, ANGULAR GRID, AngularJS, JavaScript
, , , , ,

Leave a comment