You can add custom objects (icons, etc.) to the row header columns using active areas.
To add an active area, use the onBeforeRowHeaderRender event handler:
onBeforeRowHeaderRender = (args) => {
args.row.columns[1].areas = [
{
right: 3,
top: 3,
bottom: 3,
width: 20,
height: 20,
padding: 3,
symbol: "../icons/daypilot.svg#edit",
fontColor: "white",
backColor: "#999",
style: "border-radius: 50%; cursor: pointer;",
onClick: args => {
const row = args.source;
DayPilot.Modal.alert("Edit: " + row.name);
}
}
];
}
You can mofidy the onClick
event handler to display a modal dialog with the dropdown.