How to perform CRUD operation in TreeGrid using PHP
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,
