we are now working on Table Expansion property of Pentaho CDE. Simple, expanding a Main Table on click and render relevant data in Any Chart / table.
Before stepping into CDE lets start preparing SQL. The below example is developed by using foodmart as Postgres Database. You can see my SQL once you download and import my export in CDE.
Step 1: Prepare your SQL queries for 3 tables.
Step 2: Datasources Panel.
1) Create datasource by giving driver class name, URL and username , Password. Dont forget to name your Datasource.
2) Put your SQL which is prepared in Step 1
Step 3: Layout Panel / Structure
1) Create 2 rows, “MainTable” as row1 and “TableExpansion” as row2.
2) Create 2 columns with in row2 (TableExpansion) , Name column1 & column1 as Table2 and Table3
First let us display main table data and then will continue to look at table expansion.
Step 4: Components Panel
1) Get a table component and provide datasource name and HTML Object.
In this case, row 1 “MainTable” is HTML Object for Main Table in Components Panel.
Believing now you should be able to preview your 1st table data.
Add 2 more table components. These 2 tables shows up the data when you click on “department id” column from Main table.
Be careful with naming convention when you duplicate the table component (provide / change datasource name, htmlobject name and give another name for table component).
Change below values from Advanced Properties of Main Table Component:
- Expand Container Object = TableExpansion (Row2 name from layout Structure)
- Expand on Click = true
NO worries, when you preview it seems something odd behaviour like on first view below 2 tables are appearing and when i click on main table the same 2 tables are not showing. Basically those 2 tables should be seen when you click on main table.
Here, we need to apply small CSS code.
Give this CSS class name on row 2 properties.
Here is the Source Code to download Table Expansion.
Thanks to All.