<!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 getCheckedRows() Method</
h3
>
<
div
id
=
"jqxTreeGrid"
style
=
"margin: 25px"
></
div
>
<
input
type
=
"button"
style
=
"margin: 20px"
id
=
"button_for_getCheckedRows"
value
=
"Get the checked rows"
/>
<
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,
checkboxes: 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,
},
],
});
$("#button_for_getCheckedRows").jqxButton({
width: 300,
height: 35,
});
$("#jqxTreeGrid").jqxTreeGrid("checkRow", 1);
$("#jqxTreeGrid").jqxTreeGrid("checkRow", 3);
$("#button_for_getCheckedRows").click(function () {
var checked_Rows = $("#jqxTreeGrid")
.jqxTreeGrid("getCheckedRows");
var checked_Rows_Data = "";
var a = 0;
while (a <
checked_Rows.length
) {
checked_Rows_Data +=
checked_Rows[a].Employee_Name +
" " +
checked_Rows[a].Company +
" " +
checked_Rows[a].Designation +
" & ";
a++;
}
$("#log").html(JSON.stringify(checked_Rows_Data));
});
});
</script>
</
center
>
</
body
>
</
html
>