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?
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
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.
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.
Download SharePoint Online Tutorial PDF FREE!
Get update on Webinars, video tutorials, training courses etc.
