Oracle JET: Detail Row with Tree Table; Expanding rows on page load

We already have a best example given in the Oracle JET cookbook. This post is providing a small yet useful extension to this existing example.


Courtesy:  OJET Cookbook example: Detail Row with Tree Table

We see the rows are not expanded on the page load, as shown below.

Some or most of the times, we have a requirement to expand the first row by default. To do this, we take help of the class FlattenedTreeDataProviderView 

The constructor of this class has a second parameter. This parameter is a JSON object, and it has predefined property called "expanded ", as shown below.

Reference: oj.FlattenedTreeDataProvider

Before we provide the value, we need to make a small change at the line, where the ADP is getting created. The keyAttributes should be changed from { keyAttributes: 'id' } to { keyAttributes: 'attr.id' }.











This is because, the JSON structure itself tells that, each parent row, is keyed by property attr, as shown below

The expanded property should have a value, of type KeySet, that gives the required keys of the rows that should be expanded. This can be done as below.

After this, we see the row with id as t1 is added as a key. This should mean that, first row should be expanded. Let us refresh the page. Now after the refresh, we see the first row is expanded by default.

If we add t2 also, then we can have both the rows expanded, on the page load.