How to use TreeGridContainer

Ahha! I figured it out. 

Here is the full code to get the grid running, I haven't optimised it, there may be unnecessary steps, but it is working.

In the html of the HTML element on the form include the following : (adapted from ECO impactGrid)

<script type="text/javascript">
var exampleGrid = null;

function onTabSelected() {
return; // not used
}

function setEditMode(item) {
// responds to the windows top toolbar actions
}

function setViewMode(item) {
// responds to the windows top toolbar actions
exampleGrid.grid.turnEditOff();
}

var onload_handler = function() {
if (window.exampleGrid) {
exampleGrid = new exampleGrid();
exampleGrid.loadHTML();
}
}
window.addEventListener("load", onload_handler);
</script>

The method "example_gridManager" should be:

exampleGrid = function exampleGridFunc() {};

exampleGrid.prototype = new BaseTreeGrid();

exampleGrid.prototype.initialize = function () {

var xmlString = `<?xml version="1.0" encoding="utf-8"?>
<table font="Microsoft Sans Serif-8" sel_bgColor="steelbue" sel_TextColor="white" header_BgColor="buttonface" expandroot="true" expandall="false" treelines="1" editable="false" draw_grid="true" multiselect="true" column_draggable="false" enableHtml="false" enterAsTab="false" bgInvert="true"
xmlns:msxsl="urn:schemas-microsoft-com:xslt"
xmlns:aras="">http://www.aras.com"
xmlns:usr="urn:the-xml-files:xslt">
<thead>
<th align="c">Part Number</th>
<th align="c">Revision</th>
<th align="c">Sequence</th>
<th align="c">Quantity</th>
</thead>
<columns>
<column width="220" edit="NOEDIT" align="l" order="0" />
<column width="60" edit="NOEDIT" align="c" order="1" />
<column width="60" edit="NOEDIT" align="c" order="2" sort="numeric"/>
<column width="60" edit="NOEDIT" align="c" order="3" sort="numeric"/>
</columns>
<menu>
<emptytag/>
</menu>
<tr level="0" icon0="../images/Part.svg" icon1="../images/Part.svg" class = "dragClass">
<userdata key="gridData_rowItemID" value=" " />
<td>First</td>
<td>A</td>
<td>10</td>
<td>2</td>

<tr level="1" icon0="../images/Part.svg" icon1="../images/Part.svg" class = "dragClass">
<userdata key="gridData_rowItemID" value=" " />
<td>Second</td>
<td>A</td>
<td>10</td>
<td>6</td>
</tr>
</tr></table>`;

//debugger;
this.grid.InitXML(xmlString);
document.getElementById("loadingInProgress").style.display = "none";
};

Getting this very last line took me a couple of hours of debugging to finally get it!

Now I can start playing!!!

Kind Regards

Riaan

Thanks Alaxala and Angela, together we shall conquer!  ;-)

For some reason my "var exampleGrid = null;" only works in the html on the form. 

The rest of your suggestion is working great.

So many possible uses for this grid, but I will start slowly, first only as a passive view. Later on with actions.

Thanks Alaxala and Angela, together we shall conquer!  ;-)

For some reason my "var exampleGrid = null;" only works in the html on the form. 

The rest of your suggestion is working great.

So many possible uses for this grid, but I will start slowly, first only as a passive view. Later on with actions.