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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to perform CRUD operation in TreeGrid using PHP

Platform: JavaScript |
Control: ejTreeGrid |
Published Date: August 1, 2016 |
Last Revised Date: May 29, 2019

We can perform databinding and CRUD operations in TreeGrid using PHP.

Data Binding

Using getData method the JSON data will be fetched from the server.

The code snippet to bind the datasource using dataManager

<script type="text/javascript">
$(function () {
var data = ej.DataManager({
url: "http://localhost:10080/phpsample/crud.php/?action=getData",
});
$("#treegrid").ejTreeGrid({
dataSource: data,
});
});
</script>

 Server side method to retrieve the data from database

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,parentID FROM gantt");
//fetch the data from the database 
$emparray=array();
while ($row = mysql_fetch_assoc($result)) {
$emparray[]=$row;
}
echo json_encode($emparray);
}

 

Add:

actionComplete client side event gets triggered while adding new row. Using this event, we can insert new task item into the database

The code snippet to add new item to database

<script type="text/javascript">       
$("#treegrid").ejTreeGrid({
actionComplete: function (args) {
if (args.requestType == "addNewRow") {
debugger;
// var id = args.data.taskID;
var encoded = JSON.stringify(args.addedRow);
var data = encoded;
$.ajax({
type: "POST",
url: 'http://localhost:10080/phpsample/crud.php/?action=add',
data: data,
success: function (data) {
alert(data);
},
error: function () {
alert("error")
}
});
}
}
});
});
</script>

Server side method to add new task item into the database

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'];    
$retval = mysqli_query($conn,"INSERT INTO gantt (taskID, taskName,startDate,endDate,duration)
VALUES ('$key', '$name','$startDate','$endDate','$duration')");
echo json_encode($retval); 
}

 

Update:

The endEdit client side event gets triggered while editing TreeGrid. Using this event, we can update the database

The code snippet to update the database after editing:

<script type="text/javascript">
$(function () {
$("#treegrid").ejTreeGrid({
endEdit: function (args) {
var id = args.data.taskID;
var encoded = JSON.stringify(args.data.item);
var data = encoded;
$.ajax({
type: "POST",
url: 'http://localhost:10080/phpsample/crud.php/?action=update',
data: data,
success: function (data) {
alert(data);
},
error: function () {
alert("error")
}
});
debugger;
},
});
});
</script>

Server side method to update the database

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'];       
$retval = mysqli_query($conn,"UPDATE gantt SET taskName='$name',startDate='$startDate',endDate='$endDate',duration='$duration' WHERE taskID=$key");
echo json_encode($retval);
}

 

Delete:

The actionComplete client side event gets triggered while deleting any row. Using this event, we can remove the existing record from the database

The code snippet to remove an item from database:

<script type="text/javascript">
$(function () {
$("#treegrid").ejTreeGrid({
actionComplete: function (args) {
if (args.requestType == "delete") {
debugger;
var id = args.data.taskID;
var encoded = JSON.stringify(args.data.item);
var data = encoded;
$.ajax({
type: "POST",
url: 'http://localhost:10080/phpsample/crud.php/?action=delete',
data: data,
success: function (data) {
alert(data);
},
error: function () {
alert("error")
}
});
}
}
});
});
</script>

Please find the server side method to remove an record from database

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);
}

A TreeGrid sample in PHP with CRUD operations is available in the following link,

Sample

 

ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon