Hi,
how can I dynamically show or hide the Edit/Delete buttons for pens?
I tried using a Style Class, but I wasn't able to change the display property at runtime.
You use a binding on the display property.
Hi,
I’m talking about these specific buttons:
You would need to use a binding on the style class for the chart. That binding would toggle between two different style classes, one that would hide the buttons, and one that would show them.
You will need to define the classes in the advanced style sheet, or use other means of specifying the exact selectors you need.
Hi,
I probably didn't explain myself clearly: I actually need help with the style definition itself. Using these styles, I’m not able to achieve the desired result. Where am I going wrong?
For example:
This works (it hides the buttons), but it's always applied (obviously, since the class is not defined), so it can't be used in the PowerChart to dynamically hide/show the buttons:
.ia_powerChartComponent__penDataDisplay__table__icon.edit-pen-icon {display:none!important;}
.ia_powerChartComponent__penDataDisplay__table__icon.delete-pen-icon {display:none!important;}
This one, instead, is not interpreted correctly even though the style class is applied to the PowerChart component.
.show-pen-controls .ia_powerChartComponent__penDataDisplay__table__icon.edit-pen-icon {display:block!important;}
.show-pen-controls .ia_powerChartComponent__penDataDisplay__table__icon.delete-pen-icon {display:block!important;}
I assume that in the second example you are defining a style class in the properties named show-pen-controls. And the. Are using that exact same name in the stylesheet to define the class. However, when you use a style class in the designer properties, it is actually prepended with psc- if it is in the root styles folder. You need to use the modified name in the stylesheet so that you are selecting the correct class.
Yes… I had forgotten the "psc-" prefix before the class name… now it works! Thanks!