My favorites | Sign in
Project Home Downloads
READ-ONLY: This project has been archived. For more information see this post.
Search
for
  Advanced search   Search tips   Subscriptions
Issue 251: Nested span children have no icon and skewed connectors, parent expander missing
1 person starred this issue and may be notified of changes. Back to list
Status:  Done
Owner:  ----
Closed:  Dec 2011


 
Reported by adb...@hotmail.com, Nov 22, 2011
What steps will reproduce the problem?

1. Create an UL with nested span elements to hold unique attributes and data as follows:


<ul xmlns:msxsl="urn:schemas-microsoft-com:xslt">
  <li data="icon: 'FirstLevelA.ico'">First Level 1.1</li>
  <li data="icon: 'FirstLevelB.ico'">
    <span style="DISPLAY: inline-block;">
      <span style="DISPLAY: inline-block;" menu="1,KPHL,KPHL - KBWI" showMenuAtCursor="true" title="">KPHL</span>
      <span style="DISPLAY: inline-block;">-</span>
      <span style="DISPLAY: inline-block;" menu="1,KBWI,KPHL - KBWI" showMenuAtCursor="true" title="">KBWI</span>
      <span style="DISPLAY: inline-block;">(</span>
      <span style="DISPLAY: inline-block;" menu="0,KPHL - KBWI" showMenuAtCursor="true" title="">PHILADELPHIA INT / BALTIMORE WASHINGTON</span>
      <span style="DISPLAY: inline-block;">)</span>
      <ul>
        <li data="icon: 'SecondLevelA.ico'">
          <span style="DISPLAY: inline-block;" menu="2,SOMEDATA1" showMenuAtCursor="true" title="">Route 1</span>
          <ul>
            <li data="icon: 'ThirdLevelA.ico'">
              <span style="DISPLAY: inline-block;" menu="3,SOMEDATA2" showMenuAtCursor="true" title="">ABC - Description of ABC</span>
            </li>
            <li data="icon: 'ThirdLevelA.ico'">
              <span style="DISPLAY: inline-block;" menu="3,SOMEDATA3" showMenuAtCursor="true" title="">123 - Description of 123</span>
            </li>
            <li data="icon: 'ThirdLevelA.ico'">
              <span style="DISPLAY: inline-block;" menu="3,SOMEDATA4" showMenuAtCursor="true" title="">XYZ - Description of XYZ</span>
            </li>
            <li data="icon: 'ThirdLevelA.ico'">
              <span style="DISPLAY: inline-block;" menu="3,SOMEDATA5" showMenuAtCursor="true" title="">456 - Description of 456</span>
            </li>
          </ul>
        </li>
      </ul>
    </span>
  </li>
</ul>



2. Instantiate a new dynatree with noLink: "true"
$("#tree").dynatree({ imagePath: "skin/", noLink: "true"})


3.Observe output produced by Dynatree:


<DIV style="BORDER-BOTTOM: black 1px solid; BORDER-LEFT: black 1px solid; WIDTH: 500px; HEIGHT: 500px; OVERFLOW: auto; BORDER-TOP: black 1px solid; BORDER-RIGHT: black 1px solid" id="tree" jQuery15104066000601462597="1">
  <UL class="dynatree-container">
    <LI class="">
      <SPAN class="dynatree-node dynatree-exp-c dynatree-ico-c">
        <SPAN class="dynatree-connector">
        </SPAN>
        <IMG alt="" src="http://255.255.255.255/icons/FirstLevelA.ico />
        <SPAN style="DISPLAY: inline-block" class="dynatree-title">First Level 1.1</SPAN>
      </SPAN>
    </LI>
    <LI class="dynatree-lastsib">
      <SPAN class="dynatree-node dynatree-lastsib dynatree-exp-cl dynatree-ico-c">
        <SPAN class="dynatree-connector">
        </SPAN>
        <IMG alt="" src="http://255.255.255.255/icons/FirstLevelB.ico />
        <SPAN style="DISPLAY: inline-block" class="dynatree-title">
          <SPAN style="DISPLAY: inline-block" title="" showMenuAtCursor="true" menu="1,KPHL,KPHL - KBWI">KPHL</SPAN>
          <SPAN style="DISPLAY: inline-block">-</SPAN>
          <SPAN style="DISPLAY: inline-block" title="" showMenuAtCursor="true" menu="1,KBWI,KPHL - KBWI">KBWI</SPAN>
          <SPAN style="DISPLAY: inline-block">(</SPAN>
          <SPAN style="DISPLAY: inline-block" title="" showMenuAtCursor="true" menu="0,KPHL - KBWI">PHILADELPHIA INT / BALTIMORE WASHINGTON</SPAN>
          <SPAN style="DISPLAY: inline-block">)</SPAN>
          <UL>
            <LI data="icon: 'SecondLevelA.ico'">
              <SPAN style="DISPLAY: inline-block" title="" showMenuAtCursor="true" menu="2,SOMEDATA1">Route 1</SPAN>
              <UL>
                <LI data="icon: 'ThirdLevelA.ico'">
                  <SPAN style="DISPLAY: inline-block" title="" showMenuAtCursor="true" menu="3,SOMEDATA1">ABC - Description of ABC</SPAN>
                </LI>
                <LI data="icon: 'ThirdLevelA.ico'">
                  <SPAN style="DISPLAY: inline-block" title="" showMenuAtCursor="true" menu="3,SOMEDATA1">123 - Description of 123</SPAN>
                </LI>
                <LI data="icon: 'ThirdLevelA.ico'">
                  <SPAN style="DISPLAY: inline-block" title="" showMenuAtCursor="true" menu="3,SOMEDATA1">XYZ - Description of XYZ</SPAN>
                </LI>
                <LI data="icon: 'ThirdLevelA.ico'">
                  <SPAN style="DISPLAY: inline-block" title="" showMenuAtCursor="true" menu="3,SOMEDATA1">456 - Description of 456</SPAN>
                </LI>
              </UL>
            </LI>
          </UL>
        </SPAN>
      </SPAN>
    </LI>
  </UL>
</DIV>

RESULT: Second and third level icons are missing.
        Proper connectors for second and third levels are missing

The good part is that all second and third level span attribute and text data is preserved. All of the data displays indented correctly, just the level 2 and 3 connectors and icons are missing

What version of the product are you using?
$Version: 1.1.1$
	$Revision: 481, 2011-03-02 07:25:35$

On what operating system and browser?
XP Pro 2002 SP 3 IE8



Nov 23, 2011
Project Member #1 moo...@wwwendt.de
Try to put the <ul> outside (after) the <span>.
That seems to produce better results

 <li data="icon: 'FirstLevelA.ico'">First Level 1.1</li>
 <li data="icon: 'FirstLevelB.ico'">
   <span style="DISPLAY: inline-block;">
     <span style="DISPLAY: inline-block;" menu="1,KPHL,KPHL - KBWI" showMenuAtCursor="true" title="">KPHL</span>
     <span style="DISPLAY: inline-block;">-</span>
     ...
   </span>
     <ul>
       <li data="icon: 'SecondLevelA.ico'">
         <span style="DISPLAY: inline-block;" menu="2,SOMEDATA1" showMenuAtCursor="true" title="">Route 1</span>
         <ul>
           <li data="icon: 'ThirdLevelA.ico'">

Status: Waiting
Labels: -Type-Defect Type-Other Milestone-Release1.2.1
Nov 28, 2011
#2 adb...@hotmail.com
After further examination of the dynatree code specifically the _createFromTag method I was able to obtain the correct output with all icons and text displayed. The key is to nest each nodes spans separately. Do not have the end span tag of a parent follow and child nodes or spans. The correct way to arrange spans is as
 follows: 


<ul xmlns:msxsl="urn:schemas-microsoft-com:xslt">
  <li data="icon: 'FirstLevelA.ico'">First Level 1.1</li>
  <li data="icon: 'FirstLevelB.ico'">
    <span style="DISPLAY: inline-block;">
      <span style="DISPLAY: inline-block;" menu="1,KPHL,KPHL - KBWI" showMenuAtCursor="true" title="">KPHL</span>
      <span style="DISPLAY: inline-block;">-</span>
      <span style="DISPLAY: inline-block;" menu="1,KBWI,KPHL - KBWI" showMenuAtCursor="true" title="">KBWI</span>
      <span style="DISPLAY: inline-block;">(</span>
      <span style="DISPLAY: inline-block;" menu="0,KPHL - KBWI" showMenuAtCursor="true" title="">PHILADELPHIA INT / BALTIMORE WASHINGTON</span>
      <span style="DISPLAY: inline-block;">)</span>
    </span>
    <ul>
      <li data="icon: 'SecondLevelA.ico'">
        <span style="DISPLAY: inline-block;">
          <span style="DISPLAY: inline-block;" menu="2,SOMEDATA1" showMenuAtCursor="true" title="">Route 1</span>
        </span>
        <ul>
          <li data="icon: 'ThirdLevelA.ico'">
            <span style="DISPLAY: inline-block;">
              <span style="DISPLAY: inline-block;" menu="3,SOMEDATA2" showMenuAtCursor="true" title="">ABC - Description of ABC</span>
            </span>
          </li>
          <li data="icon: 'ThirdLevelA.ico'">
            <span style="DISPLAY: inline-block;">
              <span style="DISPLAY: inline-block;" menu="3,SOMEDATA3" showMenuAtCursor="true" title="">123 - Description of 123</span>
            </span>
          </li>
          <li data="icon: 'ThirdLevelA.ico'">
            <span style="DISPLAY: inline-block;">
              <span style="DISPLAY: inline-block;" menu="3,SOMEDATA4" showMenuAtCursor="true" title="">XYZ - Description of XYZ</span>
            </span>
          </li>
          <li data="icon: 'ThirdLevelA.ico'">
            <span style="DISPLAY: inline-block;">
              <span style="DISPLAY: inline-block;" menu="3,SOMEDATA5" showMenuAtCursor="true" title="">456 - Description of 456</span>
            </span>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>


The key lines of dynatree code dealing with this issue are:

var $liSpan = $li.find(">span:first");   line 2487
var title;
if( $liSpan.length ) {
    // If a <li><span> tag is specified, use it literally.
    title = $liSpan.html();
} ....


The reason you must wrap each nodes spans in an empty span is because lines 2487... look for the first span and then query it's length. Only child spans will return a value greater than 0 in the test for length. You want your spans treated like text, that is used literally.






Dec 28, 2011
Project Member #3 moo...@wwwendt.de
(No comment was entered for this change.)
Status: Done

Powered by Google Project Hosting