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

connect gantt chart with database mysql

is it a solution for connect database mysql with ganttchart

1 Reply 1 reply marked as answer

PP Pooja Priya Krishna Moorthy Syncfusion Team June 28, 2020 05:32 AM UTC

Hi Massauod,.  
In Gantt, we can fetch data from mysql and update the changes on CRUD action to the server by using DataManager support. We can define data source for Gantt as instance of DataManager and by using batchUrl property of DataManager we can update the data source on CRUD operation. We have prepared a sample in which we can fetch data from mysql database and updated the server on CRUD actions. Please find the below code example. 
[CS] 
public ActionResult UrlDatasource(DataManagerRequest dm) 
{ 
    MySqlConnection con = new MySqlConnection("server=localhost;user id=root;database=ganttdata;password=yourpassword");//connectionString 
    con.Open(); 
    using (con) 
    { 
        using (var command = con.CreateCommand()) 
        { 
            command.CommandText = "SELECT * FROM GanttData"; 
            using (var reader = command.ExecuteReader()) 
            { 
                 var indexOfCol1 = reader.GetOrdinal("TaskId"); 
                 var indexOfCol2 = reader.GetOrdinal("TaskName"); 
                 //... 
                 while (reader.Read()) 
                 { 
                     GanttData obj = new GanttData(); 
                     obj.TaskId = reader.GetValue(indexOfCol1).ToString(); 
                     //... 
                  } 
                  reader.Close(); 
              } 
          } 
            con.Close(); 
    } 
    var count = list.Count(); 
    return Json(new { result = list, count = count }); 
} 
public ActionResult BatchSave([FromBody]ICRUDModel<GanttData> data) 
{ 
 
   //... 
   return Json(new { addedRecords = uAdded, changedRecords = uChanged, deletedRecords = uDeleted }); 
} 
 
public GanttData Create(GanttData value) 
{ 
    string cmdString = "INSERT INTO GanttData (`TaskId`, `TaskName`, `StartDate`, `EndDate`, `Duration`, `Progress`, `ParentId`,`Predecessor`)" + 
       "VALUES(@TaskId,@TaskName,@StartDate,@EndDate,@Duration,@Progress,@ParentId, @Predecessor)";          
    MySqlConnection con = new MySqlConnection("server=localhost;user id=root;database=ganttdata;password=yourpassword");//connectionString 
    con.Open(); 
    //... 
    con.Close(); 
} 
public GanttData Edit(GanttData Task) 
{ 
     MySqlConnection con = new MySqlConnection("server=localhost;user id=root;database=ganttdata;password= yourpassword");//connectionString 
     con.Open(); 
     string IDNumber = Task.TaskId; 
     string cmdString = "UPDATE ganttdata SET `TaskId`=@TaskId,`TaskName`=@TaskName,`StartDate`=@StartDate,`EndDate`=@EndDate,`Duration`=@Duration,`Progress`=@Progress,`ParentId`=@ParentId,`Predecessor`=@Predecessor WHERE(TaskId = " + IDNumber + ")"; 
            //... 
} 
public GanttData Delete(string TaskId) 
{ 
    MySqlConnection con = new MySqlConnection("server=localhost;user id=root;database=ganttdata;password=yourpassword");//connectionString 
    con.Open(); 
    MySqlCommand cmd = new MySqlCommand("delete from GanttData where TaskId = '" + TaskId + "'", con); 
    //... 
    con.Close(); 
return data; 
[app.component.ts] 
public ngOnInit(): void { 
this.data = new DataManager({ 
 url: 'https://localhost:44344/Home/UrlDatasource', 
 adaptor: new UrlAdaptor, 
 crossDomain: true, 
 batchUrl: 'https://localhost:44344/Home/BatchSave', 
}); 
} 
You can get the complete code from below sample link. 
 
Regards, 
Pooja K. 


Marked as answer
Loader.
Live Chat Icon For mobile
Up arrow icon