@(Html.EJ().Gantt("Gantt").
ClientSideEvents(eve =>
{
eve.ActionComplete("actionComplete");
eve.RowDragStop("rowDragStop");
}).
Datasource(ViewBag.dataSource)
)
@(Html.EJ().ScriptManager())
<script type="text/javascript">
function rowDragStop(args) {
//To update on drag&drop action
var cloneData = $.extend({}, args.draggedRow.item);
if (args.requestType == "insertAsChild") {
cloneData[args.model.parentTaskIdMapping] = args.targetRow.item[args.model.taskIdMapping];
}
if (args.requestType == "insertAbove" || args.requestType == "insertBelow") {
cloneData[args.model.parentTaskIdMapping] = args.targetRow.item[args.model.parentTaskIdMapping];
}
var data = cloneData;
$.ajax({
type: "POST",
url: '/Gantt/Update',
data: data,
dataType: "json",
});
}; function actionComplete(args) {
//To update on indent,outdent and taskbar editing action
if (args.requestType == "indent" || args.requestType == "outdent" || args.requestType == "recordUpdate") {
var data = args.data.item;
$.ajax({
type: "POST",
url: '/Gantt/Update',
data: data,
dataType: "json",
})
}
//To update the database while adding new record
if (args.requestType == "save" && args.addedRecord) {
var data = args.addedRecord.item;
$.ajax({
type: "POST",
url: '/Gantt/Add',
data: data,
dataType: "json",
error: function () {
alert("error")
}
});
}
//To update the database on delete action
if (args.requestType == "delete") {
var data = args.data.item;
$.ajax({
type: "POST",
url: '/Gantt/Delete',
data: data,
dataType: "json",
});
if (args.data.hasChildRecords) {
deleteChildRecords(args.data);
}
}
}
//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];
var data = currentRecord.item;
$.ajax({
type: "POST",
url: '/Gantt/Delete',
data: data,
dataType: "json",
});
if (currentRecord.hasChildRecords) {
deleteChildRecords(currentRecord);
}
}
}
</script> |
Client side event |
action |
Description |
actionComplete |
Add/Edit/Delete |
By using the actionComplete “requestType” argument we can peform any actions after add/edit/delete operations |
rowDragStop |
Drag/drop |
In rowDragStop event we can update the database on after drag and drop action |
function actionComplete(args) {
//To update the database while adding new record
if (args.requestType == "save" && args.addedRecord) {
var data = args.addedRecord.item;
$.ajax({
type: "POST",
url: '/Gantt/Add',
data: data,
dataType: "json",
success: function (result) {
ganttRefresh()
}
});
}
}
function ganttRefresh()
{
$.ajax({
type: "POST",
url: '/Gantt/GetUpdatedGanttdata',
contentType: 'application/json; charset=utf-8',
success: function (result) {
var updatedData = result,
ganttObj = $("#Gantt").data("ejGantt");
ganttObj.setModel({ "dataSource": updatedData });
}
});
} |
public ActionResult Add(GanttData Task)
{
con.Open();
using (SqlCommand sqlCommand = new SqlCommand(cmdString, con))
{
sqlCommand.Parameters.AddWithValue("@TaskName", "Name Modified" + Task.TaskId);
}
con.Close();
return Json(Task, JsonRequestBehavior.AllowGet);
} |