[REACT] How the custom widget works in the embedded chart sample

[lizhu6]

hello, I tried to follow the embedded chart sample code at - https://bryntum.com/products/schedulerpro/examples/embedded-chart/

May I know how the ButtonColumn widget column changes the icon from "b-fa-chevron-down" to "b-fa-chevron-up"? I can see when the down icon is clicked, it calls

record.toggleExpanded()

.

but I don't get how the icon updates. Please clarify, thank y

[ghulam.ghous]

Hi @lizhu6,

It is done through css, please check the ButtonColumn.scss inside resources in the source code of this example. You are gonna find the related css there:

.b-row-expanded .b-fa-chevron-down {
    transform : rotate(180deg);
}

Regards,
Ghous