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>
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
Regards,
Udhayakumar