search

Sochettra / dynatree

Automatically exported from code.google.com/p/dynatree
0 stars 0 forks source link

Nested span children have no icon and skewed connectors, parent expander missing #251

Closed GoogleCodeExporter closed 8 years ago

GoogleCodeExporter commented 8 years ago 
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

Original issue reported on code.google.com by adb...@hotmail.com on 22 Nov 2011 at 10:47

GoogleCodeExporter commented 8 years ago 
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'">

Original comment by moo...@wwwendt.de on 23 Nov 2011 at 5:51

GoogleCodeExporter commented 8 years ago 
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.

Original comment by adb...@hotmail.com on 28 Nov 2011 at 3:34

GoogleCodeExporter commented 8 years ago

Original comment by moo...@wwwendt.de on 28 Dec 2011 at 10:36