/devextreme-gantt-how-to-create-a-custom-task-details-dialog

DevExtreme, MVC

Primary LanguageTypeScriptOtherNOASSERTION

Gantt for DevExtreme ASP.NET MVC - How to implement a custom "Task details" dialog

This example demonstrates how display a custom "Task details" dialog instead of the default dialog.

Implementation Details

  1. Add a popup edit form in your application.

    @(Html.DevExtreme().Popup()
    .ID("taskDetailsPopup").MaxWidth(800).MaxHeight(500).Title("Task Details")
    .ContentTemplate(new TemplateName("customPopupContentTemplate"))
    .ToolbarItems(items => {
        items.Add()
            .Widget(editor => editor.Button()
                .Text("Confirm")
                .Type(ButtonType.Success)
                .OnClick("onConfirmClick")
            )
            .Location(ToolbarItemLocation.After)
            .Toolbar(Toolbar.Bottom);
        items.Add()
            .Widget(editor => editor.Button()
                .Text("Cancel")
                .Type(ButtonType.Success)
                .OnClick("onCancelClick")
            )
            .Location(ToolbarItemLocation.After)
            .Toolbar(Toolbar.Bottom);
    })
    .OnInitialized("onPopupInitialized").OnShown("onShown")
)
    function onPopupInitialized(e) {
    popup = e.component;
}

  2. Handle the taskEditDialogShowing event to prevent the default dialog and display your custom dialog instead. Bind the form in the popup control to processed task data.

    function onTaskEditDialogShowing(e) {
    e.cancel = true;
    showTaskDetails(gantt.getTaskData(e.key))
}
function showTaskDetails(data) {
    popup.option("visible", true);
    if (form)
        form.option('formData', data);
}

  3. Call the updateTask and assignResourceToTask/unassignResourceFromTask methods to update Gantt data.

    function onConfirmClick(e) {
    let result = form.validate();
    if (result.isValid) {
        var data = form.option("formData");
        gantt.updateTask(data.Key, data);
        gantt.unassignAllResourcesFromTask(data.Key);
        data.Resources.forEach(r => gantt.assignResourceToTask(r, data.Key));
        popup.hide();
    }
}

Files to Review