Ignite UI Data grid in SharePoint Online

- by Vinodh Narayanan - Leave a Comment
ignite ui grid sorting
SharePoint deveopment training course

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.

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.

ignite ui grid sharepoint online

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);
ignite ui grid sharepoint online

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>
ignite ui grid sharepoint 2013
ignite ui grid sharepoint 2016

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 grid paging

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 grid sorting

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 grid filter
ignite ui grid filter sharepoint online

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
}
]
ignite ui grid group by

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

ignite ui grid grouping

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>
ignite ui grid sharepoint online

You may like following SharePoint tutorials:

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

Check out Best Alternative to InfoPath -> Try Now

free sharepoint training

SharePoint Online FREE Training

JOIN a FREE SharePoint Video Course (3 Part Video Series)

envelope
envelope

About Vinodh Narayanan

View all posts by Vinodh Narayanan →