Ignite UI Data grid in SharePoint Online using AJAX – Part one

0
273
views

Download Code:  Igrid

 

In this blog, I have explained 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
  • ui.core.js
  • ui.widget.js
  • datasource.js
  • ui.widget.js
  • ui.shared.js
  • templating.js
  • 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

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 and create AJAX request to fetch the information from sharepoint list

$(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));           
 }       
 });   
});

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”: ”12”
 }
]

 

Code:

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

 

Result:

Now Next Step Go and Initialize the Igrid function

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) {
    //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                  
 });
}             
</script>

Results:

 

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
}]

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
}
]

 

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
}
]
}

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
}
]

 

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

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>

To be continued more awesome features of Infragistics data grid in the upcoming articles

Happy sharepoiniting!…..

Please follow and like us:
0

LEAVE A REPLY

Please enter your comment!
Please enter your name here