Populating a DHTMLx TreeGrid using XML

StackOverflow https://stackoverflow.com//questions/24042006

  •  21-12-2019
  •  | 
  •  

Question

I'm currently in the process of trying to populate a tree grid using XML - the problem is that I'm not sure how to go about doing this. I feel like the DHTMLx docs just aren't clear enough as each example seems to hide the relevant xml.

I have defined my tree grid like so (following an example layout here):

this.treeGrid = new dhtmlXGridObject($scope.divId);
this.treeGrid.selMultiRows = true;
this.treeGrid.imgURL = "resources/dhtmlxsuite/dhtmlxgrid/codebase/imgs/icons_greenfolders/";
this.treeGrid.setImagePath("resources/dhtmlxsuite/dhtmlxgrid/codebase/imgs/");
this.treeGrid.setHeader("Tree,Plain Text,Long Text,Color,Checkbox");
this.treeGrid.setInitWidths("150,100,100,100,100");
this.treeGrid.setColAlign("left,left,left,left,center");
this.treeGrid.setColTypes("tree,ed,txt,ch,ch");
this.treeGrid.setColSorting("str,str,str,na,str");

// Init needs to be included or the title won't appear
this.treeGrid.init();

// Needs the css included in the index.html page before it is enforced
this.treeGrid.setSkin("dhx_skyblue");
this.treeGrid.loadXML($scope.xml);

So from the above you can see that I want the column called 'Tree' to be the actual tree on this grid. So how should the xml look for this? Do all columns have to have data otherwise it won't populate? I tried the following but it failed with the error Error On Load XML:

<?xml version='1.0' encoding='iso-8859-1'?>
<tree id = "Tree">
<item id = "p1" text = "parent item 1">
    <item id = "c1-0" text = "child item 1" />
    <item id = "c1-0" text = "child item 2" />
</item>
<item id="p2" text="parent item 1" />
</tree>

Thanks

Note: I'm using DHTMLx pro!

Était-ce utile?

La solution

I had to pull out the xml from the DHTMLx site uisng the Mozilla tools to determine exactly how they structure their tree grids. Here's an example of how it's done:

<?xml version="1.0" encoding="UTF-8"?>
<rows>
<head>
    <beforeInit>
        <call command="setSkin">
            <param>light</param>
        </call>
        <call command="setStyle">
            <param>text-align:center;</param>
        </call>
        <call command="setImagePath">
                <param>resources/dhtmlxsuite/dhtmlxGrid/codebase/imgs/</param>
        </call>
        <!-- 
        <call command="kidsXmlFile">
            <param></param>
        </call>
        -->
    </beforeInit>

    <column width="150" type="tree" align="left" color="white"
        sort="str">Tree</column>
    <column width="150" type="ed" align="left" sort="str">Cost ($)
    </column>
    <column width="150" type="txt" align="left" sort="str">Engine Size
    </column>

</head>

<!-- <userdata name="gud1"> userdata value 1 </userdata> <userdata name="gud2"> 
    userdata value 2 </userdata> -->

<row id="honda" selected="1" call="1" xmlkids="1">
    <!-- <userdata name="hondaUD"> userdata value for honda </userdata> -->
    <cell>Honda</cell>
</row>

<row id="bmw" xmlkids="1">
    <cell>BMW</cell>
    <row id="bmw1">
        <!-- <userdata name="bmwUD1"> userdata value for bmw1 1 </userdata> <userdata 
            name="bmwUD2"> userdata value for bmw1 2 </userdata> -->
        <cell>325i</cell>
        <cell>30,800</cell>
        <cell>2.5L</cell>
    </row>
    <row id="bmw2">
        <cell>M3 Coupe</cell>
        <cell>47,100</cell>
        <cell>3.2L</cell>
    </row>
</row>

<row id="vw" xmlkids="1">
    <cell>Volkswagen</cell>
    <row id="vw1">
        <cell>Colf GL 2.0</cell>
        <cell>15,580</cell>
        <cell>2.0L</cell>
    </row>
</row>

<row id="mazda" xmlkids="1">
    <cell>Mazda</cell>
    <row id="mazda1">
        <cell>MX-5 Miata</cell>
        <cell>21,868</cell>
        <cell>1.8L</cell>
    </row>
</row>

<row id="porsche" xmlkids="1">
    <cell>Porsche</cell>
    <row id="porsche1">
        <cell>Porsche 911</cell>
        <cell>128,200</cell>
        <cell>3.6L</cell>
    </row>
</row>

If you just want static xml then the above is sufficient and you can ignore the command kidsXmlFile as thats for dynamic loading of data from a server.

Autres conseils

The structure of the xml that you have created is not correct. Picked it up from http://docs.dhtmlx.com/treegrid__treegrid_initialization.html Check this out: 

    <?xml version="1.0" encoding="UTF-8"?>
<rows parent="h0"> 
    <userdata name="gud1"> 
        userdata value 1
    </userdata> 
    <row id="h523" selected="1" call="1" xmlkids="1"> 
        <userdata name="hondaUD"> 
            userdata value for honda
        </userdata> 
        <cell image="folder.gif">Honda</cell> 
        <cell>...</cell> 
        <cell>...</cell> 
    </row>
</rows>
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top