Search This Blog

Thursday, January 25, 2018

Ignite UI Data grid in SharePoint Online using AJAX

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



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>


No comments:

Post a Comment