I’m trying to add button or badge to the row header and allow it to be clickable. Its not showing up even though I see I should be able to set the html & css with onBeforeRowHeaderRender. This is for the angular component.
Are there any examples of this or restrictions for lite users?
You can set a custom HTML for the row header using onBeforeRowHeaderRender like this:
DayPilotonBeforeRowHeaderRender: args => {
args.row.html = `<div style="font-weight:bold; margin-bottom:5px;">${args.row.name}</div>`;
}However, this is just raw HTML and it doesn’t let you include Angular-specific tags and properties.
The Lite version doesn’t support Angular components in the row headers yet.
One of the upcoming releases will add support for active areas in row headeers which can be used to add active elements with a custom Angular click handler.
Thank you!
There is now a new release available (2025.3.703) which supports row header active areas.
There is also a demo available that shows how to use the onBeforeRowHeaderRender event to define them.
This question is more than 1 month old and has been closed. Please create a new question if you have anything to add.