![...](https://www.winwire.com/wp-content/uploads/2023/11/Angular-JS-–-Basics-ng-grid-features-Part-2-graphic.webp)
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.
![](https://www.winwire.com/wp-content/uploads/2023/11/angular-JS.webp)
In JS, add filter options
![](https://www.winwire.com/wp-content/uploads/2022/06/angular-JS1.png)
![](https://www.winwire.com/wp-content/uploads/2023/11/Angular-JS2.webp)
![](https://www.winwire.com/wp-content/uploads/2023/11/Angular-JS3.webp)
Ng-change event calls below function, here am searching EmployeeName column with search text which is defined by ng-model
![](https://www.winwire.com/wp-content/uploads/2023/11/Angular-JS4.webp)
OUTPUT
Filter on Employee Name
![](https://www.winwire.com/wp-content/uploads/2023/11/Angular-JS5.webp)
Cell Selection and Cell Inline Edit
Ng-grid has inbuilt cell selection and edit feature. We can enable/disable it for specific columns in column definitions.
Below is the example where theuser can select specific rows and display specific column values of selected rows in a Div.
In HTML, selected EmployeeNames will be displayed as array which is represented by selectedIDs
![](https://www.winwire.com/wp-content/uploads/2022/06/Angular-JS6.png)
![](https://www.winwire.com/wp-content/uploads/2023/11/Angular-JS7.webp)
OUTPUT
![](https://www.winwire.com/wp-content/uploads/2023/11/Angular-JS8.webp)
Selected rows employee names are displayed as array below.
![](https://www.winwire.com/wp-content/uploads/2023/11/Angular-JS9.webp)
Cell Editing
![](https://www.winwire.com/wp-content/uploads/2023/11/Angular-JS9-1.webp)