Create a Report in which the User May Switch and Hide/Show Table Columns Dynamically
Environment
| Product | Progress® Telerik® Reporting |
Description
A common requirement is to be able to switch the order of table columns or to be able to hide/show them based on user choice.
In this article, we will demonstrate how you may achieve this functionality entirely inside the report definition.
Solution
Basic Approach with Report Parameters
Let's introduce a new Report Parameter for each table column. Each parameter will hold the name of one of the table columns. The first parameter will hold the name of the first column, the second parameter - the name of the second column, etc. That said, the Report Parameters will set the order of the table columns. Let's name the parameters Column1, Column2, etc.
We will use a CsvDataSource to set the AvailableValues of the parameters. It will have a single column with table column names.
Let's also make the parameters Nullable. This will let us hide the corresponding column when the parameter that represents it is Null.
In the table, the first column header cell will contain a TextBox with the value of the first parameter = Parameters.Column1.Value, the second column header is the value of the second parameter = Parameters.Column2.Value, and so on.
Correspondingly, the value of the detail row cell in the first column is set with the Expression = Fields(Parameters.Column1.Value), for the cell in the second column of the detail row with = Fields(Parameters.Column2.Value), etc. Note that the expressions utilize the Report Function Fields(name) with an argument the corresponding parameter value. This is equivalent to =Fields.[ColumnName].
To hide/show the table column, we may introduce a Conditional Formatting or Binding for the Visible property of the columns. The Expression should check whether the corresponding parameter is Null, for example, the Conditional Formatting Filtering Rule may look like this:
-
Expression
= Parameters.Column5.Value -
Operator
<> -
Value
Null
Note that if you use Conditional Formatting with the above rule, the table column should be initially hidden, and its Visible property should be set to True when the rule is fulfilled.
The above setting will let the user switch/hide/show the table columns directly, with the Report Parameters by selecting a column name for the corresponding position or setting the parameter value to Null.
Enhancing the Report UI with Navigate to Report Actions
Let's try to improve the User Experience by adding arrows in the column headers that will let us move the column to the right or to the left.
We need to replace the TextBoxes in the table headers with Panels that may host multiple report items. More specifically, we need a TextBox with the column name, and one or two arrows to move the column to the right and/or to the left.
We will use Shapes for the arrows and will set their Action property to Navigate to Report action. The idea is to render the same report with reordered parameters, which will simulate switching table columns order. For that reason, we set the URI of the action's ReportSource to the same report file, and in the Parameters collection we add the same parameter values, with two particular neighbor values switched, so that the report gets rendered with correctly switched table columns.
For example, the third column right arrow should make the current third column fourth, and vice versa, hence we need to set the ReportSource.Parameters as follows:
- (preserved) ReportSource parameter
Column1to have the value= Parameters.Column1.Value - (preserved) ReportSource parameter
Column2to have the value= Parameters.Column2.Value - (switched) ReportSource parameter
Column3to have the value= Parameters.Column4.Value - (switched) ReportSource parameter
Column4to have the value= Parameters.Column3.Value - (preserved) ReportSource parameter
Column5to have the value= Parameters.Column5.Value
Sample
You may find the example in our reporting-samples GitHub repository - SwitchAndHideTableColumns.trdx.