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