Ng Grid

Posted onby admin

Hello Developers !!!

i am sharing with such things which i have implemented. i have played with SharePoint2013 , angularJS and ng-grid and that was seriously amazing.

Now i am going to explain scenario which i have implemented.

What u do If your client require to display SharePoint list data with CEWP(Content Editor web part) and it must be user friendly with highest look and feel ?

I guess , you guys understand the requirement carefully!!! Now i going to one step ahead . . . .

After listening the requirement , i just thinking which JS has to implement to fulfill Requirement, i have many option like NODE.JS , Angular.JS, JQuery etc . . So i think and tell my self.

Our documentation will help you to get up and running with AG Grid. Download v25 of the best Angular Grid in the world now. Hi All,In this video I have tried to demonstrate below mention the core features of ag-grid. SortingPaggingFilteringFormattingExportStyleThemesIt comes with.

Let’s Dipen , ready to Play with Angular.JS

now i have create one custom list in Sharepoint2013. i m not explaining you this thing , because i think it’s out of the track part . but i provide you link to refer for creating list.


Now, how many things you have to want to implement this things.

1) Index.HTML //To display the content in CEWP


3)ng-grid.Js and ng-grid.css

4)If you wan to add bootsrap than call bootstrap.css

5) main.js // your Scripting Logic and events are handled int his js file

now , i mention below index.HTMl File which i have created.


<!DOCTYPE html>
<html ng-app=”myApp”>
<head lang=”en”>

  • ng-grid=”gridOption” is a inbuilt property in Angular. “gridoption” is custome option list which is created by coder in custom js File . ii know you guys are little bit panic or confuse , but trust me , Honestly saying You can understand better , how to work this at end of the post .
  • Ng-grid Angular 6


    var app = angular.module(‘myApp’, [‘ngGrid’]); // myApp is our Root Element of the HTML. Ican say it’s Container to contain the element and data binding.
    app.controller(‘MyCtrl’, function($scope,$http) { // Myctrl is controller
    method: ‘GET’,
    url: _spPageContextInfo.webAbsoluteUrl + “/_api/web/lists/getByTitle(‘Task’)/items?$select=Title,CustomDate,Modified”, //rest Api to get the a Data from the Sharepoint list .
    headers: { “Accept”: “application/json;odata=verbose” }
    }).success(function (data, status, headers, config) {
    $scope.totalServerItems = data.d.results;
    }).error(function (data, status, headers, config) {
    alert(“Error Occured” + “Status Code = ” + Status);
    $scope.gridOptions = {
    data: ‘totalServerItems ‘,
    columnDefs: [
    {field: ‘Title’, displayName: ‘Title’},
    {field: ‘CustomDate’, displayName: ‘Date’,cellFilter: ‘date:’dd-MMM-yyyy”}]

    $scope,$http ? What is it ? . . Wait wait wait … i m going explain it in detail . . . 🙂

    Scope As Data-modal :

    Scope is the glue between application controller and the view.Both controllers and directives have reference to the scope, but not to each other. This arrangement isolates the controller from the directive as well as from the DOM.

    $http A Service

    The $http service is a core Angular service that facilitates communication with the remote HTTP servers via the browser’s XMLHttpRequest object .Simple language it use to get data from external sources.


    Guhit Ng Grid

    Column Definition to display the column to gird.There’s bunch of options available in angular . you can utilize it depending on your requirement.I have used Field which is display no of column to grid .

    Field has two property : 1)field : which is column name which you want to display data or ic an sat binding of data. 2) displayName which renders the column header or Title on page .

    You can find other option From bellow link .

    now you can Call this index.HTMl file to Content Editor Web part . and Refresh the page . . . You can see list of data in CEWP and That will be amazing. . .

    I tried my best to describe the concept.I hope, you guys enjoyed this blog . If have an any query , kindly leave your comment.

    Ng Griddle Grill

    Happy Coding 🙂

    PrimeNG FlexGrid

    PrimeNG has been providing Grid CSS layout utility to serve as the official grid system however it has limitations because of the float based design. In order to modernize it, we’ve introduced a new Grid System called PrimeFlex which is a lightweight flex based responsive layout utility optimized for mobile phones, tablets and desktops. Flex Grid CSS is not included in PrimeNG as it is provided by PrimeFlex, a shared grid library between PrimeFaces, PrimeNG and PrimeReact projects.

    Depinisyon Ng Grid

    Grid CSS on the other hand is deprecated now, it will not be included in primeng.css in PrimeNG 8 however there are no plans to remove it, if you like to keep using it for backward compatibility, you may include it manually since it will be shipped with PrimeNG distribution.

    Live Demo

    See the FlexGrid demo at PrimeNG Showcase that utilizes PrimeFlex.

    Ng-grid angular


    Angular Ui Grid Example

    PrimeFlex is available at npm for download. Once it is downloaded to your node_modules, you may use css imports or angular-cli.json to add it to your project.