The Essential JS 2 grid is a modern, lightweight, feature-rich, and open-source grid for Angular with blazing-fast performance. It has been built using TypeScript with modular architecture, which helps you load only the needed modules on demand.
In this article, we are going to walk you through how to create a grid and inject features such as paging, sorting, filtering, grouping, and aggregation in an Angular application. The final code can be found at our GitHub repository.
You need to set up the development environment before creating a grid. Since the source is available in GitHub and packages are available in npm, you can get started with grid in very few steps.
To create an Angular application, we need to install Angular CLI globally using the following command.
npm install -g @angular/cli
Then create a new Angular application using the following command.
ng new my-app
This will download all the files we need and initialize the npm install.
Once you have created the Angular application, you need to use the following command to install grid.
cd my-app npm install @syncfusion/ej2-ng-grids --save
–save will save grid in the dependencies of package.json.
Now all the configuration related to environment is completed. Next you need to configure grid. Before configuration, we need a component where grid will render. To create an Angular component, you need to use the following Angular CLI command.
ng generate component grid
The new component has been created successfully.
Themes provide life to components. Grid has different themes. They are:
In this demo application, the material theme will be used for grid. To add the theme, you need to import material.css in styles.css.
@import '../node_modules/@syncfusion/ej2-grids/styles/material.css';
After adding the theme, you need to import grid module in app.module.ts.
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { GridComponent } from './grid/grid.component';
import { GridModule } from '@syncfusion/ej2-ng-grids';
@NgModule({
declarations: [
AppComponent,
GridComponent
],
imports: [
BrowserModule,
GridModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { } We have successfully completed configuration related to grid. Now you need to define your first grid in grid.component.html.
<ejs-grid></ejs-grid>
Then add the grid component in app.compnent.html.
<app-grid></app-grid>
After creating the grid component, you need to define an array of JavaScript objects in grid.component.ts.
this.data = [
{ OrderID: 10248, CustomerID: 'VINET', Freight: 32.38 },
{ OrderID: 10249, CustomerID: 'TOMSP', Freight: 11.61 },
{ OrderID: 10250, CustomerID: 'HANAR', Freight: 65.83 },
{ OrderID: 10251, CustomerID: 'VICTE', Freight: 41.34 },
{ OrderID: 10252, CustomerID: 'SUPRD', Freight: 51.3 },
{ OrderID: 10253, CustomerID: 'HANAR', Freight: 58.17 },
{ OrderID: 10254, CustomerID: 'CHOPS', Freight: 22.98 },
{ OrderID: 10255, CustomerID: 'RICSU', Freight: 148.33 },
{ OrderID: 10256, CustomerID: 'WELLI', Freight: 13.97 },
]; Bind the data to the grid using the dataSource property, which accepts an array of JavaScript objects.
<ejs-grid [dataSource]="data"></ejs-grid>
Grid has an option to define columns as directives. In these column directives, we have properties to customize columns. Let’s check the properties used here:
For this demo, we are going to define columns like the following.
<ejs-grid [dataSource]='data'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column>
<e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
<e-column field='Freight' textAlign='Right' format='c2' width=120></e-column>
</e-columns>
</ejs-grid>
Go to the application directory and launch the server using the following commands.
ng serve –open
Once all the files are compiled successfully, it will serve the site.
Grid should look something like this.
Now, you have the basic working grid with data populated. We are going to learn how to enable some more commonly used built-in features. Before adding these features, we need to define services in providers of app.module.ts. These services will provide a way to access their functionalities from grid.
import { GridModule, PageService, SortService, FilterService, GroupService, AggregateService } from '@syncfusion/ej2-ng-grids';
@NgModule({
declarations: [
AppComponent,
GridComponent
],
imports: [
BrowserModule,
GridModule
],
providers: [PageService, SortService, FilterService, GroupService, AggregateService],
bootstrap: [AppComponent]
})
export class AppModule { } Once the PageService is injected in providers, we can gain access to paging functionalities. Also, we need to enable allowPaging in grid to enable the pager.
As of now, default paging is enabled. Now I am going to customize the default pager with pageSettings. Here we defined the pageSettings.pageSize as 3 to define the number of records to be displayed per page.
<ejs-grid [dataSource]='data' [allowPaging]='true' [pageSettings]="pageSettings">
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column>
<e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
<e-column field='Freight' textAlign='Right' format='c2' width=120></e-column>
</e-columns>
</ejs-grid>
@Component({
selector: 'app-grid',
templateUrl: './grid.component.html',
styleUrls: ['./grid.component.css'],
encapsulation: ViewEncapsulation.None
})
export class GridComponent implements OnInit {
public data: Object[];
public pageSettings: Object;
constructor() { }
ngOnInit() {
this.data = [
{ OrderID: 10248, CustomerID: 'VINET', Freight: 32.38 },
{ OrderID: 10249, CustomerID: 'TOMSP', Freight: 11.61 },
{ OrderID: 10250, CustomerID: 'HANAR', Freight: 65.83 },
{ OrderID: 10251, CustomerID: 'VICTE', Freight: 41.34 },
{ OrderID: 10252, CustomerID: 'SUPRD', Freight: 51.3 },
{ OrderID: 10253, CustomerID: 'HANAR', Freight: 58.17 },
{ OrderID: 10254, CustomerID: 'CHOPS', Freight: 22.98 },
{ OrderID: 10255, CustomerID: 'RICSU', Freight: 148.33 },
{ OrderID: 10256, CustomerID: 'WELLI', Freight: 13.97 },
];
this.pageSettings = { pageSize: 3 };
}
} After enabling paging, grid will be like this:
After SortService is injected in providers, we need to enable allowSorting in grid to gain its functionalities.
<ejs-grid [dataSource]='data' [allowPaging]='true' [allowSorting]='true' [pageSettings]="pageSettings">
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column>
<e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
<e-column field='Freight' textAlign='Right' format='c2' width=120></e-column>
</e-columns>
</ejs-grid>
Interact with column headers to sort rows based on columns in either ascending or descending order.
Grid has different filter UIs, such as filter bar, filter menu, check box, and Excel-like filters. In this demo application, we are going to use filter menu to filter records. For injecting this filtering feature, we need to define FilterService in providers. Also, to gain filter functionalities and define the filter UI, we need to enable allowFIltering and define filterSettings.type as Menu.
<ejs-grid [dataSource]='data' [allowPaging]='true' [allowSorting]='true' [allowFiltering]='true'
[filterSettings]='filterSettings' [pageSettings]="pageSettings">
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column>
<e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
<e-column field='Freight' textAlign='Right' format='c2' width=120></e-column>
</e-columns>
</ejs-grid>
@Component({
selector: 'app-grid',
templateUrl: './grid.component.html',
styleUrls: ['./grid.component.css'],
encapsulation: ViewEncapsulation.None
})
export class GridComponent implements OnInit {
public data: Object[];
public pageSettings: Object;
public filterSettings: Object;
constructor() { }
ngOnInit() {
this.data = [
{ OrderID: 10248, CustomerID: 'VINET', Freight: 32.38 },
{ OrderID: 10249, CustomerID: 'TOMSP', Freight: 11.61 },
{ OrderID: 10250, CustomerID: 'HANAR', Freight: 65.83 },
{ OrderID: 10251, CustomerID: 'VICTE', Freight: 41.34 },
{ OrderID: 10252, CustomerID: 'SUPRD', Freight: 51.3 },
{ OrderID: 10253, CustomerID: 'HANAR', Freight: 58.17 },
{ OrderID: 10254, CustomerID: 'CHOPS', Freight: 22.98 },
{ OrderID: 10255, CustomerID: 'RICSU', Freight: 148.33 },
{ OrderID: 10256, CustomerID: 'WELLI', Freight: 13.97 },
];
this.pageSettings = { pageSize: 3 };
this.filterSettings = { type: 'Menu' };
}
} After defining the filter menu, the filter UI would be like this:
If GroupService is injected in providers, then we need to enable allowGrouping in grid to access its functionalities.
<ejs-grid [dataSource]='data' [allowPaging]='true' [allowSorting]='true' [allowFiltering]='true'
[allowGrouping]='true' [filterSettings]='filterSettings' [pageSettings]="pageSettings">
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column>
<e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
<e-column field='Freight' textAlign='Right' format='c2' width=120></e-column>
</e-columns>
</ejs-grid>
To use aggregation in grid, we need to inject AggregateService. After injecting the service, we need to define aggregations as directives to direct a child of grid. In this demo, we are going to use the Sum built-in aggregate for freight column.
<ejs-grid [dataSource]='data' [allowPaging]='true' [allowSorting]='true' [allowFiltering]='true'
[allowGrouping]='true' [filterSettings]='filterSettings' [pageSettings]="pageSettings">
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column>
<e-column field="CustomerID" headertext="Customer ID" width="120"></e-column>
<e-column field="Freight" textalign="Right" format="c2" width="120"></e-column>
</e-columns>
<e-aggregates>
<e-aggregate>
<e-columns>
<e-column type="Sum" field="Freight" format="C2">
<ng-template #footerTemplate let-data>Sum: {{data.Sum}}</ng-template>
</e-column>
</e-columns>
</e-aggregate>
</e-aggregates>
</ejs-grid>
After defining aggregation, the total sum is rendered in the footer element of grid.
In this blog, we have learned how to create a simple grid and enhance its fundamental features using Angular CLI and grid from a node package manager. Grid has a lot of other advanced features, such as data binding with different adaptors, data manipulation (CRUD), column resizing, column choosing, column menu, state persistence, copying to clipboard, responsiveness, and virtualization. There is a lot more we can do with grid! In our next blogs, we can see how easy it is to configure these advanced features.
Feel free to visit the grid source in GitHub, sample browser and documentation to explore live samples of its features and API. Also be sure to check out the grid sample in GitHub, which is readily runnable, and see just how easy it is to create and configure grid.
If you have any questions or require clarification, please let us know in the comments section. You can also contact us through our support forum or Direct-Trac. We are happy to assist you!