Skip to main content
jqxgrid-example-angular7

JQXGrid Listing, Filter, Pagination With Angular 13

The jqxgrid very trending grid plugin in web applications.This tutorial help to create grid listing with pagination and sorting using jqxgrid and angular 13. This tutorial also lets you know how to install angular 13 and work with angular CLI.

The jqwidget has many components for angular 13. You can choose more than 60 UI components including Grid, Chart, Scheduler, Editor, TreeGrid and more. I will demonstrate grid component of jqwidget in this tutorial.

They provide easy-to-use APIs and work across devices and browsers. The jquery grid component delivers advanced data visualization features and built-in support for client and server-side paging, editing, sorting, and filtering. You can use the Grid with frameworks like Angular and ReactJS.

The jqxgrid component have following major functionality –

  • Works across devices and browsers
  • Web Standards Compliant
  • Feature complete jQuery Datagrid for Enterprise
  • Rich and easy to use JavaScript API
  • Optimized for Performance
  • Easy customization and built-in themes
  • Localization

How to Setup Angular 13 in Development

You need to install Node.js and npm if they are not already on your machine.

if already installed, Then Please verify that you are running at least Node.js version 8.x or greater and npm version 5.x or greater by running node -v and npm -v in a terminal/console window.

Now install the Angular CLI globally using cmd window. Open the cmd window and run the below command –

npm install -g @angular/cli

Create a new project using terminal window. We can generate a new project of angular 13 using the following command:

ng new jqxgrid-angular-example
cd jqxgrid-angular-example
ng serve --open

The ng serve command launches the server and -o option will automatically open your browser on https://localhost:4200/.

How to Integrate jqxgrid With Angular 13

Let’s start the integration of the jqwidget ui framework with the angular 13 application. We will use one of the components jqxgrid of jqwidget.

Install the jQWidgets dependency into the angular 13 application. open the terminal/cmd window and run the below command:

npm install jqwidgets-scripts --save

Step 1: We will add the styles file path into index.html file.

//index.html
<link href="../jqwidgets/styles/jqx.base.css" type="text/css">

Step 2: Add include[] and scr[] array into tsconfig.json file.We will make an entry at the end of the file.

//tsconfig.json
 {
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "es2015",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  },

    "include": [
      "src/**/*"
    ],
    "files": [
      "src/app/app.module.ts",
      "node_modules/jqwidgets-scripts/jqwidgets-ts/angular_jqxgrid.ts"
    ]
}

Step 3: We will make jqxGridComponent entry into angular module file app.module.ts.

//app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { CommonModule } from '@angular/common';
import { AppComponent } from './app.component';
import { jqxGridComponent } from 'jqwidgets-scripts/jqwidgets-ts/angular_jqxgrid';

@NgModule({
  declarations: [
    AppComponent,
    jqxGridComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    CommonModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }


As you can see above code, We have imported angular_jqxgrid and added it into declarations[] array.

Step 4: We will create a component file to listing, sort, and filter data, Added source objects to get data and bind data to jqxgrid component. We will add the below code into app.component.ts file.

//app.component.ts
import { Component } from '@angular/core';
import { jqxGridComponent } from 'jqwidgets-scripts/jqwidgets-ts/angular_jqxgrid';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'jqxgrid-angular-example';
  columns: any[] =
    [
        { text: 'Employee Name', datafield: 'employee_name', width: 250 },
        { text: 'Employee age', datafield: 'employee_age', cellsalign: 'right', align: 'right' },
        { text: 'Employee Salary', datafield: 'employee_salary', cellsalign: 'right', align: 'right' }
    ];

    source: any =
    {
        datatype: 'json',
        datafields: [
            { name: 'employee_name', type: 'string' },
            { name: 'employee_age', type: 'int' },
            { name: 'employee_salary', type: 'int' }
        ],
        id: 'id',
        url: 'https://dummy.restapiexample.com/api/v1/employees'
    };

    dataAdapter: any = new jqx.dataAdapter(this.source);
}

We have created following object into above code :-

  • columns – This variable contains data column information.
  • source – This source object have API information, datafields, datatype, locale etc. We will pass this data to jqxgrid component.

Step 5: we will add jqxGrid component into app.component.html file.

//app.component.html
<jqxgrid [width]="500" [source]="dataAdapter" [columns]="columns" [pageable]="true" [autoheight]="true" [sortable]="true">
</jqxgrid>

Run Angular Application

You can run the Angular app with the following command:

ng serve --open

The above command will start your Angular Application and the open command – opens it automatically in your web browser https://localhost:4200/.

Leave a Reply

Your email address will not be published. Required fields are marked *