RE: How to use TreeGridContainer

Riaan H — Wed, 28 Sep 2022 13:51:13 GMT

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.

RE: How to use TreeGridContainer

alaxala1 — Wed, 28 Sep 2022 12:47:11 GMT

[deleted]

RE: How to use TreeGridContainer

AngelaIp — Wed, 28 Sep 2022 12:29:35 GMT

Hi Riaan,

happy to see that finally someone was able to get the sample running!

The sample was one of the ideas recommended to me regarding this question: https://community.aras.com/f/development/37134/is-there-a-lightweight-way-to-display-tree-grid-data-in-forms

But I so far haven´t tried to understand the sample. I wasn´t sure how to get the "levels". In my case I used a custom tree to address the problem.

But right now I work on a different idea, where I maybe will use this concept. I want to have two items in one Form in parallel, including the relationships of the two items. Happy to see I know have an additional starting point :) Thanks!

RE: How to use TreeGridContainer

Riaan H — Wed, 28 Sep 2022 08:57:12 GMT

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)

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