Grid Search

Grid Search Specification

Contents

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

1. Overview

Add an API that would easily let the developer implement search functionality within the grid, which would be able to scroll to the first cell containing the specified string and highlight the all 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 specify if the string should be an exact match to the cell's value 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 and/or an exact match (both default 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 and/or an exact match (both default 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

IgxColumnComponent Options

Name	Type	Description
searchable	boolean	Determines whether the column is included in the search. If set to false, the cell values for this column will not be included in the results of the search API of the grid (defaults to true)

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 and/or an exact match (both default 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 findNext/findPrev method highlight all the occurrences of the searched string in the grid - for exact match 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 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 cell with active highlight is still highlighted after the grid's perPage property is changed while paging is enabled
• The cell with active highlight is still highlighted after filtering is applied to the grid
• The search results do not include hidden columns
• The active highlight honors the visible columns order

Manual

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

5. Limitations

• The search functionality will replace any cell template with a div element and spans which highlight the searched text in the cell value. This means that it can lead to unexpected behavior when you have more complicated templates, containing several elements or events hooked into the template. If you have a column with such template, you should either use alternative approaches, such as a column formatter, or to set the searchable property on the column to false.
• The search will not work properly when using remote virtualization
• When the text in the cell is too large to fit and the text we are looking for is cut off by the ellipsis, we will still scroll to the cell and include it in the match count, but nothing will be highlighted