Grid Search

Grid Search Specification

Contents

1. Overview
2. User Stories
3. API
4. Test Scenarios
5. Limitations

Objectives

Add an API that would easily let the developer implement search functionality within the grid, which would be able to scroll and focus the first cell containing the specified string and highlight the rest of the cells containing that string.

2. User Stories

As a citizen developer, I want to:

• be able to highlight all occurrences of a given string within the grid.
• be able to scroll to the first occurrence of a given string.
• be able to find the next/previous occurrence of the same string, keeping an "active" highlight on the current one.
• be able to specify if the string should be case sensitive or not.
• be able to configure how the highlight looks like.
• be able to persist the highlight through grid filtering, paging and sorting.

3. API

IgxGridComponent Methods

Name	Description	Return type	Parameters
findNext	Finds the next occurrence of a given string in the grid and scrolls to the cell if it isn't visible. Returns how many times the grid contains the string	number	The string to search and, optionally, if the search should be case sensitive (defaults to false)
findPrev	Finds the previous occurrence of a given string in the grid and scrolls to the cell if it isn't visible. Returns how many times the grid contains the string	number	The string to search and, optionally, if the search should be case sensitive (defaults to false)
clearSearch	Removes all the highlights in the grid	void	N/A
refreshSearch	Reapplies the existing search. Returns how many times the grid contains the last search	number	N/A

IgxGridComponent Options

Name	Type	Description
lastSearchInfo	ISearchInfo	Contains information about the last performed search

IgxGridCellComponent Methods

Name	Description	Return type	Parameters
highlightText	Highlights all occurrences of a string in a given cell. Return how many times the searched string is contained in the cell	number	The string to search and, optionally, if the search should be case sensitive (defaults to false)
clearHighlight	Removes all the highlights in the cell	void	N/A

4. Test Scenarios

Automation

• The findNext/findPrev method highlight all the occurrences of the searched string in the grid
• The findNext/findPrev method highlight all the occurrences of the searched string in the grid - for case sensitive searches
• The clearSearch method removes all highlights from the grid
• The findNext/findPrev method move the active highlight correctly
• The findNext/findPrev methods scroll the grid when the active highlight cell is not in view
• The highlight persist when a cell enters and exits edit mode
• Additional highlight is added when a cell enters edit mode and the user enters the searched string
• The active highlight persists when a cell enters and exits edit mode
• The active highlight is moved to the next cell when a user enters edit mode and deletes the searched string from the cell content
• The highlighted cells are still highlighted when the grid is sorted
• The cell with active highlight is still highlighted after the grid is sorted
• The findNext/findPrev methods successfully scroll the grid when paging is enabled
• The highlighted cells are still highlighted after the grid's perPage property is changed while paging is enabled
• The cell with active highlight is still highlighted after the grid's perPage property is changed while paging is enabled
• The highlighted cells are still highlighted when the grid is filtered.
• After a new filter is applied, the first occurrence of the searched string has the active highlight

Manual

• Test the performance of the findNext/findPrev methods when the grid has a lot of data

5. Limitations

• When using custom templates the user will need to setup the template properly if they need the searching logic to work. This means that they will need to decorate the ng-template with igxTextHighlight directive and provide a container element around the text content of the template with an id of "content". Also they will need to properly bind the directive inputs providing the directive with a unique identifier for the grid, class name for the normal highlight, class name for the active highlight, binding to the cell value, cell's row index, cell's column index and cell's grid page. For more information for the IgxTextHighlight directive's inputs, please visit its spec.
• When filtering a grid with an active search, the active highlight will not be kept on its current cell, but will be moved on the first occurrence of the searched string.