Sort, Filter, and Page Fast With Ignite UI for JavaScript Grid

Introduction

Ignite UI for JavaScript enables you to write web applications faster. You can use Ignite UI for JavaScript library with HTML5, jQuery, Angular, React, or ASP.NET MVC. It helps you to solve complex LOB requirements faster. The Ignite UI for JavaScript library makes it possible for you to quickly and efficiently add a fast, responsive grid with features like pagination, sorting, search, virtualization, and more.

In addition to seamlessly rendering large sets of data, Ignite UI for JavaScript Grid is loaded with many other features, such as filtering, paging, and sorting. You can learn more about Ignite UI for JavaScript features on the Ignite UI product page; you can also learn more about Angular in Angular Essentials, a free eBook published by Infragistics.

In this lesson, you will learn how to configure various important features of Ignite UI for JavaScript Grid.

Lesson Objectives

  1. Enable sorting on the grid
  2. Enable filters on the grid
  3. Enable paging on the grid

For more information on the controls used in this lesson, see Data Grid.

At the end of this lesson, you will have an Ignite UI for JavaScript Grid configured for basic features such as sorting, filtering, and pagination in an Angular application.

You can learn more about Ignite UI for JavaScript Angular 2.

Setting up the Project

You may download the starter project for this lesson by clicking here. (You can also download the final project by clicking here.)

After downloading the project, navigate to the directory and run the commands below:

  • npm install
  • npm start

You executed npm install command to install all dependencies, and to use the npm start command to run the Angular application. If the project setup is correct, you will have a running Angular application as shown in the image below.

Scroll to bottom of the application and you will find the Ignite UI for JavaScript Grid. At the end of the lesson, this grid will be configured with sorting, paging, and filter features.

Setting up project with Ignite Grid

Step 1 Enable Sorting

You can enable sorting on Ignite UI for JavaScript Grid by adding a feature with the name “Sorting” in the grid. Ignite UI for JavaScript Grid supports local and remote sorting.

To enable local sorting, create an object with the following properties and add it to the features property of the grid option:

  • name : set to Sorting
  • type : set to local

To do this, in the App folder, open the file grid.component.ts and add below getGridFeatures() function just after the getData() function.

getGridFeatures()
{
  return [
  {
    name: "Sorting",
    type: "local"
  }
  ];
}

Next, add sorting features to the grid options. For that in the this.gridOptions, add a new property called feature and set its value to this.getGridFeatures(). Updated ngOnInit() function in the grid.component.ts file will look like as shown in the code listed below:

ngOnInit() {
  this.stocks = this.getData();
  this.gridId = "grid1"
  this.gridOptions = {
    dataSource: this.stocks,
    autoGenerateColumns: true,
    features: this.getGridFeatures()
  }
}

Navigate to the application, scroll down, and at the bottom of the page, you will find the grid added as shown below:

Step 1: Enable Sorting

Click on any of the columns and you will find that the grid is sorted for that particular column as shown in the image above. In addition, you will notice that sorted column headers have sorting indicators applied, so sortable columns are distinguished visually from the rest of the columns in the grid. Ignite UI for JavaScript also supports sorting on multiple columns.

You have configured sorting locally. Ignite UI for JavaScript also supports remote sorting. To learn more, see Remote Sorting for Ignite UI Grid

Step 2 Enable Paging

You can enable paging on Ignite UI for JavaScript grid by adding a feature named “Paging” in the grid. Ignite UI for JavaScript Grid supports local and remote pagination.

To enable local paging, create an object with following properties and add to the features property of the grid option:

  • name : set to Paging
  • type : set to local
  • pageSize : 5

You can also set show/hide size drop-down or show/hide paging buttons, etc. Therefore, Paging feature object would look like below

{
  name: "Paging",
  type: "local",
  pageSize: 5
}

Add above object in features object array. To do that, open the file grid.component.ts and modify getGridFeatures() function such that it returns both paging and sorting features. After adding paging feature, getGridFeatures() function will look like below:

getGridFeatures() {
  return [
  {
    name: "Sorting",
    type: "local"
  },
  {
    name: "Paging",
    type: "local",
    pageSize: 5
  }
  ];
}

To test configured grid with paging: navigate to the application, scroll down, and at the bottom of the page you will find the grid added as shown in the image below:

Step 2: Enable Paging

Ignite UI for JavaScript also supports remote paging. To learn more, see Remote Paging with Ignite UI Grid

Step 3 Enable Filtering

You can enable filter on Ignite UI for JavaScript grid by adding a feature named “Filtering” in the grid.

To enable filtering, create an object with following properties and add to the features property of the grid option:

  • name : set to Filtering
  • allowFiltering : set to true
  • caseSensitive: set to false/true

Filtering feature object would look like below

{
  name: "Filtering",
  allowFiltering: true,
  caseSensitive: false
}

Add above object in features object array. To do that, open the file grid.component.ts and modify getGridFeatures() function such that it returns paging, sorting and filtering features. After adding filtering feature, getGridFeatures() function will look like below:

getGridFeatures() {
  return [
  {
    name: "Sorting",
    type: "local"
  },
  {
    name: "Paging",
    type: "local",
    pageSize: 5
  },
  {
    name: "Filtering",
    allowFiltering: true,
    caseSensitive: false
  }
  ];
}

To test the configured grid with filtering, navigate to the application, scroll down, and at the bottom of the page, you will find the grid added as shown below:

Step 3: Enable Filtering

As you will find the grid configured with filtering, paging, and sorting.

Conclusion

Ignite UI for JavaScript makes it possible to write your web applications faster. In addition to Angular, Ignite UI for JavaScript can be used in React, AngularJS, jQuery, and ASP.NET MVC. In this lesson, you learned to configure a grid for basic features like paging, sorting, and filtering.