JQuery JqxTreeGrid
JqxTreeGrid scrolls to top on click after rendered.
by Arvind Pal
HTML
<script src="//jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="//jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="//jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<div>
<!-- <div class="top-margin">This is to provide space on top.</div> -->
<div id="treeGrid"></div>
</div>
CSS
.top-margin {
padding: 100px;
text-align: center;
}
#jqxRefreshButton {
margin-top: 5px;
margin-bottom: 5px;
}
JavaScript
var qt = [{
"question": "QT",
"children": [{
"question": "Level 1",
"children": [{
"question": "Level 1.1",
"children": [{
"question": "Level 1.1.1"
}, {
"question": "Level 1.1.2"
}, {
"question": "Level 1.1.3"
}, {
"question": "Level 1.1.4"
}]
}, {
"question": "Level 1.2",
"children": [{
"question": "Level 1.2.1"
}, {
"question": "Level 1.2.2"
}]
}]
}, {
"question": "Level 2",
"children": [{
"question": "Level 2.1",
"children": [{
"question": "Level 2.1.1"
}, {
"question": "Level 2.1.2"
}]
}, {
"question": "Level 2.2",
"children": [{
"question": "Level 2.2.1"
}, {
"question": "Level 2.2.2"
}, {
"question": "Level 2.2.3"
}]
}, {
"question": "Level 2.3",
"children": [{
"question": "Level 2.3.1"
}, {
"question": "Level 2.3.2"
}, {
"question": "Level 2.3.3"
}, {
"question": "Level 2.3.4"
}]
}, {
"question": "Level 2.4",
"children": [{
"question": "Level 2.4.1"
}, {
"question": "Level 2.3.2"
}]
}]
}]
}];
var usergroup1 = [{
"value": "/testOrg1",
"label": "/testOrg1"
}, {
"value": "/testOrg1/orgunit11",
"label": "/testOrg1/orgunit11"
}, {
"value": "/testOrg1/orgunit12",
"label": "/testOrg1/orgunit12"
}, {
"value": "/testOrg1/orgunit13",
"label": "/testOrg1/orgunit13"
}, {
...