{"id":12408,"date":"2016-01-11T14:41:00","date_gmt":"2016-01-11T14:41:00","guid":{"rendered":"https:\/\/viewmyprojects.com\/winwirewp\/?p=12408"},"modified":"2023-11-30T11:11:29","modified_gmt":"2023-11-30T11:11:29","slug":"angular-js-basics-ng-grid-features-part-1","status":"publish","type":"post","link":"https:\/\/viewmyprojects.com\/winwirewp\/blog\/angular-js-basics-ng-grid-features-part-1\/","title":{"rendered":"Angular JS \u2013 Basics \u2013 ng-grid features \u2013 Part 1"},"content":{"rendered":"\n

Ng-grid is 100% angular grid which has no dependencies other than angular js. It has pagination, sorting, filtering and local data model binding\/editing built in allowing for quick and easy integration with any Angular JS application.<\/p>\n\n\n\n

In this post we will demonstrate few ng-grid features by using REST API over HTTP.
To get started we have add below references:
1. Angular JS
2. JQuery
3. Ng-Grid JS and CSS files<\/p>\n\n\n\n

Steps to get data from REST API over HTTP and data binding to ng-grid<\/strong><\/p>\n\n\n\n

HTML<\/strong><\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

JS<\/strong><\/p>\n\n\n\n

1. Declare your app module and add ng-grid<\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

2. Assign controller to your app module<\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

3. Script that returns JSON object from API using HTTP. Here am querying SharePoint list \u201cEmployeeDetails\u201d and retrieving values from 4 columns EmployeeID, EmployeeName, Department, ProfilePic.<\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

4. Now initialize grid options under same controller as data. This binds the data to grid.<\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

5. To bind only specific columns, we can define column definitions in ng-grid as below. It is common requirement for any Grid to have column names (display name) different from JSON name. Let\u2019s bind only 4 columns which are retrieved from list.<\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

OUTPUT<\/strong><\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

Pagination<\/strong><\/p>\n\n\n\n

When pagination is enabled, data is displayed in pages that can be browsed using built in pagination selector. Lets build simple pagination.<\/p>\n\n\n\n

To define page size and index,<\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n
\n
\"\"<\/figure><\/div>\n\n\n

To bind data when page is changed, we have to make http call in PagedDataAsync method,<\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

Finally while binding data, we have to enable pagination<\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

OUTPUT<\/strong><\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

Sorting<\/strong><\/p>\n\n\n\n

Sorting is \u2018ON\u2019 by default. You can set enableSorting flag in gridOptions to enable\/disable it.
Sorting can also be disabled at column level by setting enableSorting : false in column definition<\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

OUTPUT<\/strong>
Sorted by EmployeeName<\/strong><\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n
\n
\"\"<\/figure><\/div>","protected":false},"excerpt":{"rendered":"

Ng-grid is 100% angular grid which has no dependencies other than angular js. It has pagination, sorting, filtering and local data model binding\/editing built in allowing for quick and easy integration with any Angular JS application. In this post we will demonstrate few ng-grid features by using REST API over HTTP.To get started we have… Continue reading Angular JS \u2013 Basics \u2013 ng-grid features \u2013 Part 1<\/span><\/a><\/p>\n","protected":false},"author":63,"featured_media":16817,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_eb_attr":"","_uag_custom_page_level_css":"","footnotes":""},"categories":[1],"tags":[],"class_list":["post-12408","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","entry"],"acf":[],"featured_image_src":"https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2023\/11\/Angular-JS-Basics-ng-grid-features-Part-1-graphic.webp","author_info":{"display_name":"Sruthi","author_link":"https:\/\/viewmyprojects.com\/winwirewp\/author\/sruthi\/"},"views":3607,"uagb_featured_image_src":{"full":["https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2023\/11\/Angular-JS-Basics-ng-grid-features-Part-1-graphic.webp",800,440,false],"thumbnail":["https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2023\/11\/Angular-JS-Basics-ng-grid-features-Part-1-graphic-150x150.webp",150,150,true],"medium":["https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2023\/11\/Angular-JS-Basics-ng-grid-features-Part-1-graphic-300x165.webp",300,165,true],"medium_large":["https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2023\/11\/Angular-JS-Basics-ng-grid-features-Part-1-graphic-768x422.webp",750,412,true],"large":["https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2023\/11\/Angular-JS-Basics-ng-grid-features-Part-1-graphic.webp",750,413,false],"1536x1536":["https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2023\/11\/Angular-JS-Basics-ng-grid-features-Part-1-graphic.webp",800,440,false],"2048x2048":["https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2023\/11\/Angular-JS-Basics-ng-grid-features-Part-1-graphic.webp",800,440,false],"post-thumbnail":["https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2023\/11\/Angular-JS-Basics-ng-grid-features-Part-1-graphic.webp",800,440,false]},"uagb_author_info":{"display_name":"Sruthi","author_link":"https:\/\/viewmyprojects.com\/winwirewp\/author\/sruthi\/"},"uagb_comment_info":0,"uagb_excerpt":"Ng-grid is 100% angular grid which has no dependencies other than angular js. It has pagination, sorting, filtering and local data model binding\/editing built in allowing for quick and easy integration with any Angular JS application. In this post we will demonstrate few ng-grid features by using REST API over HTTP.To get started we have……","_links":{"self":[{"href":"https:\/\/viewmyprojects.com\/winwirewp\/wp-json\/wp\/v2\/posts\/12408","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/viewmyprojects.com\/winwirewp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/viewmyprojects.com\/winwirewp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/viewmyprojects.com\/winwirewp\/wp-json\/wp\/v2\/users\/63"}],"replies":[{"embeddable":true,"href":"https:\/\/viewmyprojects.com\/winwirewp\/wp-json\/wp\/v2\/comments?post=12408"}],"version-history":[{"count":2,"href":"https:\/\/viewmyprojects.com\/winwirewp\/wp-json\/wp\/v2\/posts\/12408\/revisions"}],"predecessor-version":[{"id":18888,"href":"https:\/\/viewmyprojects.com\/winwirewp\/wp-json\/wp\/v2\/posts\/12408\/revisions\/18888"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/viewmyprojects.com\/winwirewp\/wp-json\/wp\/v2\/media\/16817"}],"wp:attachment":[{"href":"https:\/\/viewmyprojects.com\/winwirewp\/wp-json\/wp\/v2\/media?parent=12408"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/viewmyprojects.com\/winwirewp\/wp-json\/wp\/v2\/categories?post=12408"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/viewmyprojects.com\/winwirewp\/wp-json\/wp\/v2\/tags?post=12408"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}