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
  1. Home
  2. Forum
  3. jQuery
  4. I could give an example Gantt control, with crud functions for mysql and php. Thank you

I could give an example Gantt control, with crud functions for mysql and php. Thank you

I could give an example Gantt control, with crud functions for mysql and php.
Thank you

1 Reply
JS Jonesherine Stephen Syncfusion Team September 15, 2016 11:44 AM UTC

Hi Andres, 
We have prepared the work around and rendered the Gantt sample with “mySql” database using PHP.  
And also performed the CRUD operations by using the Gantt client side events “endEdit” “actionComplete”,”rowDragStop”  
and using ajax post we have updated the data base in server side 
Please find the code example below 
Server side 
Client side 
DataBinding: 
function getData(){  
//connection to the database 
$dbhandle = mysql_connect("localhost", "root", "Treegrid");   
$selected = mysql_select_db("tgrid",$dbhandle);    
//execute the SQL query and return records 
$result = mysql_query("SELECT taskID, taskName,startDate, endDate,duration,Progress,parentID FROM gantt"); 
//fetch tha data from the database  
$emparray=array(); 
while ($row = mysql_fetch_assoc($result)) {   
   if($row['parentID']== ""){ 
   $row['parentID']= null; 
   }   
   $emparray[]=$row; 
}  
echo json_encode($emparray); 
} 
     
<script type="text/javascript"> 
        $(function () { 
var data = ej.DataManager({ 
 url: "http://localhost:10080/GanttPHP/crud.php/?action=getData",}); 
            $("#gantt").ejGantt({ 
                dataSource: data, 
            }); 
        }); 
 
 
Update: 
function update(){   
$conn = new mysqli("localhost", "root", "Treegrid","tgrid");    
     $json_del=file_get_contents("php://input"); 
     $obj_del = json_decode($json_del,true);      
             $key=(int)$obj_del['taskID'];       
             $name=(string)$obj_del['taskName']; 
     $startDate=(string)$obj_del['startDate']; 
             $endDate=(string)$obj_del['endDate']; 
             $duration=(string)$obj_del['duration'];    
             $Progress=(string)$obj_del['Progress']; 
 if((string)$obj_del['parentID']){    
  $parentID=(string)$obj_del['parentID'];  
            echo json_encode($parentID);  
     $retval = mysqli_query($conn,"UPDATE gantt SET taskName='$name',startDate='$startDate', 
endDate='$endDate',duration='$duration',Progress='$Progress', 
parentID='$parentID' WHERE taskID=$key"); 
             echo json_encode($retval);   
} 
else{ 
 $parentID=null; 
     $retval = mysqli_query($conn,"UPDATE gantt SET taskName='$name',startDate='$startDate',endDate='$endDate', 
duration='$duration',Progress='$Progress',parentID='$parentID' WHERE taskID=$key"); 
             echo json_encode($retval);   
}            
} 
 
$(function () { 
$("#gantt").ejGantt({ 
rowDragStop: function (args) {    
    //To update the database on drag and drop action                
      var cloneData = $.extend ({}, args.draggedRow.item); 
      cloneData = args.draggedRow.item; 
      cloneData.parentID = args.targetRow.item.taskID; 
       var encoded = JSON.stringify(cloneData); 
       var data = encoded; 
        $.ajax({ 
         type: "POST", 
          url: 'http://localhost:10080/GanttPHP/crud.php/?action=update', 
          data: data,                        
          error: function () { 
                  alert("error") 
                        } 
                    });                   
                }, 
   endEdit: function (args) { 
    //To update the database on cellEditing 
      var id = args.data.taskId; 
      var encoded = JSON.stringify(args.data.item, replacer); 
      var data = encoded; 
       $.ajax({ 
          type: "POST", 
          url: 'http://localhost:10080/GanttPHP/crud.php/?action=update', 
           data: data,                        
           error: function () { 
             alert("error") 
                        } 
                    }); 
                }, 
        }); 
}); 
 
Add: 
function add(){   
$conn = new mysqli("localhost", "root", "Treegrid","tgrid");   
     $json_del=file_get_contents("php://input"); 
     $obj_del = json_decode($json_del,true);     
             $key=(int)$obj_del['taskID'];       
             $name=(string)$obj_del['taskName']; 
     $startDate=(string)$obj_del['startDate']; 
              $endDate=(string)$obj_del['endDate']; 
              $duration=(string)$obj_del['duration'];   
$Progress=(string)$obj_del['Progress'];      
              if((string)$obj_del['parentID']){ 
           $parentID=(string)$obj_del['parentID'];     
                           echo json_encode($parentID); 
          $retval = mysqli_query($conn,"INSERT INTO gantt (taskID, taskName,startDate,endDate,duration,Progress,parentID) 
VALUES ('$key', '$name','$startDate','$endDate','$duration','$Progress','$parentID')"); 
             echo json_encode($retval);  
} 
else{      
     $retval = mysqli_query($conn,"INSERT INTO gantt (taskID, taskName,startDate,endDate,duration,Progress) 
VALUES ('$key', '$name','$startDate','$endDate','$duration','$Progress')"); 
             echo json_encode($retval);  
             } 
} 
 
$(function () { 
$("#gantt").ejGantt({ 
//To update on indent,outdent and taskbar editing action 
  actionComplete: function (args) {                     
   if (args.requestType == "indent" || args.requestType == "outdent" || args.requestType == "recordUpdate") { 
   var encoded = JSON.stringify(args.data.item, replacer), 
   data = encoded; 
    $.ajax({ 
    type: "POST", 
     url: 'http://localhost:10080/GanttPHP/crud.php/?action=update', 
      data: data,                             
      error: function () { 
        alert("error") 
                            } 
                        }) 
                    } 
    //To update the database while adding new record in dialog edit 
     if (args.requestType == "save" && args.addedRecord) { 
     var encoded = JSON.stringify(args.addedRecord.item); 
       var data = encoded; 
       $.ajax({ 
          type: "POST", 
          url: 'http://localhost:10080/GanttPHP/crud.php/?action=add', 
           data: data,                             
      error: function () { 
             alert("error") 
                            } 
                        }); 
                    } 
} 
     }); 
  }); 
 
Delete: 
function delete() 
{    
$conn = new mysqli("localhost", "root", "Treegrid","tgrid"); 
$json_del=file_get_contents("php://input"); 
echo json_encode($json_del); 
 $obj_del = json_decode($json_del,true); 
echo json_encode($json_del); 
            $key=(int)$obj_del['taskID']; 
echo json_encode($key); 
     $res1 = $conn->query("DELETE FROM `gantt` WHERE taskID=$key"); 
             $success=array("Deleted"=>$key); 
             echo json_encode($success); 
            echo json_encode($res1); 
} 
 
$(function () { 
$("#gantt").ejGantt({ 
 actionComplete: function (args) {    
if (args.requestType == "delete") { 
    var id = args.data.taskId; 
    var encoded = JSON.stringify(args.data.item); 
    var data = encoded; 
    $.ajax({ 
            type: "POST", 
            url: 'http://localhost:10080/GanttPHP/crud.php/?action=delete', 
            data: data,                            
            error: function () { 
                   alert("error") 
                            } 
                        }); 
  if (args.data.hasChildRecords) {                           deleteChildRecords(args.data); 
                        } 
                    }           
         }); 
}); 
 
We have also prepared the sample for your reference .Please find the sample from below location: 
Please let us know if you require further assistance on this, 
Thanks, 
Jone sherine P S 


Loader.
Up arrow icon