Ignite UI Data grid in SharePoint Online

Check SharePoint Developer Training Course [$66 OFF] || InfoPath Alternatives -> Try Now

This SharePoint Online tutorial, we will discuss how to use Infragistics UI Data grid in SharePoint Online. In the same way, we can also use the Ignite UI Data grid in SharePoint 2013/2016.

In most case we are using the JQuery data table for data binding purposes it’s free of cost with awesome features. But now a day in the market more data grids are available for free of cost and cost with most enhanced feature to play against data like sorting, Paging, Filtering, exporting to file like PDF, Excel, most important thing is the performance,

But the thing is why am choose this Infragistics UI data grid because I loved its performance of binding data in a fraction of seconds when comparing to the JQuery data table.

SharePoint 2016 Tutorial Contents

What Is Ignite UI Data grid?
How to use Ignite UI Data grid in SharePoint Online
Ignite UI Data grid Paging:
Ignite UI Data grid Sorting:
Ignite UI Data grid Filter:
Ignite UI Data grid GroupBy:

What Is Ignite UI Data grid?

Ignite UI Data grid (Igrid) is a Jquery grids which binds the data to allow have the following features

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

How to use Ignite UI Data grid in SharePoint Online

Now, we will see how we can use the Ignite UI Data grid in SharePoint Online Office 365.

Below are some of the dependencies required for Using Igrid.

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

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

For example, going to create a Product list to hold product information like ProductId, ProductName, Category, Stock.

I have pushed some dummy data up to 5000 items in a sharepoint list.

Ignite UI Data grid in SharePoint Online

Open Sharepoint Designer -> Site Assets -> Create an Igid.html file into it.

Open the HTML file in an editor. Add the below references in the <head></head> Section.

<!– Ignite UI Required Combined CSS Files –>
<link href="https://cdn-na.infragistics.com/igniteui/2017.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="https://cdn-na.infragistics.com/igniteui/2017.2/latest/css/structure/infragistics.css" rel="stylesheet" />
<script src="https://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<!– Ignite UI Required Combined JavaScript Files –>
<script src="https://cdn-na.infragistics.com/igniteui/2017.2/latest/js/infragistics.core.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/2017.2/latest/js/infragistics.lob.js"></script>

Create an AJAX request to fetch the data from a sharepoint list.

Add the HTML into the <body></body> tag.

<table id="grid"></table>

Declare the necessary variables:

<script>
$(function() {
var datas;
var results = [];
$.ajax({
url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('accessoriesdata')/items?$top=5000",
method: "GET",
headers: {
"Accept": "application/json; odata=verbose"
},
success: function(data) {
datas = data.d.results;
console.log(datas);
},
error: function(error) {
console.log(JSON.stringify(error));
}
});
});
</script>

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

Am just formatted a data source like this

var result = [
{ "ProductID": 1, "ProductName": "Adjustable Race", "Category": "AR-5381", "Stock":"" }

]
Code:
results.push({ "ProductID": datas[i].ID,
"ProductName": datas[i].ProductName,
"Category":datas[i].Category,
"Stock":datas[i].Stock
});
console.log(results);

Now Next Step Go and Initialize the Igrid function of the table

function initIgrid(value){
//Initialize the grid
$("#grid").igGrid({
autoGenerateColumns: false,
//Define the columns and it's datatypes
columns: [
{ headerText: "Product ID", key: "ProductID", dataType: "number" },
{ headerText: "Product Name", key: "ProductName", dataType: "string" },
{ headerText: "Category", key: "Category", dataType: "string" },
{ headerText: "Stock", key: "Stock", dataType: "number" }
],
//Pick the datasource to display
dataSource: value
});
}

Now the overall scripts look likes below

<script>
$(function() {
var datas;
var results = [];
$.ajax({
url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('accessoriesdata')/items?$top=5000",
method: "GET",
headers: {
"Accept": "application/json; odata=verbose"
},
success: function(data) {
datas = data.d.results;
console.log(datas);
// Iterate through the data

for(i=0; i < datas.length; i++)
{
results.push({ "ProductID": datas[i].ProductID,
"ProductName": datas[i].Title,
"Category":datas[i].Category,
"Stock":datas[i].Stock
});
}
console.log(results);
initIgrid(results); //Call the function after successful results
},
error: function(error) {
console.log(JSON.stringify(error));
}
});
});

function initIgrid(value){
$("#grid").igGrid({
autoGenerateColumns: false,
columns: [
{ headerText: "Product ID", key: "ProductID", dataType: "number" },
{ headerText: "Product Name", key: "ProductName", dataType: "string" },
{ headerText: "Category", key: "Category", dataType: "string" },
{ headerText: "Stock", key: "Stock", dataType: "number" }
],
dataSource: value
});
}
</script>

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

Just set hidden true inside the column object as well as you can formatting the width, height of the column.

columns: [
 { headerText: "Product ID", key: "ProductID", dataType: "number" , hidden: true }
 ]

Ignite UI Data grid Paging:

Paging allows you to shows the number of items per page you can navigate next and previous to next items.

features: [
{
name: "Paging", // It defines the paging feature
pageSize: 10 // Mention the page size it view 10 per page now
}

Ignite UI Data grid Sorting:

This feature allows to sort the data in the columns, It also supports single and multi-column sorting

features: [
{
name: "Sorting", // Define sorting feature
type: "local" // Type of sorting example local, remote
}
]

Ignite UI Data grid Filter:

It helps to filter the data based on conditions for example Equals, Not equals, contains, etc..

{
name: "Filtering", // Define filter feature
type: "local", // Type of filter
columnSettings: [
{
// If you does not want to filter some column just set allowFiltering: false By default others columns are set to true.
columnKey: "ProductName",
allowFiltering: false
},
{
columnKey: "Stock",
condition: "greaterThan" // Also set the default condition
}
]
}

Ignite UI Data grid GroupBy:

This feature helps to group the product you can easily understand the value of the particular set of products.

name: "GroupBy",
//By default set the groupby value of particular column
columnSettings: [
{
columnKey: "ProductName",
isGroupBy: true
}
]

Just Drag and Drop the columns to the Groupby section to grouping the data.

Finally, code looks like below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<script src="https://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<!– Ignite UI Required Combined JavaScript Files –>
<script src="https://cdn-na.infragistics.com/igniteui/2017.2/latest/js/infragistics.core.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/2017.2/latest/js/infragistics.lob.js"></script>

<!– Ignite UI Required Combined CSS Files –>
<link href="https://cdn-na.infragistics.com/igniteui/2017.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="https://cdn-na.infragistics.com/igniteui/2017.2/latest/css/structure/infragistics.css" rel="stylesheet" />
</head>
<body>
<table id="grid"></table>
<script>
$(function() {
var datas;
var results = [];
$.ajax({
url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('accessoriesdata')/items?$top=5000",
method: "GET",
headers: {
"Accept": "application/json; odata=verbose"
},
success: function(data) {
datas = data.d.results;
console.log(datas);
for (i = 0; i < datas.length; i++) {
results.push({
"ProductID": datas[i].ProductID,
"ProductName": datas[i].Title,
"Category": datas[i].Category,
"Stock": datas[i].Stock
});
}
console.log(results);
initIgrid(results)
},
error: function(error) {
console.log(JSON.stringify(error));
}
});
});

function initIgrid(value) {
$("#grid").igGrid({
autoGenerateColumns: false,
primaryKey: "ProductID",
caption : "<span> <img src='https://sharepointtechie.sharepoint.com/sites/auto/SiteAssets/sp.png' alt='sharepoint' height='50px'></span>",
width: '100%',
columns: [{
headerText: "Product ID",
key: "ProductID",
dataType: "number",
hidden: true
},
{
headerText: "Product Name",
key: "ProductName",
dataType: "string"
},
{
headerText: "Category",
key: "Category",
dataType: "string"
},
{
headerText: "Stock",
key: "Stock",
dataType: "number"
}
],
dataSource: value,
features: [{
name: "Paging",
pageSize: 10
},
{
name: "Sorting",
type: "local"
},
{
name: "Filtering",
type: "local",
columnSettings: [{
columnKey: "ProductName",
allowFiltering: false
},
{
columnKey: "Stock",
condition: "greaterThan"
}
]
},
{
name: "Resizing"
},
{
name: "GroupBy",
columnSettings: [{
columnKey: "ProductName",
isGroupBy: true
}]
},
]
});
}
</script>
</body>
</html>

You may like following SharePoint tutorials:

Bind SharePoint list data using jQuery datatable using content search web part in SharePoint
Load the Data in JQuery DataTable from SharePoint 2013 List using REST API
Get Current User Details Using JavaScript Object Model (jsom) and jQuery in SharePoint 2013/2016/Online
Create a Custom Calendar in SharePoint using Rest API and jQuery
Display Task List data in a table using SharePoint REST API and filter by status column
Change the SharePoint List View into JQuery News Ticker Using JS Link CSR
Show SharePoint list view data in accordion view using jslink
Different Types of Navigation in SharePoint 2013/2016/Online
Image rendition in SharePoint 2013 tutorial
jQuery News Ticker using content search web part in SharePoint 2013
JQuery accordion using content search web part in SharePoint server 2013
Create a chart using chart.js in SharePoint Server 2013/2016
JQuery Tabs using content search web part in SharePoint 2013

This SharePoint Online tutorial, we learned how to use the Ignite UI Data grid in SharePoint Online using AJAX.

Vinodh Narayanan

Download SharePoint Online Tutorial PDF FREE!

Get update on Webinars, video tutorials, training courses etc.