Forum Discussion

riaanh's avatar
riaanh
Creator II
4 years ago
Solved

How to use TreeGridContainer

Hi Team

I am trying to use the TreeGridContainer on a form, but the documentation is a bit sparse.

I was trying to go through the blog written by Skyler:  https://community.aras.com/b/english/posts/building-tree-grid-containers

but he unfortunately left out a few details. The one bit that he left out it seems is the html code that is required in the html field on the form.

I tried to combine his tutorial with the Express ECO Impact Matrix as an example, but I am stuck!

I would appreciate it if anybody can guide me a bit.

Kind Regards

Riaan

  • riaanh's avatar
    riaanh
    4 years ago

    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

4 Replies

  • riaanh's avatar
    riaanh
    Creator II
    4 years ago

    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

      • riaanh's avatar
        riaanh
        Creator II
        4 years ago

        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.

  • angela's avatar
    angela
    Catalyst II
    4 years ago

    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!