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"
}, {
  "value": "/testOrg1/orgunit14",
  "label": "/testOrg1/orgunit14"
}];

var usergroup2 = [{
  "value": "/E22 Org",
  "label": "/E22 Org"
}, {
  "value": "/E22 Org/orgunit21",
  "label": "/E22 Org/orgunit21"
}, {
  "value": "/E22 Org/orgunit22",
  "label": "/E22 Org/orgunit22"
}, {
  "value": "/E22 Org/orgunit23",
  "label": "/E22 Org/orgunit23"
}, {
  "value": "/MyOrg",
  "label": "/MyOrg"
}, {
  "value": "/MyOrg/myorgunit1",
 ...