Table View Tutorial. Step 4: Process and Shape Data
- 5 minutes to read
In the previous step, you enabled the View‘s auxiliary UI elements. This step describes how to shape and process data in the following ways:
- Sort and group
- Search and filter
- Calculate totals
- Apply conditional formatting
Set the Options.SortByDisplayText property to isbtOn. This value indicates that the View uses cell display text in sort operations. Otherwise, the View sorts data by cell values (that is, indexes).
Last Name column and set its SortOrder property to soAscending to sort data rows in alphabetical order.
Status columns to the Group by box panel to group data as shown in the following image.
Find and Filter Options
This panel allows a user to type search requests into its Find box to filter records and highlight search results.
Expand the FindPanel property and follow the steps below:
Set the Behavior property to fcbSearch to use the panel in search mode when the control highlights text matches that meet the active search criteria.
Assign fpdmManual to the DisplayMode property. This option allows a user to press Ctrl+F when the grid View has focus or click the expand button to open the panel.
Switch the Layout property value to fplCompact. The panel shrinks its elements and arranges control buttons inside its Find box.
Set the UseExtendedSyntax property to True to enable special characters that allow a user to set up multiple filter or search criteria simultaneously.
Collapse the FindPanel property and set the ScrollbarAnnotations.Active property to True to enable scrollbar annotations. The vertical scrollbar displays annotations if the View’s data rows contain strings that match a user’s search request.
The image shows the configured Find Panel:
This row allows a user to filter data rows by column cell values.
Last Name and
First Name columns. Assign foContains to the Options.FilterRowOperator property to associate a column with the
CONTAINS operator that checks if a column’s cell values include the specified string.
Assign sfbAlways to the OptionsView.ShowColumnFilterButtons property to display filter buttons.
Set the Filtering.ColumnPopupMode property to fpmExcel to display Excel-inspired filter dropdowns for the View columns.
Filter Criteria Appearance
A token appears when a user specifies a new filter criterion.
Summaries display totals calculated from column cell values. The Table View supports the following summary types: footer summaries, group summaries, and summary groups. In this tutorial, we add only footer and group summaries.
Select the View and set the OptionsView.Footer property to True to display the footer summary.
Now select the
Last Name column, expand its Summary property and adjust the footer summary as follows:
Set the FooterKind property to skCount to display the number of records against all records.
Count = #string to the FooterFormat property to specify the format pattern for the footer’s display text.
The result is shown below:
Last Name column, expand its Summary property and adjust the group summary as follows:
Set the GroupKind property to skCount to display the number of records within a group.
Count = #string to the GroupFormat property to specify the format pattern for the group summary’s display text.
The conditional formatting helps you to emphasize important information for a user.
Now create a rule that highlights with a light-green color all data rows that contain the “Manager” word.
Right-click the View in the Structure Navigator and select “Conditional Formatting…” in the context menu to open the Conditional Formatting Rules Manager.
Click the “New Rule” button and select “Use formula to determine which cells to format” in the opened dialog. Then, input the following expression:
This expression uses the same syntax as calculated expressions created in the second step.
Click the Format… button to open the Format Cells dialog. Open the Fill tab, select a light-green color from the palette, and click OK to close the dialog.
Click OK to close the Conditional Formatting Rule dialog.
Check the “Apply to the Record” flag, click Apply, and click OK to close the dialog.
The image shows the result:
Expand Data Rows
When you launch the application, all grouped data rows are initially collapsed, even if you previously expanded them at design time.
begin // Expands all data rows tvEmployees.ViewData.Expand(False); // Moves focus to the first data row tvEmployees.Controller.FocusedRowIndex := 0; end;
The final step describes how to use skins and other appearance-related settings to customize the application UI.