search envelope-o feed check
Home Unanswered Active Tags New Question
user comment-o

dropdown in progress bar

Related article: React Gantt Chart Tutorial
Asked by Rehan Imran
3 months ago.

i am having progress bars in front of all the tasks. I want a dropdown action button in a progress bar. or may be when i click on the progress bar a dropdown should open. Is that possible ?

Answer posted by Dan Letecky [DayPilot]
3 months 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 months old and has been closed. Please create a new question if you have anything to add.