Ignite UI Data grid in SharePoint Online using AJAX

ignite ui grid sorting
InfoPath alternatives for form designing SharePoint

In this article we will discuss about how to use Infragistics UI Data grid in SharePoint online.

Introduction:
In most case we are using JQuery data table for data binding purpose 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 performance, But the things 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 JQuery data table.

What Is Igrid?
Igrid is a Jquery grids It’s binds the data allow have the following features
– Sorting
– Filtering
– Paging
– Grouping
– Column Hiding
– Resizing
– Row and Cell selection
– Summaries
– Tooltips
– Data Editing

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 form the sharepoint custom list.

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

I have pushed some dummy data upto 5000 items in sharepoint list.

Ignite UI Data grid in SharePoint Online
Ignite UI Data grid in SharePoint Online

Open Sharepoint Designer -> Site Assets -> Create a Igid.html file into it
Open the HTML file in a 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 a AJAX request to fetch the data from 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 Data grid in SharePoint Online
Ignite UI Data grid in 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);
Result:

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

Results:

ignite ui grid sharepoint
ignite ui grid sharepoint

 

ignite ui grid sharepoint online
ignite ui grid sharepoint online

 

It’s showing the 5000 Items from the sharepoint list without paging
Now am going to show how 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 }
]

Paging:
Paging allows you to shows the number of items per page you can navigate next and previous to next items
Code:
features: [

{

name: “Paging”, // It defines the paging feature

pageSize: 10 // Mention the page size it view 10 per page now

}

ignite ui grid sharepoint 2013
ignite ui grid sharepoint 2013

 

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

}

]

infragistics ignite ui samples
infragistics ignite ui samples

 

Filter:
It helps to filter the data based on conditions for example Equals, Not equals, contains etc..
Code:
{
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 infragistics
ignite ui infragistics
ignite ui grid
ignite ui grid

GroupBy:
This feature helps to grouping the product you can easily understand the value of the particular set of products
Code:
name: “GroupBy”,
//By default set the groupby value of particular column

columnSettings: [

{

columnKey: “ProductName”,

isGroupBy: true

}

]

ignite ui grid angular 2
ignite ui grid angular 2

 

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

ignite ui grid sorting
ignite ui grid sorting

Finally code look like below
Code:
<!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 grouping
ignite ui grid grouping

 

To be continued more awesome features of Infragistics data grid in the upcoming articles
Happy sharepointing!..

Similar SharePoint 2013 Tutorials


Leave a Reply