Nodes added by web service are in rtIn <span> instead of <div>

[Tom]

When adding nodes to a RadTreeView using a web service call, the appearance sometimes is different than when adding the nodes in code behind.

See the attached image "screen-view.png" for an example.

Specifically, for nodes added using a web service call, the node text is placed inside a <span> of class rtIn. Nodes added nodes in code behind have node text placed inside a <div> of class rtIn.

In the web service call, this forces the node text to start on the second line if the the node text includes a <TABLE>.

In the example image, the tree on the left is populated by the same web service function. The rendered HTML for the node circled in green is:

<span class="rtIn">
  <img src="images/buttons/F.gif"> Front Hazard Camera -  2 items
</span>

The rendered HTML for the node circled in red (still on the left treeview of the image) is:

<span class="rtIn">
  <table>
    <tbody><tr><td><div onclick="LoadProd('2B156252391EDR9946N1940N0M1','prod')">
    <table>
      <tbody><tr><td><img src="images/other/noprod.gif"></td>
      <td><img src="images/buttons/B.gif"></td>
      <td>2 B 156252391 EDR 99 46 N1940 N0 M1<br>1 product : N0</td></tr></tbody></table></div></td></tr></tbody>
  </table>
</span>

The rendered HTML for the node circled in red on the right treeview is:

<div class="rtIn">
  <div class="rtTemplate">
    <table>
      <tbody><tr><td></td><td><div onclick="LoadProd('2P144116118ESF7600P2600L8C1','g')">
      <table>
        <tbody><tr><td><img src="sqlImageHandler.ashx?id=2P144116118ESF7600P2600L8C1" width="64" height="64"></td>
        <td><img src="images/buttons/P.gif"></td>
        <td>144116118 76 00 P2600...<br>2 products : L8 R8</td></tr></tbody></table></div></td></tr></tbody>
    </table>
  </div>
</div>

Argue with me on how bad the table construction is another time. The only differences between the two red circled nodes appears to be that the table is bumped to a new line when inside a <span class="rtIn"> but not a <div class="rtIn">. I do notice that there is also a <div class="rtTemplate"> included on the code behind node, as I am using a template on the code behind tree. Adding this to the web service call does not help.

To see this in action, go to this test page. The page is obviously a test page, so please forgive the crude design and method for getting the same results shown in the attached file. Here are the steps:

1. Enter "77" in the box labeled "Site" and click on the "Search" button.
2. In the middle pane, click on the tree node "Sol 201".
3. Click on the tree node "Navigation Camera".
4. On the right side, change the pulldown from "Standard" to "Minimal".
5. Now change the pulldown from "Minimal" back to "Standard".
6. Expand the "Navigation Camera" node.

How can I remove the extra line in the nodes added by the web service?

[Bozhidar]

Hello Tom,

When you use templates the content is intentionally placed inside a div tag, as opposed to a span tag, which is the usual container. The difference in the appearance is caused by two css rules, that are applied only to the div tag. If you add them to the span tag as well, the issue should be resolved. Here are the styles:

.RadTreeView span.rtIn
{
    display: inline-block;
    vertical-align: top;
}

 
Greetings,
Bozhidar
the Telerik team

[Tom]

Yes. I was hoping not to have to modify the radTreeView CSS. Thanks for confirming what seemed to be happening.

I was able to work with the <div> by using CSS-based positioning instead of a table. It probably is better for the environment, too.