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

Filter<\/strong><\/p>\n\n\n\n

External filter option, where theuser can filter specific column based on search text.
In HTML, we have to add text box as below.<\/p>\n\n\n\n

Ng-model is a directive which binds the value of HTML controls to application data.
Ng-change is the event which is called on text change.<\/p>\n\n\n

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

In JS, add filter options<\/p>\n\n\n

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

Ng-change event calls below function, here am searching EmployeeName column with search text which is defined by ng-model<\/p>\n\n\n

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

OUTPUT
<\/strong>
Filter on Employee Name<\/p>\n\n\n

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

Cell Selection and Cell Inline Edit<\/strong><\/p>\n\n\n\n

Ng-grid has inbuilt cell selection and edit feature. We can enable\/disable it for specific columns in column definitions.<\/p>\n\n\n\n

Below is the example where theuser can select specific rows and display specific column values of selected rows in a Div.<\/p>\n\n\n\n

In HTML, selected EmployeeNames will be displayed as array which is represented by selectedIDs<\/p>\n\n\n

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

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

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

Selected rows employee names are displayed as array below.<\/p>\n\n\n

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

Cell Editing
<\/strong><\/p>\n\n\n

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

Filter External filter option, where theuser can filter specific column based on search text.In HTML, we have to add text box as below. Ng-model is a directive which binds the value of HTML controls to application data.Ng-change is the event which is called on text change. In JS, add filter options Ng-change event calls below… Continue reading Angular JS \u2013 Basics \u2013 ng-grid features \u2013 Part 2<\/span><\/a><\/p>\n","protected":false},"author":63,"featured_media":16816,"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-12395","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-\u2013-Basics-ng-grid-features-Part-2-graphic.webp","author_info":{"display_name":"Sruthi","author_link":"https:\/\/viewmyprojects.com\/winwirewp\/author\/sruthi\/"},"views":3558,"uagb_featured_image_src":{"full":["https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2023\/11\/Angular-JS-\u2013-Basics-ng-grid-features-Part-2-graphic.webp",800,440,false],"thumbnail":["https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2023\/11\/Angular-JS-\u2013-Basics-ng-grid-features-Part-2-graphic-150x150.webp",150,150,true],"medium":["https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2023\/11\/Angular-JS-\u2013-Basics-ng-grid-features-Part-2-graphic-300x165.webp",300,165,true],"medium_large":["https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2023\/11\/Angular-JS-\u2013-Basics-ng-grid-features-Part-2-graphic-768x422.webp",750,412,true],"large":["https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2023\/11\/Angular-JS-\u2013-Basics-ng-grid-features-Part-2-graphic.webp",750,413,false],"1536x1536":["https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2023\/11\/Angular-JS-\u2013-Basics-ng-grid-features-Part-2-graphic.webp",800,440,false],"2048x2048":["https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2023\/11\/Angular-JS-\u2013-Basics-ng-grid-features-Part-2-graphic.webp",800,440,false],"post-thumbnail":["https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2023\/11\/Angular-JS-\u2013-Basics-ng-grid-features-Part-2-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":"Filter External filter option, where theuser can filter specific column based on search text.In HTML, we have to add text box as below. Ng-model is a directive which binds the value of HTML controls to application data.Ng-change is the event which is called on text change. In JS, add filter options Ng-change event calls below……","_links":{"self":[{"href":"https:\/\/viewmyprojects.com\/winwirewp\/wp-json\/wp\/v2\/posts\/12395","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=12395"}],"version-history":[{"count":2,"href":"https:\/\/viewmyprojects.com\/winwirewp\/wp-json\/wp\/v2\/posts\/12395\/revisions"}],"predecessor-version":[{"id":18867,"href":"https:\/\/viewmyprojects.com\/winwirewp\/wp-json\/wp\/v2\/posts\/12395\/revisions\/18867"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/viewmyprojects.com\/winwirewp\/wp-json\/wp\/v2\/media\/16816"}],"wp:attachment":[{"href":"https:\/\/viewmyprojects.com\/winwirewp\/wp-json\/wp\/v2\/media?parent=12395"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/viewmyprojects.com\/winwirewp\/wp-json\/wp\/v2\/categories?post=12395"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/viewmyprojects.com\/winwirewp\/wp-json\/wp\/v2\/tags?post=12395"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}