Customizing the Group Collapse Button

If you're using folding in your application, then you might also use CollapsibleNodeStyleDecorator to add collapse buttons to your group nodes. In this case, you might want to change the collapse button visualization.

CSS Styling

The collapse button offers a CSS class .yfiles-collapsebutton that allows to style the button's DOM elements. Since the button consists of a g element with several children, you might also have to style the children. Use the Elements view of your browser to find out about the DOM structure of the button. Here is the general DOM structure:

<g class="yfiles-collapsebutton yfiles-collapsebutton-checked">
  <rect></rect> <!-- border and background -->
  <path></path> <!-- +/- icon -->
</g>

Here's an example style:

.yfiles-collapsebutton rect {
  fill: #eeeeee;
  fill-opacity: 1;
  stroke: #202020;
}
.yfiles-collapsebutton path {
  fill: #202020;
  stroke: #202020;
}

You can also style the checked or unchecked state using the classes yfiles-collapsebutton-checked and yfiles-collapsebutton-unchecked.

Changing Button Placement and Insets

Place the button with the buttonPlacement property of the CollapsibleNodeStyleDecorator using one of the default label models that yFile for HTML provides. The button is treated as a label for calculating the placement.

Set the insets for the button using the insets property. This sets the space that the group style should reserve for the button. Please note that the group node style must support this feature for this setting to take effect.

Customizing the Button on DOM-Level

If you want to create a custom button visualization, subclass CollapsibleNodeStyleDecoratorRenderer and createButton. Create the desired button DOM element. Wrap the element in an SvgVisual and return it. More information about creating a visual can be found at the Custom Styles Tutorial.

Adding the Collapse Functionality to a Custom Style

You can use function addToggleExpansionStateCommand() to turn an arbitrary DOM element into a custom collapse/expand button. The function adds a click listener to the given element that executes the TOGGLE_EXPANSION_STATE. Call this function in your custom style's createVisual function to create a custom collapse/expand button.