We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Adding,editing and deleting properties of Gannt Chart Asp.Net Core (MVC .Net 5.0)

ClientSideEvents doesn't work in EJ2. I don't know how to use javascript and ajax, How do I send data from view to controller and then to database. My code at below:


@using Syncfusion.EJ2.Gantt;

@using Syncfusion.EJ2.Grids;

<html>

<head>

    <script src="~/Scripts/ej/jquery-1.10.2.min.js"></script>

    <script src="~/Scripts/ej/jquery.easing.1.3.min.js"></script>

    <script src="~/Scripts/ej/jquery.globalize.min.js"></script>

    <script src="~/Scripts/ej/jsrender.min.js"></script>

    <script src="~/Scripts/ej/ej.web.all.min.js"></script>

    <script src="~/Scripts/ej/ej.unobtrusive.min.js"></script>

    <link rel='nofollow' href="~/Themes/ej.theme.min.css" rel="stylesheet" />

    <link rel='nofollow' href="~/Themes/ej.widgets.core.min.css" rel="stylesheet" />

</head>

<body>

        <div>

            @(Html.EJS().Gantt("Editing").DataSource((IEnumerable<object>)ViewBag.DataSourceChild)

            .TaskFields(ts => ts.Id("TaskId").Name("TaskName").StartDate("StartDate").EndDate("EndDate").Duration("Duration").Progress("Progress").Dependency("Predecessor").Child("SubTasks").Notes("Notes").ResourceInfo("ResourceId"))

            .EditSettings(es => es.AllowAdding(true).AllowEditing(true).AllowDeleting(true).AllowTaskbarEditing(true).ShowDeleteConfirmDialog(true)).AllowResizing(true).AllowSelection(true)

            .Toolbar(new List<string>() { "Add", "Edit", "Update", "Delete", "Cancel", "ExpandAll", "CollapseAll", "Indent", "Outdent", "ZoomIn", "ZoomOut", "ZoomToFit" })

            .GridLines(Syncfusion.EJ2.Gantt.GridLine.Both).Height("800px").TreeColumnIndex(1).ResourceFields(rf => rf.Id("ResourceId").Name("ResourceName"))

            .Resources((IEnumerable<object>)ViewBag.Resources).HighlightWeekends(true)

            .TimelineSettings(tl => tl.TopTier(tt => tt.Unit(TimelineViewMode.Week).Format("dd MMM , y")).BottomTier(bt => bt.Unit(TimelineViewMode.Day)))

            .Columns(col =>

            {

                col.Field("TaskId").HeaderText("ID").Width(80).MinWidth(8).Add();

                col.Field("TaskName").HeaderText("Job Name").Width(250).MinWidth(120).MaxWidth(300).Add();

                col.Field("StartDate").HeaderText("Start Date").Width(135).MinWidth(8).Add();

                col.Field("EndDate").HeaderText("End Date").Width(135).MinWidth(8).Add();

                col.Field("Duration").HeaderText("Duration").Width(120).MinWidth(8).Add();

                col.Field("Progress").HeaderText("Progress").Width(120).MinWidth(8).TextAlign(TextAlign.Center).Add();

                col.Field("Predecessor").HeaderText("Dependency").MinWidth(8).TextAlign(TextAlign.Center).Width(135).Add();

            })

            .LabelSettings(ls => ls.TaskLabel("TaskName").RightLabel("ResourceId"))

            .EditDialogFields(edf =>

            {

                edf.Type(DialogFieldType.General).Add();

                edf.Type(DialogFieldType.Dependency).Add();

                edf.Type(DialogFieldType.Resources).Add();

                edf.Type(DialogFieldType.Notes).Add();

            })

            .EventMarkers(em =>

            {

                em.Day("4/17/2019").Label("Project approval and kick-off").Add();

                em.Day("5/3/2019").Label("Foundation inspection").Add();

                em.Day("6/7/2019").Label("Site manager inspection").Add();

                em.Day("7/16/2019").Label("Property handover and sign-off").Add();

            })

            .ProjectStartDate("03/25/2019")

            .ProjectEndDate("07/28/2019")

            .ShowColumnMenu(true).AllowFiltering(true).AllowSorting(true).AllowRowDragAndDrop(true)

            .SelectionSettings(sel =>

            {

                sel.Type(SelectionType.Multiple);

            })

            .SplitterSettings(spl =>

            {

                spl.ColumnIndex(1);

            })

            .EnableContextMenu(true).ActionComplete("actionComplete")

            .Render()

            )

            @*@(Html.EJS().ScriptManager())*@


            <script type="text/javascript">


                // To update the database through dialog editing or tool bar editing

                function actionComplete(args) {


                    if (args.requestType === 'save' && args.addedRecord) {

                        //Newly Added Record is obtained here , which can be updated to database

                        var ganttRecord = args.addedRecord.item;

                        if (args.addedRecord.parentItem)

                            ganttRecord["ParentId"] = args.addedRecord.parentItem.taskId;

                        $.ajax({

                            type: "POST",

                            url: "/Gantt/Add", //Add is Server side method

                            data: ganttRecord,

                            dataType: "json"


                        });

                        if (args.updatedRecords && args.updatedRecords.length)

                            updateRecords(args.updatedRecords);


                    } else if (args.requestType === 'delete') {

                        var data = args.data;

                        var ganttRec = data.item;

                        $.ajax({

                            type: "POST",

                            url: "/Gantt/Add", //Delete is Server side method

                            data: ganttRec,

                            dataType: "json"

                        });


                        if (data.hasChildRecords) {

                            deleteChildRecords(data);

                        }

                        if (args.updatedRecords && args.updatedRecords.length)

                            updateRecords(args.updatedRecords);

                    }


                    // To update the database during Outdent,editing,indent,predecessor update operation

                    else if (args.requestType == "indent" || args.requestType == "outdent" || args.requestType == "recordUpdate" || (args.requestType === 'save' && args.modifiedRecord)) {

                        var ganttRec = [];

                        if (args.requestType == "save")

                            ganttRec.push(args.modifiedRecord);

                        else

                            ganttRec.push(args.data);

                        if (args.updatedRecords && args.updatedRecords.length)

                            ganttRec = ganttRec.concat(args.updatedRecords);

                        updateRecords(ganttRec);

                    }

                    else if (args.requestType == "dragAndDrop") {

                        var ganttRec = [];

                        ganttRec.push(args.draggedRow);

                        if (args.updatedRecords && args.updatedRecords.length)

                            ganttRec = ganttRec.concat(args.updatedRecords);

                        updateRecords(ganttRec);

                    }


                }


                //Delete inner level child records

                function deleteChildRecords(record) {

                    var childRecords = record.childRecords,

                        length = childRecords.length,

                        count, currentRecord;

                    for (count = 0; count < length; count++) {

                        currentRecord = childRecords[count];

                        $.ajax({

                            type: "POST",

                            url: "/Gantt/Add", //Delete is Server side method

                            data: currentRecord.item,

                            dataType: "json"

                        });


                        if (currentRecord.hasChildRecords) {

                            deleteChildRecords(currentRecord);

                        }

                    }

                }

                //update the record

                function updateRecords(records) {

                    var updateRecord = [];

                    if (records && records.length) {

                        var length = records.length;

                        for (var i = 0; i < length; i++)

                            updateRecord.push(records[i].item);

                    }

                    $.ajax({

                        type: "POST",

                        url: '/Gantt/Add', //Update is Server side method

                        contentType: "application/json; charset=utf-8",

                        data: JSON.stringify(updateRecord),

                        dataType: "json",

                    })

                }

            </script>

        </div>

</body>

</html>



1 Reply

UA Udhayakumar Anand Syncfusion Team April 7, 2023 04:02 AM UTC

Hi Mesut


Thank you for contacting us regarding the issue you faced with updating data on the server-side using AJAX. We apologize for any inconvenience this may have caused you.


After reviewing your query, we recommend using the batchURL method to trigger the server-side method automatically while performing any action. This method is an efficient way to update data on the server-side, and you can find more details in the UG link provided below.


UG LINK : https://ej2.syncfusion.com/aspnetmvc/documentation/gantt/data-binding#remote-save-adaptor


If this is not what you’re looking for please provide us the details that are listed below


  1. Why do you want to use ajax in this particular case?
  2. Could you please provide us the sample
  3. You’re using script of ej1 so could you please confirm whether you’re using ej2 or J query based


Regards,

Udhayakumar


Loader.
Up arrow icon