TreeGrid only renders first row

Suite and Optimus Suite 5
#1

Working on an application where I need a tree grid. Everything else renders fine, but my treegrid only renders the first row.

Including the following .js files in my index.html header:

		<script src="src/dhtmlx.js"></script>
		<script src="src/dhtmlxLayout/codebase/dhtmlxcommon.js"></script>
		<script src="src/dhtmlxLayout/codebase/dhtmlxcontainer.js"></script>
		<script src="src/dhtmlxLayout/codebase/dhtmlxlayout.js"></script>
		<script src="src/dhtmlxGrid/codebase/dhtmlxcommon.js"></script>
		<script src="src/dhtmlxGrid/codebase/dhtmlxgrid.js"></script>
		<script src="src/dhtmlxGrid/codebase/dhtmlxgridcell.js"></script>
		<script src="src/dhtmlxTree/codebase/dhtmlxcommon.js"></script>
		<script src="src/dhtmlxTree/codebase/dhtmlxtree.js"></script>
		<script src="src/dhtmlxAccordion/codebase/dhtmlxaccordion.js"></script>
		<script src="src/dhtmlxTabbar/codebase/dhtmlxcommon.js"></script>
		<script src="src/dhtmlxTabbar/codebase/dhtmlxtabbar.js"></script>
		<script src="src/dhtmlxToolbar/codebase/dhtmlxtoolbar.js"></script>
		<script src="src/dhtmlxTreeGrid/codebase/dhtmlxtreegrid.js"></script>
		<script src="layout.js"></script>

… where “layout.js” is where I build my application layout.

The relevant parts of the javascript:

var outerLayout;
var topTabbar;
var ductSystem;

function doInitLayout() {
	outerLayout = new dhtmlXLayoutObject(document.body, "2E");
// lines of code...
	topTabbar = outerLayout.cells("b").attachTabbar();
// more lines of code...
	tab_b = topTabbar.cells("b").attachLayout("4U");
// more lines of code...
	ductSystem = tab_b.cells("b").attachGrid();
	ductSystem.setColTypes("tree,ro,ro");
	ductSystem.setColAlign("left,right,right");
	ductSystem.setImagePath("src/imgs/");
	ductSystem.setHeader("Component,Length,Diameter");
	ductSystem.setInitWidths("*,60,80");
	ductSystem.setSkin("dhx_skyblue");
	ductSystem.setColSorting("str,int,int");
	ductSystem.init();
	//ductSystem.loadXML("connectDuctSyst.php");
	ductSystem.load("fakedata.xml");
}

And the fakedata.xml file in full:

<?xml version="1.0"?>
<rows parent="0">
	<row id="1" open="1">
		<cell image="folder.gif">Inlet, Square/Round</cell>
		<cell>40</cell>
		<cell>30</cell>
		<row id="2" open="1">
			<cell image="folder.gif">Duct, Round</cell>
			<cell>500</cell>
			<cell>30</cell>
			<row id="3" open="1">
				<cell image="folder.gif">Duct, Round</cell>
				<cell>400</cell>
				<cell>30</cell>
				<row id="6" open="1">
					<cell image="folder.gif">End Cap, Round</cell>
					<cell>10</cell>
					<cell>30</cell>
				</row>
			</row>
			<row id="4" open="1">
				<cell image="folder.gif">Bracket, Round</cell>
				<cell>40</cell>
				<cell>20</cell>
				<row id="5" open="1">
					<cell image="folder.gif">Duct, Round</cell>
					<cell>400</cell>
					<cell>20</cell>
					<row id="7" open="1">
						<cell image="folder.gif">End Cap, Round</cell>
						<cell>10</cell>
						<cell>20</cell>
					</row>
				</row>
			</row>
		</row>
	</row>
</rows>

all of this lives in an html file with the following body:

	<body class="dhxlayout_fullscreened" style="overflow: hidden;" onload="doInitLayout();">
	</body>

Does anybody have any idea where this fails?

#2

What version of dhtmlxTreeGrid are you using? At what browser does this issue occurs. Does browser throw any errors?

#3

I’m using the Enterprise version of dhtmlxSuite, v.3.0 build 110713

I’m using Firefox, but the same problem occurs in Chromium and IE.

My Firebug error console says:

exCell not defined
dhtmlxtreegrid.js() line 26
function(){};this.setLabel=function(a)…ntNode.idd,this.cell._cellIndex,c])};

#4

Sorry - not exCell - eXcell

#5

I altered the order of included scripts so that dhtmlxtreegrid.js is included as the last script before my custom script and that solved the undefined eXcell problem. The treegrid still isn’t rendering, though.

I tried commenting out .setColTypes(“tree,ro,ro”) to render the same XML in a normal grid, and the result is indistinguishable.

#6

Can you please provide complete demo where we can reproduce this issue?

#7

Found a solution.

I moved .setColTypes() to the line immediately above .init() and suddenly it rendered fine.