<!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 scrollOffset() Method
</
h3
>
<
div
id
=
"jqxTreeGrid"
style
=
"margin: 25px;"
></
div
>
<
input
type
=
"button"
style
=
"margin: 20px;"
id
=
"button_for_scrollOffset"
value
=
"Invoke the scrollOffset() Method"
/>
<
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({
width: 400,
source: Data,
sortable: true,
ready: function () {
$("#jqxTreeGrid").jqxTreeGrid("expandRow", "1");
},
ready: function () {
$("#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_scrollOffset").jqxButton({
width: 350,
height: 35,
});
$("#button_for_scrollOffset").click(function () {
var Scroll_Value = $("#jqxTreeGrid")
.jqxTreeGrid("scrollOffset", 25, 30);
});
});
</
script
>
</
center
>
</
body
>
</
html
>