Approved
Last Updated: 21 Nov 2019 23:54 by Ben
Vaishali
Created on: 01 Oct 2019 12:57
Category: Gantt
Type: Feature Request
1
Update Gantt tasks through external editor

Implement support for external editor in the Gantt. Instead of using an editor template or calling the editTask method, make possible Gantt tasks to be updated without opening the default editor.

A modification in a child task, e.g. changing its start date, should also update the summary task.

2 comments
Ben
Posted on: 21 Nov 2019 23:54

Vaishali,

We use the gantt control in a similar way to how you are requesting. The initial task is created using the gantt control's Add Task button which allows creation of a root or child task. Using this button seeds our database with all of the required fields to support the gantt control. To edit tasks once they have been added to the gantt control we use the Edit event.

.Events(e => e.Edit("projectPlanTaskGanttChange"))

The edit event calls the following javascript which suppresses the standard gantt popup so we can display our custom popup.

function projectPlanTaskGanttChange(e) {
    var gantt = e.sender;
    var selection = gantt.select();

    if ($(e.container).hasClass('k-popup-edit-form')) {             // keeps standard edit popup box from displaying
        e.preventDefault();
    }

    if (selection.length) {
        var dataItem = gantt.dataItem(selection);
        editProjectPlanTask(dataItem.TaskId, dataItem.title);      // calls another javascript method to display custom popup
    }
}

function editProjectPlanTask(projectPlanTaskId, title) {
    $('#TaskId').val(projectPlanTaskId);

    var window = $("#projectPlanTaskWindow").data("kendoWindow");
    window.title("Edit " + title);

    window
        .center()
        .open()
        .element.scrollTop(0);    // ensures window scrolls to top upon opening

    $.ajax({
        type: "GET",
        url: '/ProjectPlan/GetProjectPlanTaskPartialView',
        cache: false,
        data: {
            projectPlanTaskId: projectPlanTaskId
        },
        dataType: 'html',
        success: function (data) {
            // return the _ProjectPlanTaskPopUp.cshtml partial view into the Kendo Window replacing the content of the ProjectPlanTaskForm div
            $("#ProjectPlanTaskForm").html(data);
        },

        error: function () {
            $(".message").html("<span class='bold'>Error!</span> There was a problem retrieving this project plan task.");
            $('#TaskError').show().delay(7500).fadeOut('slow')
        }
    });

    event.preventDefault();
    return false;
};

 

We use the below popup to save gantt required fields plus many other data elements as you can see from the screen capture below. It's a little clunky in that the task is initially added to the gantt (using the Add Task button) and then you double click on it to edit in our custom popup. It works pretty well though as an option while you're waiting for your feedback request to be completed.

Good luck, Ben

ADMIN
Ivan Danchev
Posted on: 01 Oct 2019 13:06

Hello Vaishali,

Thank you for logging this feature request. We will consider it for a future Kendo UI release.

Regards,
Ivan Danchev
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.