Add onClick functionality in onBeforeRowHeaderRender or onBeforeRowHeaderDomAdd

Asked by Anonymous
1 years ago.

We want to add `onClick` feature in DOM element inside `onBeforeRowHeaderRender` which renders html by using `row.html = ReactDOMServer.renderToString()`. But it does not work.

Hence we tried using `onBeforeRowHeaderDomAdd` and onClick event works as expected. But onBeforeRowHeaderDomAdd disables expandable tree styles.

Link: https://forums.daypilot.org/question/6099/onbeforerowheaderdomadd-disables-expandable-tree-styles

But if we enable it by using `args.target = ‘Text’` then our custom JSX code does not work and onClick also does not work. Is there any solution to this?

Answer posted by Dan Letecky [DayPilot]
1 years ago.

This seems to be a problem of some of the older releases. The latest version (2025.2.6442) should work fine with args.target = "Text";.

Could you please give it a try? Please let me know if the problem persists.

Comment posted by Anonymous
1 years ago.

Thanks Dan. It’s better than before however in the UI, row header width and height does not auto adjust based on content length. Below is the image.

We have rowHeaderWidth and rowMinHeight property to use, however can we achieve this without explicitly updating the width and height similar like in onBeforeRowHeaderRender? Thanks

Comment posted by Dan Letecky [DayPilot]
1 years ago.

The row height is calculated from eventHeight and the maximum number of overlapping events + it takes into account adjustments like rowMinHeight. So it doesn’t depend on the row header content.

There was a problem with automatic adjustment of the row header width when using custom JSX - React postpones the rendering and the content wasn’t available when the width was calculated.

Anyway - in the latest sandbox build (2025.2.6453) the width calculation should work fine with JSX in the row headers as well.

Please let me know if there is any problem.

Comment posted by Anonymous
1 years ago.

We updated to the version 2025.2.6458. The height is working however the width is not working and it works only upon using rowHeaderWidth.

Comment posted by Dan Letecky [DayPilot]
1 years ago.

The React Scheduler: Rendering JSX Components in Row Headers tutorial now uses the latest release and the default rowHeaderWidth is reduced to 20 to test the row header width auto-fit.

It seems to work fine and the row header width is extended as expected. Could you please give it a try to see if you experience the problem in this project?

This question is more than 1 month old and has been closed. Please create a new question if you have anything to add.