How to connect and update changes from Gantt using Entity Framework
In Gantt, we can load data from SQL database using ADO.NET Entity Data Model and can update the changes to the SQL database on CRUD operations.
Please refer following link to create the ADO.NET Entity Data Model in Visual studio,
SQL database connection in Gantt can be established by using data model entity class. The Data Model entity class name is used as the connectionString name to establish the connection with the SQL database. The ‘connectionStrings’ will be automatically create in our web.config file once entity data model get generated.
Please refer following code snippet for adding SQL connection in web.config
<connectionStrings> <add name="GanttDataSourceEntities" connectionString="metadata=res://*/Models.Model1.csdl|res://*/Models.Model1.ssdl|res://*/Models.Model1.msl;provider=System.Data.SqlClient;provider connection string="data source=(LocalDB)\MSSQLLocalDB;attachdbfilename=|DataDirectory|\GanttDataSource.mdf;integrated security=True;MultipleActiveResultSets=True;App=EntityFramework"" providerName="System.Data.EntityClient" /> </connectionStrings>
CRUD actions are performed by entity classes to update Gantt data using the client side event ActionComplete and with PageMethods. The event argument requestType of the ActionComplete client-side event is used to identify the type of action performed in Gantt such as update, delete, add new task.
Please refer the below code example for updating the changes to the SQL database.
Web Page Code[ASPX]:
<ej:Gantt ID="GanttControl" runat="server" //… ActionComplete="ActionComplete"> </ej:Gantt>
<asp:ScriptManager ID="ScriptManager" runat="server" EnablePageMethods="True" />
<script type = "text/javascript">
function ActionComplete(args) {
//To update on indent,outdent,taskbar editing and predecessor drawn action
if (args.requestType == "indent" || args.requestType == "outdent" || args.requestType == "recordUpdate" || (args.requestType === 'save' && args.modifiedRecord) || args.requestType == "drawConnectorLine") {
var ganttRec = [];
// Dialog Editing
if (args.requestType == "save")
ganttRec.push(args.modifiedRecord);
else if (args.requestType == "drawConnectorLine")
ganttRec.push(args.currentRecord);
else
ganttRec.push(args.data); // Cell Editing
if (args.updatedRecords && args.updatedRecords.length)
ganttRec = ganttRec.concat(args.updatedRecords);
updateModifiedGanttRecords(ganttRec);
}
//Newly Added Record is obtained here , which can be updated to database
else if (args.requestType == "save" && args.addedRecord) {
var data = args.addedRecord.item;
PageMethods.AddIt(data);
// args.updatedRecords will have the array of dependent hierarchy of modified
//parents record when add new record as child of another record.
if (args.updatedRecords && args.updatedRecords.length)
updateModifiedGanttRecords(args.updatedRecords);
}
else if (args.requestType == "dragAndDrop") {
var ganttRec = [];
ganttRec.push(args.draggedRow);
if (args.updatedRecords && args.updatedRecords.length)
ganttRec = ganttRec.concat(args.updatedRecords);
updateModifiedGanttRecords(ganttRec);
}
//To update the database on delete action
else if (args.requestType == "delete") {
var data = args.data.item;
PageMethods.DeleteIt(data);
if (args.data.hasChildRecords) {
deleteChildRecords(args.data);
}
if (args.updatedRecords && args.updatedRecords.length)
updateModifiedGanttRecords(args.updatedRecords);
}
}
// To update the multiple modified Gantt records in single request.
function updateModifiedGanttRecords(records) {
var modifiedRecord = [];
if (records && records.length) {
var length = records.length;
for (var i = 0; i < length; i++)
modifiedRecord.push(records[i].item);
}
PageMethods.UpdateIt(modifiedRecord);
}
//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;
PageMethods.DeleteIt(data);
if (currentRecord.hasChildRecords) {
deleteChildRecords(currentRecord);
}
}
}
Code Behind[C#]:
Creating Gantt object
public class TaskData
{
public string TaskId { get; set; }
public string TaskName { get; set; }
public DateTime StartDate { get; set; }
public DateTime EndDate { get; set; }
public string ParentId { get; set; }
public string Duration { get; set; }
public string Progress { get; set; }
public string Predecessor { get; set; }
}
Connecting SQL database and fetching records from database:
public partial class GanttSample : System.Web.UI.Page
{
GanttDataSourceEntities db = new GanttDataSourceEntities();
protected void Page_Load(object sender, EventArgs e)
{
this.GanttControl.DataSource = db.GanttDatas.ToList();
}
//…
}
Add method to add new tasks to SQL database:
[WebMethod]
public static void AddIt(TaskData record)
{
GanttSample sample = new GanttSample();
sample.Add(record);
}
public void Add(TaskData Task)
{
GanttData data = new GanttData
{
TaskId = Task.TaskId,
TaskName = Task.TaskName,
StartDate = Task.StartDate,
EndDate = Task.EndDate,
Duration = Task.Duration,
ParentId = Task.ParentId,
Predecessor = Task.Predecessor,
Progress = Task.Progress
};
db.GanttDatas.Add(data);
db.SaveChanges();
}
Update method to update the changes from Gantt to SQL database:
[WebMethod]
public static void UpdateIt(List<TaskData> Tasks)
{
GanttSample sample1 = new GanttSample();
sample1.Update(Tasks);
}
public void Update(List<TaskData> Tasks)
{
foreach (TaskData Task in Tasks)
{
string taskId = Task.TaskId;
GanttData data = db.GanttDatas.First(sv => sv.TaskId == taskId);
data.TaskId = Task.TaskId;
data.TaskName = Task.TaskName;
data.StartDate = Task.StartDate;
data.EndDate = Task.EndDate;
data.Duration = Task.Duration;
data.ParentId = Task.ParentId;
data.Predecessor = Task.Predecessor;
data.Progress = Task.Progress;
}
db.SaveChanges();
}
Delete method to delete the tasks from SQL database
[WebMethod]
public static void DeleteIt(TaskData Task)
{
GanttSample sample2 = new GanttSample();
sample2.Delete(Task);
}
public void Delete(TaskData Task)
{
string id = Task.TaskId;
GanttData GanttRow = db.GanttDatas.Find(id);
db.GanttDatas.Remove(GanttRow);
db.SaveChanges();
}
A simple sample to add, edit, delete and update the Gantt data using ADO.NET Entity Data Model. Please find the sample from the following location.
