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

• Angular
  • app.component.html
  • app.component.ts
• React
  • App.tsx
• Vue
  • HomeContent.vue
• jQuery
  • index.html
  • index.js
• ASP.NET Core
  • Index.cshtml

Documentation

• Gantt - Getting Started
• Gantt - taskEditDialogShowing Event
• Gantt - updateTask Method
• Gantt - assignResourceToTask Method
• Gantt - unassignResourceFromTask Method

Does this example address your development requirements/objectives?

(you will be redirected to DevExpress.com to submit your response)