How Do I Add Search And Find To A Table?
This Lesson will add a Search/Find function to a DataGrid table.
Prepare the Required Controls in A New Stack
This Lesson will require:
- a DataGrid table (with some text data would be useful) (1)
- an editable field (2) This field will allow us to input a value to find inside the data grid columns.
- a button for changing the default column behavior (3)
- the installation of an action script
Once the controls are created, open DGH for the DataGrid and expand the Behaviors/Templates topic (4).
First Step - Change the Default Column Behavior Of The Data Grid
The first step that is required is to change the default column behavior of the data grid using the DGH's Behavior Picker.
Click the ... button next to the Default Column Behavior in the Behaviors/Templates topic to bring up the Behavior Picker and install and link new behavior script for the data grid to the button we previously placed.
When finished the button id of the Default Behavior Button should be visible as the value of the Default Column Behavior property in the Behaviors/Templates topic.
Step 2 - Link the Search Field with the Data Grid
The second step is to associate our search field with the Search/Find action.
This time, we will select the editable field by using the DGH's Control Picker.
Expand the Action Scripts topic in the Table Properties list.
Open the Control Picker for the Search/Find property by clicking on its modify ... Button (1).
As with the Behavior Picker, click on the Choose button (2) in the resulting open a window (which then becomes a Cancel button), click on the field (3) that will act as our search input, and finally click Confirm (4) (This was the Cancel button).
You have just installed several handlers:
- in the field itself
- in the data grid
- in the card
- and in the data grid default column behavior script now located in the Default Column Behavior button
Step 3 - Define the Columns to be Searched
Finally we need to inform our newly installed scripts which columns we want searched. To do this, we will use the DGH's Columns Picker.
Expand the Action Parameters topic on the Table Properties list and click the modify [...] button for the Columns Query List.
This will open the Columns Picker.
The window lists all the columns of the data grid and provides a checkbox next to each one as well as a global checkbox at the top of the list.
Select Col1 and Col3 and validate your choice by clicking the green button.
We can now test the work we have accomplished on the data grid with the Search / Find feature.
The string "es" is only found in "Col1" and "Col3". The one located in row 2 Col 2 is ignored, as expected.
Last Step - Testing the Result
We can now test the work we have accomplished on the DataGrid with the Search/Find feature. Click on the "Browse" tool and type the letters "es" in the search field we defined.
The string "es" is only found in "Col1" and "Col3".
"Col 2" is ignored, as expected.
As a last test, open the Column Picker and select Col2 and deselect Col1 and Col3
Return to the stack, click in the search field, delete the current entry and type "es" again.
Only occurrences of "es" present in Col2 are hilited, all occurrences of "es" in Col1 and Col3 are not.