Ignite UI Data Grid In SharePoint Online Using AJAX - Part One

In this article, I have explained how to use Infragistics UI Data Grid (igGrid) in SharePoint online.

Introduction

In most cases, we use jQuery data table for data binding because it’s free of cost with awesome features. Nowadays, several data grids are available in the market for free or at a minimal cost with most enhanced features to play against the data, like Sorting, Paging, Filtering, and exporting to files like PDF, Excel. However, the most important thing is the performance and I am choosing this Infragistics UI data grid because I love its performance of binding the data in a fraction of second when comparing to the jQuery data table.

What Is igGrid?

igGrid is a jQuery grid that binds the data and has the following features.

• Sorting
• Filtering
• Paging
• Grouping
• Column Hiding
• Resizing
• Row and Cell selection
• Summaries
• Tooltips
• Data Editing

Some of the dependencies are required for using the igGrid.

• jquery-1.9.1.js
• ui.core.js
• ui.widget.js
• datasource.js
• ui.widget.js
• ui.shared.js
• templating.js
• util.js

Now, open the SharePoint online data to create a data source for pulling the data from the SharePoint custom list.

For example, we are going to create a Product list to hold the product information, like ProductId, ProductName, Category, Stock etc. I have pushed some dummy data up to 5000 items in SharePoint list.

Open SharePoint Designer -> Site Assets and create Igid.html file into it. Open the HTML file in a text editor to add the following references in the <head></head> Section.

Create an AJAX request to fetch the data from SharePoint list. Add the HTML into the <body></body> tag.

Declare the necessary variables.

In the browser console, you are now able to see how many records we retrieved in that AJAX Call.



I have just formatted a data source like this.

Code

Result



Now, in the next step, go and initialize the igGrid function of the table.

The overall script looks like below.

Result





It’s showing 5000 items from the SharePoint list without paging. Now, I am going to show how to hide the column “ProductID”.