Gaps in Tree display

Suite and Optimus Suite 5
#1

In a tree view I’ve set up I’m seeing random gaps in the tree. Looking at the generated HTML I see how the gap is being generated:

 

How can get this space removed?

<!DOCTYPE html>

<link rel="stylesheet" type="text/css" href="../api/dhtmlx/dhtmlxTree/codebase/dhtmlxtree.css">
<link rel="stylesheet" type="text/css" href="../api/dhtmlx/dhtmlxTree/codebase/skins/dhtmlxgrid_dhx_skyblue.css">
<link rel="stylesheet" type="text/css" href="../api/dhtmlx/dhtmlxMessage/codebase/skins/dhtmlxmessage_dhx_skyblue.css" />

<script src="../api/dhtmlx/dhtmlxTree/codebase/dhtmlxcommon.js" type="text/javascript"></script>
<script src="../api/dhtmlx/dhtmlxTree/codebase/dhtmlxtree.js" type="text/javascript"></script>
<script src="../api/dhtmlx/dhtmlxTree/codebase/ext/dhtmlxtree_srnd.js"></script>   

<script src='../api/dhtmlx/dhtmlxMessage/codebase/dhtmlxmessage.js' type="text/javascript"></script>

<script src="js/jquery.min.js" type="text/javascript"></script>

<style>
body, html, table, div, #layoutobj {
    color: #565656;
    font-family: "Trebuchet MS",Tahoma,Arial,Verdana,monospace;
    font-size: 13px;
    line-height: 18px;
}
</style>

<body>

<div id="tree_div" style="float: left;width: 350px;height:340px;"></div>
<div id="info" style="float:left;width: 450px;height:340px;"></div>

<script language='Javascript'>
tree = new dhtmlXTreeObject( 'tree_div', '100%', '100%', 0 );

tree.setImagePath("../api/dhtmlx/dhtmlxTree/codebase/imgs/csh_winstyle/");

tree.setSkin('dhx_skyblue');

tree.enableSmartRendering(true);

tree.setXMLAutoLoading("order_connector.php");
tree.loadXML("order_connector.php");
</script>

order_connector.php

[code]<?php

This code is what the GUI uses to grab data from MySQL in XML format

function leaf_objects($row)
{
$request_num = $row->get_value(‘request_num’);
$msnum = $row->get_value(‘msnum’);

if ( $request_num < 0 )
{
	$row->set_value( 'leaf',  "Adtran $msnum - " . $row->get_value('coname') );
}
elseif ( $request_num == 0 )
{
	$row->set_value( 'leaf',  "$msnum - " . $row->get_value('coname') );
	$row->set_userdata( 'acct', $row->get_value('acctnum') );
}
else
{
	$dt = str_replace( '/', '-', $row->get_value('datetime_s') );
	
	$row->set_value( 'leaf', "Request #$request_num&nbsp;&nbsp;$dt" );
}

$row->set_userdata( 'req', $request_num );
$row->set_userdata( 'psr', $msnum );

}

@session_start();

require(‘config_settings.php’);

$res = mysql_connect( $MYSQL_HOST, $MYSQL_ID, $MYSQL_PW );

mysql_select_db(‘cpe’);

require(“…/api/dhtmlx/dhtmlxConnector/codebase/tree_connector.php”);

$tree = new TreeConnector($res);

$tree->event->attach( “beforeRender”, “leaf_objects” );

$tree->enable_log(“/provision/htdocs/cpe/debug.log”);

$tree->dynamic_loading(true);

$tree->render_sql(“SELECT *, coname, 0 as leaf FROM orders o LEFT JOIN cust_address a ON o.acctnum = a.acctnum ORDER BY msnum ASC, request_num ASC”, “mainId”, “leaf, datetime, datetime_s”, ‘’, ‘parentId’ );
?>
[/code]

#2

First of all try to use the next doctype:

#3

I changed the doctype and the problem persists.

Here’s the Firebug output:

#4

Unfortunately “Smart Rendering” and “Dynamic loading” are not compatible. But to solve yout issue you can try “Distributed Parsing” with dynamic loading.

#5

Attached are the files so you can see this happen for yourself. I’ve testing with Firefox and Chrome and both do this. Here is how to replicate the problem:

  1. Create a MySQL database called “test”
  2. Import the test.sql into that db.
  3. Modify the db credentials in order_connector.php
  4. Load order.php in a browser
  5. Scroll through the tree using the scroll bar.
    cpe.zip (234 KB)
#6

You replied as I was putting together my last response and attaching the files. Your suggestion to use distributed parsing works but it seems to load the entire tree. Is there a way to have it only load what’s needed? I’m worried that loading the entire tree could be a problem as this tree grows in the future.

All I did was replace:
tree.enableSmartRendering(true);

with:
tree.enableDistributedParsing(true);

Thank you,
John

#7

It seems like this topic will be helpful for you:
viewtopic.php?f=3&t=22881&p=73550&hilit=treegrid#p73550

#8

Thank you for the link. I could convert to a grid but I don’t see an equivalent function to focusItem. I make use of focusItem for doing searches. Is it named something different for a grid?

#9

Grid has a method “showRow” - you can use it.

#10

I’ve converted the tree to a treeGrid and I get Javascript errors for openItemsDynamic(). I don’t see this listed in the API’s but I do see some forum posts with it mentioned or grids or treeGrids. Is there a required library I should load?

Thank you,
John

#11

I tried looping through the ID’s and calling openItem but it’s not working as I need since it seems that the parent isn’t loaded before it calls to open the child. Is there a better way?

for (var i = 0; i < ids.length; i++) { tree.openItem( ids[i] ); }

#12

I have tried iterating through the ID’s and doing an openItem but it won’t open them all. If place an alert after the tree.openItem then it opens all the ID’s. It appears the problem is I need to wait until the openItem is actually loaded before doing the next one but I know how. Is there a better way to do this?

Thanks,
John

for (var i = 0; i < ids.length; i++) { tree.openItem( ids[i] ); }

#13

About dynamic loading: you can’t open some internal item - it will not loaded yet.

#14

Look at this sample:
dhtmlx.com/docs/products/dht … tions.html
There is a “Open item 2-3-1” link - it is a open-method you need: openItemsDynamic (if you have PRO version)
docs.dhtmlx.com/doku.php?id=dhtm … sdynamic&s[]=openItemsDynamic

#15

I have search working in a tree object using openItemsDynamic just fine. I can’t use a tree object because it will try to load the entire tree. Instead I’m trying to use a treegrid with dynamic loading. It seems that if I call openItems too fast then my requests are not honored. If I place an alert within the loop all the items open as they should. I was hoping you know of a better way to open several ID’s within a treegrid.

John

#16

Unfortunately the current dhtmlxgrid behavior prevents opening of multiply branches in dynamic loading mode due to the performance decreasing.
If the required behavior is critical for you - we may create a fix, but it won’t be included in the official version of dhtmlx, also you were warned about the “performance decreasing” that will appear in the smart rendering mode at least.