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

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.

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