[ANGULAR] Dynamically hide levels in tree hierarchy

[cheradee]

Hi,

Given this 4 leveled hierarchy: Airport > Terminal > Gates > Gate,

If we have 4 buttons:

Airport | Terminal | Gates | Gate

the 4 buttons above can be selected in combination. what is displayed in the hierarchy is dependent on what is selected.

Example:

Selected are in bold

Scenario 1:

Airport | Terminal | Gates | Gate

this will show: Airport > Gates > Gate

Scenario 2:

Airport | Terminal | Gates | Gate

this will show: Gates

Scenario 3:

Airport | Terminal | Gates | Gate

this will show: Airport > Gate

etc...

Does Bryntum have a feature/way for this to be achieved easily without restructuring the ResourceStore records?

Thanks,
Chardine

[alex.l]

Hi Chardine,

Try to use this feature https://bryntum.com/docs/scheduler-pro/api/Grid/feature/TreeGroup

[cheradee]

Hi,

Thank you for the suggestion. We've decided to go with that feature. But we have additional question:

Can we add additional fields in the row elements rendered by the groupings so that our hover handler can determine that row's grouping (e.g. whether it's an Airport or Terminal group row)?

Thanks,
Chardine

[mats]

Can you please share a mock image / screenshot of your desired result?

[alex.l]

If it's hover, I think it will be more easy to operate with DOM, so you could try to check CSS classes for that.
You can set class for a row using https://bryntum.com/docs/scheduler-pro/api/Grid/column/Column#config-renderer
It has access to a row element and a record, that should be enough to decide. element.classList.add(className) will do the job.
https://www.w3schools.com/jsref/prop_element_classlist.asp

[cheradee]

Hi,

MicrosoftTeams-image (2).png (67.58 KiB) Viewed 233 times

In the image above, if a user hovers over the airport1 row, how can our onCellMouseOver listener determine that:
#1 it is an Airport type row grouping and
#2 specifically the airport1 Airport

Is it possible to give it a custom "key"?

Likewise, in the image below, if a user hovers over the terminal South row, we want to determine that:
#1 it is a Terminal type row grouping
#2 specifically the terminal South Terminal

MicrosoftTeams-image (3).png (33.94 KiB) Viewed 233 times

Note that we are only inserting the leaf nodes (e.g. Gate A, Gate B). The Airport and Terminal rows are controlled by treeGroup.

[marcio]

Hi cheradee,

Checking cellMouseOver documentation https://www.bryntum.com/docs/scheduler/api/Grid/view/mixin/GridElementEvents#event-cellMouseOver you'll see that we have a record parameter, which is a model containing all the info related to the record of that hovered cell.

In the image above, if a user hovers over the airport1 row, how can our onCellMouseOver listener determine that:
#1 is an Airport type row grouping and
#2 specifically the airport1 Airport

To identify #1, you can use https://www.bryntum.com/docs/grid/api/Core/data/mixin/TreeNode#property-childLevel, in your example, childLevel = 0 is an Airport type row grouping.

Related to #2, you can access record.name

record.name // record.name will be airport 1

The same applies to Terminal, but for #1, in your example, childLevel = 1 is a Terminal type row grouping, and for #2, you'll be able to access

record.name // record.name will be terminal South