<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
link
rel
=
"stylesheet"
href
=
"jqwidgets/styles/jqx.base.css"
type
=
"text/css"
/>
<
script
type
=
"text/javascript"
src
=
"scripts/jquery.js"
>
</
script
>
<
script
type
=
"text/javascript"
src
=
"jqwidgets/jqxcore.js"
>
</
script
>
<
script
type
=
"text/javascript"
src
=
"jqwidgets/jqxdata.js"
>
</
script
>
<
script
type
=
"text/javascript"
src
=
"jqwidgets/jqxbuttons.js"
>
</
script
>
<
script
type
=
"text/javascript"
src
=
"jqwidgets/jqxscrollbar.js"
>
</
script
>
<
script
type
=
"text/javascript"
src
=
"jqwidgets/jqxlistbox.js"
>
</
script
>
<
script
type
=
"text/javascript"
src
=
"jqwidgets/jqxdropdownlist.js"
>
</
script
>
<
script
type
=
"text/javascript"
src
=
"jqwidgets/jqxdatatable.js"
>
</
script
>
<
script
type
=
"text/javascript"
src
=
"jqwidgets/jqxtreegrid.js"
>
</
script
>
</
head
>
<
body
>
<
center
>
<
h1
style
=
"color: green;"
>
GeeksforGeeks
</
h1
>
<
h3
>
jQWidgets jqxTreeGrid editable Property
</
h3
>
<
div
id
=
"jqxTreeGrid"
style
=
"margin: 25px;"
>
</
div
>
<
input
type
=
"button"
style
=
"margin: 29px;"
id
=
"jqxbutton_for_editable"
value
=
"Value of the editable property"
/>
<
div
id
=
"log"
></
div
>
<
script
type
=
"text/javascript"
>
$(document).ready(function() {
var A = [{
ID: 1,
Employee_Name: "Amit",
Company: "GeeksforGeeks",
Designation: "Content Writer",
expanded: true,
A1: [{
ID: 2,
Employee_Name: "Sumit",
Company: "Amazon",
Designation: "Software Engineer",
}, {
ID: 3,
Employee_Name: "Vivek",
Company: "Apple",
Designation: "Product Manager",
expanded: true,
A1: [{
ID: 4,
Employee_Name: "Soni",
Company: "Flipkart",
Designation: "HR",
}, ],
}, ],
}, ];
var Data_Source = {
dataFields: [{
name: "ID",
}, {
name: "Employee_Name",
}, {
name: "Company",
}, {
name: "Designation",
}, {
name: "A1",
type: "array",
}, {
name: "expanded",
}, ],
hierarchy: {
root: "A1",
},
id: "ID",
localData: A,
};
var Data = new $.jqx.dataAdapter(Data_Source);
$("#jqxTreeGrid").jqxTreeGrid({
source: Data,
editable: true,
ready: function() {
$("#jqxTreeGrid").jqxTreeGrid("expandRow", "1");
$("#jqxTreeGrid").jqxTreeGrid("expandRow", "3");
},
columns: [{
text: "Employee_Name",
align: "center",
dataField: "Employee_Name",
width: 140,
}, {
text: "Company",
align: "center",
dataField: "Company",
width: 150,
}, {
text: "Designation",
align: "center",
dataField: "Designation",
width: 150,
}, ],
});
$("#jqxbutton_for_editable").jqxButton({
width: 320,
});
$("#jqxbutton_for_editable").click(function() {
var value_of_editable =
$("#jqxTreeGrid").jqxTreeGrid("editable");
$("#log").html(JSON.stringify(value_of_editable));
});
});
</
script
>
</
center
>
</
body
>
</
html
>