Loading ...
Sorry, an error occurred while loading the content.

Re: [ydn-javascript] Re: Treeview with other widget instead of DataTable

Expand Messages
  • Satyam
    Not sure I understand you. Some random thoughts that might be related: TextNodes have a label property, HTMLNodes don t. Changing the label property on a
    Message 1 of 17 , Mar 31, 2009
    • 0 Attachment
      Not sure I understand you. Some random thoughts that might be related:
      TextNodes have a label property, HTMLNodes don't. Changing the label
      property on a TextNode does not automatically refresh the UI, not until
      the node is refreshed. You either call the refresh method or update the
      DOM yourself.

      If it is a TextNode, instead of:

      node.getContentEl().textContent = 'new-value'

      do:

      node.getLabelEl().innerHTML = 'new-value'

      The label is contained in a <span> and if you set the content to a
      simple text, the <span> will be gone and the getLabelEl won't work any
      longer since it looks for this <span>

      Satyam


      nkwok escribió:
      > Satyam,
      >
      > Thanks for the tips and I got the input form render accordingly! Many thanks! However, I got stuck trying to change the label of the node - since one of the input value in the form will be the name of the node. I tried using node.getContentEl().textContent = 'new-value' and the label got reset afterward. Any suggestion!
      >
      >
      > Regards,
      > Norman
      >
      >
      > --- In ydn-javascript@yahoogroups.com, Satyam <satyam@...> wrote:
      >
      >> You can use HTMLNodes. They take a string containing whatever HTML you
      >> wish. Your best option might be to load the HTMLNode with '<div
      >> id="whatever"></div>' and then use YAHOO.util.Dom.get('whatever'); to
      >> find the div and fill it up. You can also set all the div and the
      >> complete form as an HTML string in just one go. Whatever you put in the
      >> html property of an HTMLNode will be inserted into the innerHTML
      >> property of the container for the node so either way will do. If all
      >> you want in the node is contained within the form element, you won't
      >> need the div. If the contents will be made of several elements, the
      >> form plus something other siblings, it is better to wrap them all in a
      >> single element, thus the div, just for safety.
      >>
      >> If you are using progressive enhancement and already have the markup for
      >> the form, you can pick that DOM element remove it from the DOM tree at
      >> its current location and insert it inside the 'whatever' div above.
      >>
      >> Two things to be aware of:
      >>
      >> The default action on clicking a TreeView node is toggling. That will
      >> always happen when you click on the toggle icon no matter what, that's
      >> what the icon is there for. It will also happen when clicking on the
      >> content unless you tell it not to. To prevent that, listen to the
      >> clickEvent, do whatever you need, if anything and return false.
      >>
      >> If you call any method that might produce a refresh of the node, any
      >> event listeners attached to the form itself or any buttons or other
      >> elements within will be lost. If you call tree.render more than once or
      >> node.refresh your listener will turn deaf.
      >>
      >> Satyam
      >>
      >>
      >> nkwok escribió:
      >>
      >>> Satyam,
      >>>
      >>> Thanks for your quick reply! I am not sure I understood what you mean by "use a simple div to hold its contents"? Since DataTable does not support vertical display, I want to have an input form to replace the datatable in the example. Where do I put the "div" in the treeview? Any tip will be appreciated to get me started. Thanks again!
      >>>
      >>>
      >>>
      >>> Regards,
      >>> Norman
      >>>
      >>>
      >>> --- In ydn-javascript@yahoogroups.com, Satyam <satyam@> wrote:
      >>>
      >>>
      >>>> Some widgets float over the ground floor of the page so they don't take
      >>>> any space in it since they float above. All of the Container family is
      >>>> meant to produce such floating containers. Panel and dialog are two
      >>>> widgets from the same family. They are meant to be dragged about, shown
      >>>> and hidden, resized and all this would leave a whole in the page
      >>>> underneath if they took any space there. The DataTable is embedded
      >>>> within the base of the page so it takes space there. If you want a
      >>>> generic container to take up space in the base page, use a simple div to
      >>>> hold its contents.
      >>>>
      >>>> Satyam
      >>>>
      >>>> nkwok escribió:
      >>>>
      >>>>
      >>>>> Hello,
      >>>>>
      >>>>> I found the excellent example "Tree View with DataTables as nodes) by Satyam. Is it possible to have other widget as node other than DataTable? I tried both "dialog" and "panel" widgets but they did not work correctly - meaning it rendered but overlapped with the next tree node. I was using the constructor like:
      >>>>>
      >>>>> new YAHOO.widget.Panel("panel", {width: "300px", constraintoviewport: false, visible: false});
      >>>>>
      >>>>> With DataTable, there is no overlap and the next tree node will expand accordingly. Is there some others parameters that I need for the Panel constructor in order for the treeview to render correctly?
      >>>>>
      >>>>>
      >>>>> Thanks,
      >>>>> Norman
      >>>>>
      >>>>>
      >>>>>
      >>>>>
      >>>>> ------------------------------------
      >>>>>
      >>>>> Yahoo! Groups Links
      >>>>>
      >>>>>
      >>>>>
      >>>>> ------------------------------------------------------------------------
      >>>>>
      >>>>>
      >>>>> No virus found in this incoming message.
      >>>>> Checked by AVG - www.avg.com
      >>>>> Version: 8.5.285 / Virus Database: 270.11.31/2029 - Release Date: 03/29/09 16:56:00
      >>>>>
      >>>>>
      >>>>>
      >>>>>
      >>>
      >>>
      >>> ------------------------------------
      >>>
      >>> Yahoo! Groups Links
      >>>
      >>>
      >>>
      >>> ------------------------------------------------------------------------
      >>>
      >>>
      >>> No virus found in this incoming message.
      >>> Checked by AVG - www.avg.com
      >>> Version: 8.5.285 / Virus Database: 270.11.31/2029 - Release Date: 03/29/09 16:56:00
      >>>
      >>>
      >>>
      >
      >
      >
      >
      > ------------------------------------
      >
      > Yahoo! Groups Links
      >
      >
      >
      > ------------------------------------------------------------------------
      >
      >
      > No virus found in this incoming message.
      > Checked by AVG - www.avg.com
      > Version: 8.5.285 / Virus Database: 270.11.32/2030 - Release Date: 03/30/09 08:40:00
      >
      >
    • nkwok
      Satyam, Sorry for not making myself clear! Yeah, that is what I want to do with the label of HTMLNode. Given that TextNode has a label property and HTMLNode
      Message 2 of 17 , Mar 31, 2009
      • 0 Attachment
        Satyam,

        Sorry for not making myself clear! Yeah, that is what I want to do with the label of HTMLNode. Given that TextNode has a label property and HTMLNode doesn't, how do I change the label of HTMLNode and refresh to see the change? Thanks again!


        Regards,
        Norman


        --- In ydn-javascript@yahoogroups.com, Satyam <satyam@...> wrote:
        >
        > Not sure I understand you. Some random thoughts that might be related:
        > TextNodes have a label property, HTMLNodes don't. Changing the label
        > property on a TextNode does not automatically refresh the UI, not until
        > the node is refreshed. You either call the refresh method or update the
        > DOM yourself.
        >
        > If it is a TextNode, instead of:
        >
        > node.getContentEl().textContent = 'new-value'
        >
        > do:
        >
        > node.getLabelEl().innerHTML = 'new-value'
        >
        > The label is contained in a <span> and if you set the content to a
        > simple text, the <span> will be gone and the getLabelEl won't work any
        > longer since it looks for this <span>
        >
        > Satyam
        >
        >
        > nkwok escribió:
        > > Satyam,
        > >
        > > Thanks for the tips and I got the input form render accordingly! Many thanks! However, I got stuck trying to change the label of the node - since one of the input value in the form will be the name of the node. I tried using node.getContentEl().textContent = 'new-value' and the label got reset afterward. Any suggestion!
        > >
        > >
        > > Regards,
        > > Norman
        > >
        > >
        > > --- In ydn-javascript@yahoogroups.com, Satyam <satyam@> wrote:
        > >
        > >> You can use HTMLNodes. They take a string containing whatever HTML you
        > >> wish. Your best option might be to load the HTMLNode with '<div
        > >> id="whatever"></div>' and then use YAHOO.util.Dom.get('whatever'); to
        > >> find the div and fill it up. You can also set all the div and the
        > >> complete form as an HTML string in just one go. Whatever you put in the
        > >> html property of an HTMLNode will be inserted into the innerHTML
        > >> property of the container for the node so either way will do. If all
        > >> you want in the node is contained within the form element, you won't
        > >> need the div. If the contents will be made of several elements, the
        > >> form plus something other siblings, it is better to wrap them all in a
        > >> single element, thus the div, just for safety.
        > >>
        > >> If you are using progressive enhancement and already have the markup for
        > >> the form, you can pick that DOM element remove it from the DOM tree at
        > >> its current location and insert it inside the 'whatever' div above.
        > >>
        > >> Two things to be aware of:
        > >>
        > >> The default action on clicking a TreeView node is toggling. That will
        > >> always happen when you click on the toggle icon no matter what, that's
        > >> what the icon is there for. It will also happen when clicking on the
        > >> content unless you tell it not to. To prevent that, listen to the
        > >> clickEvent, do whatever you need, if anything and return false.
        > >>
        > >> If you call any method that might produce a refresh of the node, any
        > >> event listeners attached to the form itself or any buttons or other
        > >> elements within will be lost. If you call tree.render more than once or
        > >> node.refresh your listener will turn deaf.
        > >>
        > >> Satyam
        > >>
        > >>
        > >> nkwok escribió:
        > >>
        > >>> Satyam,
        > >>>
        > >>> Thanks for your quick reply! I am not sure I understood what you mean by "use a simple div to hold its contents"? Since DataTable does not support vertical display, I want to have an input form to replace the datatable in the example. Where do I put the "div" in the treeview? Any tip will be appreciated to get me started. Thanks again!
        > >>>
        > >>>
        > >>>
        > >>> Regards,
        > >>> Norman
        > >>>
        > >>>
        > >>> --- In ydn-javascript@yahoogroups.com, Satyam <satyam@> wrote:
        > >>>
        > >>>
        > >>>> Some widgets float over the ground floor of the page so they don't take
        > >>>> any space in it since they float above. All of the Container family is
        > >>>> meant to produce such floating containers. Panel and dialog are two
        > >>>> widgets from the same family. They are meant to be dragged about, shown
        > >>>> and hidden, resized and all this would leave a whole in the page
        > >>>> underneath if they took any space there. The DataTable is embedded
        > >>>> within the base of the page so it takes space there. If you want a
        > >>>> generic container to take up space in the base page, use a simple div to
        > >>>> hold its contents.
        > >>>>
        > >>>> Satyam
        > >>>>
        > >>>> nkwok escribió:
        > >>>>
        > >>>>
        > >>>>> Hello,
        > >>>>>
        > >>>>> I found the excellent example "Tree View with DataTables as nodes) by Satyam. Is it possible to have other widget as node other than DataTable? I tried both "dialog" and "panel" widgets but they did not work correctly - meaning it rendered but overlapped with the next tree node. I was using the constructor like:
        > >>>>>
        > >>>>> new YAHOO.widget.Panel("panel", {width: "300px", constraintoviewport: false, visible: false});
        > >>>>>
        > >>>>> With DataTable, there is no overlap and the next tree node will expand accordingly. Is there some others parameters that I need for the Panel constructor in order for the treeview to render correctly?
        > >>>>>
        > >>>>>
        > >>>>> Thanks,
        > >>>>> Norman
        > >>>>>
        > >>>>>
        > >>>>>
        > >>>>>
        > >>>>> ------------------------------------
        > >>>>>
        > >>>>> Yahoo! Groups Links
        > >>>>>
        > >>>>>
        > >>>>>
        > >>>>> ------------------------------------------------------------------------
        > >>>>>
        > >>>>>
        > >>>>> No virus found in this incoming message.
        > >>>>> Checked by AVG - www.avg.com
        > >>>>> Version: 8.5.285 / Virus Database: 270.11.31/2029 - Release Date: 03/29/09 16:56:00
        > >>>>>
        > >>>>>
        > >>>>>
        > >>>>>
        > >>>
        > >>>
        > >>> ------------------------------------
        > >>>
        > >>> Yahoo! Groups Links
        > >>>
        > >>>
        > >>>
        > >>> ------------------------------------------------------------------------
        > >>>
        > >>>
        > >>> No virus found in this incoming message.
        > >>> Checked by AVG - www.avg.com
        > >>> Version: 8.5.285 / Virus Database: 270.11.31/2029 - Release Date: 03/29/09 16:56:00
        > >>>
        > >>>
        > >>>
        > >
        > >
        > >
        > >
        > > ------------------------------------
        > >
        > > Yahoo! Groups Links
        > >
        > >
        > >
        > > ------------------------------------------------------------------------
        > >
        > >
        > > No virus found in this incoming message.
        > > Checked by AVG - www.avg.com
        > > Version: 8.5.285 / Virus Database: 270.11.32/2030 - Release Date: 03/30/09 08:40:00
        > >
        > >
        >
      • Satyam
        In HTMLNode, you can use the setHTML method. It doesn t have a label property, nor a getLabelEl() method. In general, avoid using the textContent property.
        Message 3 of 17 , Mar 31, 2009
        • 0 Attachment
          In HTMLNode, you can use the setHTML method. It doesn't have a label
          property, nor a getLabelEl() method.

          In general, avoid using the textContent property. When you read it, it
          will return all the text nodes within the container element,
          disregarding all HTML markup. If your node had been a TextNode instead
          of an HTMLNode, it would ignore the <span> enclosing the text and return
          the text within. That is fine if that's what you want, but the problem
          is that when you assign anything to it, it will wipe out that markup, it
          will not replace strictly what it showed you but it will replace all of
          it, what it showed you and what it didn't. The innerHTML property is
          more clear about it, it shows you all and replaces all, nothing hidden
          there.

          Satyam


          nkwok escribió:
          > Satyam,
          >
          > Sorry for not making myself clear! Yeah, that is what I want to do with the label of HTMLNode. Given that TextNode has a label property and HTMLNode doesn't, how do I change the label of HTMLNode and refresh to see the change? Thanks again!
          >
          >
          > Regards,
          > Norman
          >
          >
          > --- In ydn-javascript@yahoogroups.com, Satyam <satyam@...> wrote:
          >
          >> Not sure I understand you. Some random thoughts that might be related:
          >> TextNodes have a label property, HTMLNodes don't. Changing the label
          >> property on a TextNode does not automatically refresh the UI, not until
          >> the node is refreshed. You either call the refresh method or update the
          >> DOM yourself.
          >>
          >> If it is a TextNode, instead of:
          >>
          >> node.getContentEl().textContent = 'new-value'
          >>
          >> do:
          >>
          >> node.getLabelEl().innerHTML = 'new-value'
          >>
          >> The label is contained in a <span> and if you set the content to a
          >> simple text, the <span> will be gone and the getLabelEl won't work any
          >> longer since it looks for this <span>
          >>
          >> Satyam
          >>
          >>
          >> nkwok escribió:
          >>
          >>> Satyam,
          >>>
          >>> Thanks for the tips and I got the input form render accordingly! Many thanks! However, I got stuck trying to change the label of the node - since one of the input value in the form will be the name of the node. I tried using node.getContentEl().textContent = 'new-value' and the label got reset afterward. Any suggestion!
          >>>
          >>>
          >>> Regards,
          >>> Norman
          >>>
          >>>
          >>> --- In ydn-javascript@yahoogroups.com, Satyam <satyam@> wrote:
          >>>
          >>>
          >>>> You can use HTMLNodes. They take a string containing whatever HTML you
          >>>> wish. Your best option might be to load the HTMLNode with '<div
          >>>> id="whatever"></div>' and then use YAHOO.util.Dom.get('whatever'); to
          >>>> find the div and fill it up. You can also set all the div and the
          >>>> complete form as an HTML string in just one go. Whatever you put in the
          >>>> html property of an HTMLNode will be inserted into the innerHTML
          >>>> property of the container for the node so either way will do. If all
          >>>> you want in the node is contained within the form element, you won't
          >>>> need the div. If the contents will be made of several elements, the
          >>>> form plus something other siblings, it is better to wrap them all in a
          >>>> single element, thus the div, just for safety.
          >>>>
          >>>> If you are using progressive enhancement and already have the markup for
          >>>> the form, you can pick that DOM element remove it from the DOM tree at
          >>>> its current location and insert it inside the 'whatever' div above.
          >>>>
          >>>> Two things to be aware of:
          >>>>
          >>>> The default action on clicking a TreeView node is toggling. That will
          >>>> always happen when you click on the toggle icon no matter what, that's
          >>>> what the icon is there for. It will also happen when clicking on the
          >>>> content unless you tell it not to. To prevent that, listen to the
          >>>> clickEvent, do whatever you need, if anything and return false.
          >>>>
          >>>> If you call any method that might produce a refresh of the node, any
          >>>> event listeners attached to the form itself or any buttons or other
          >>>> elements within will be lost. If you call tree.render more than once or
          >>>> node.refresh your listener will turn deaf.
          >>>>
          >>>> Satyam
          >>>>
          >>>>
          >>>> nkwok escribió:
          >>>>
          >>>>
          >>>>> Satyam,
          >>>>>
          >>>>> Thanks for your quick reply! I am not sure I understood what you mean by "use a simple div to hold its contents"? Since DataTable does not support vertical display, I want to have an input form to replace the datatable in the example. Where do I put the "div" in the treeview? Any tip will be appreciated to get me started. Thanks again!
          >>>>>
          >>>>>
          >>>>>
          >>>>> Regards,
          >>>>> Norman
          >>>>>
          >>>>>
          >>>>> --- In ydn-javascript@yahoogroups.com, Satyam <satyam@> wrote:
          >>>>>
          >>>>>
          >>>>>
          >>>>>> Some widgets float over the ground floor of the page so they don't take
          >>>>>> any space in it since they float above. All of the Container family is
          >>>>>> meant to produce such floating containers. Panel and dialog are two
          >>>>>> widgets from the same family. They are meant to be dragged about, shown
          >>>>>> and hidden, resized and all this would leave a whole in the page
          >>>>>> underneath if they took any space there. The DataTable is embedded
          >>>>>> within the base of the page so it takes space there. If you want a
          >>>>>> generic container to take up space in the base page, use a simple div to
          >>>>>> hold its contents.
          >>>>>>
          >>>>>> Satyam
          >>>>>>
          >>>>>> nkwok escribió:
          >>>>>>
          >>>>>>
          >>>>>>
          >>>>>>> Hello,
          >>>>>>>
          >>>>>>> I found the excellent example "Tree View with DataTables as nodes) by Satyam. Is it possible to have other widget as node other than DataTable? I tried both "dialog" and "panel" widgets but they did not work correctly - meaning it rendered but overlapped with the next tree node. I was using the constructor like:
          >>>>>>>
          >>>>>>> new YAHOO.widget.Panel("panel", {width: "300px", constraintoviewport: false, visible: false});
          >>>>>>>
          >>>>>>> With DataTable, there is no overlap and the next tree node will expand accordingly. Is there some others parameters that I need for the Panel constructor in order for the treeview to render correctly?
          >>>>>>>
          >>>>>>>
          >>>>>>> Thanks,
          >>>>>>> Norman
          >>>>>>>
          >>>>>>>
          >>>>>>>
          >>>>>>>
          >>>>>>> ------------------------------------
          >>>>>>>
          >>>>>>> Yahoo! Groups Links
          >>>>>>>
          >>>>>>>
          >>>>>>>
          >>>>>>> ------------------------------------------------------------------------
          >>>>>>>
          >>>>>>>
          >>>>>>> No virus found in this incoming message.
          >>>>>>> Checked by AVG - www.avg.com
          >>>>>>> Version: 8.5.285 / Virus Database: 270.11.31/2029 - Release Date: 03/29/09 16:56:00
          >>>>>>>
          >>>>>>>
          >>>>>>>
          >>>>>>>
          >>>>>>>
          >>>>> ------------------------------------
          >>>>>
          >>>>> Yahoo! Groups Links
          >>>>>
          >>>>>
          >>>>>
          >>>>> ------------------------------------------------------------------------
          >>>>>
          >>>>>
          >>>>> No virus found in this incoming message.
          >>>>> Checked by AVG - www.avg.com
          >>>>> Version: 8.5.285 / Virus Database: 270.11.31/2029 - Release Date: 03/29/09 16:56:00
          >>>>>
          >>>>>
          >>>>>
          >>>>>
          >>>
          >>>
          >>> ------------------------------------
          >>>
          >>> Yahoo! Groups Links
          >>>
          >>>
          >>>
          >>> ------------------------------------------------------------------------
          >>>
          >>>
          >>> No virus found in this incoming message.
          >>> Checked by AVG - www.avg.com
          >>> Version: 8.5.285 / Virus Database: 270.11.32/2030 - Release Date: 03/30/09 08:40:00
          >>>
          >>>
          >>>
          >
          >
          >
          >
          > ------------------------------------
          >
          > Yahoo! Groups Links
          >
          >
          >
          > ------------------------------------------------------------------------
          >
          >
          > No virus found in this incoming message.
          > Checked by AVG - www.avg.com
          > Version: 8.5.285 / Virus Database: 270.11.32/2030 - Release Date: 03/30/09 08:40:00
          >
          >
        • nkwok
          Satyam, It did not work with setHtml method that you mention above. There are couple problems with this approach: 1. I used getHtml() to get the html string,
          Message 4 of 17 , Apr 1 2:13 PM
          • 0 Attachment
            Satyam,

            It did not work with setHtml method that you mention above. There are couple problems with this approach:

            1. I used getHtml() to get the html string, then call setHtml() and the tree display 2 "-" icons like "- - label" and duplicate all the children. Strange!
            2. After setHtml() call, the data structure got wiped out. Calling the 'tree.getNodeByProperty('key", "my-key")' will return null the 2nd time.

            I also tried adding a <div id='alabel' >Label</div> and used getElementById('alabel') and changed by innerHTML. However, the tree render back the older data afterward.

            Is there any way to change the node label for HTMLNode?


            Regards,
            Norman


            --- In ydn-javascript@yahoogroups.com, Satyam <satyam@...> wrote:
            >
            > In HTMLNode, you can use the setHTML method. It doesn't have a label
            > property, nor a getLabelEl() method.
            >
            > In general, avoid using the textContent property. When you read it, it
            > will return all the text nodes within the container element,
            > disregarding all HTML markup. If your node had been a TextNode instead
            > of an HTMLNode, it would ignore the <span> enclosing the text and return
            > the text within. That is fine if that's what you want, but the problem
            > is that when you assign anything to it, it will wipe out that markup, it
            > will not replace strictly what it showed you but it will replace all of
            > it, what it showed you and what it didn't. The innerHTML property is
            > more clear about it, it shows you all and replaces all, nothing hidden
            > there.
            >
            > Satyam
            >
            >
            > nkwok escribió:
            > > Satyam,
            > >
            > > Sorry for not making myself clear! Yeah, that is what I want to do with the label of HTMLNode. Given that TextNode has a label property and HTMLNode doesn't, how do I change the label of HTMLNode and refresh to see the change? Thanks again!
            > >
            > >
            > > Regards,
            > > Norman
            > >
            > >
            > > --- In ydn-javascript@yahoogroups.com, Satyam <satyam@> wrote:
            > >
            > >> Not sure I understand you. Some random thoughts that might be related:
            > >> TextNodes have a label property, HTMLNodes don't. Changing the label
            > >> property on a TextNode does not automatically refresh the UI, not until
            > >> the node is refreshed. You either call the refresh method or update the
            > >> DOM yourself.
            > >>
            > >> If it is a TextNode, instead of:
            > >>
            > >> node.getContentEl().textContent = 'new-value'
            > >>
            > >> do:
            > >>
            > >> node.getLabelEl().innerHTML = 'new-value'
            > >>
            > >> The label is contained in a <span> and if you set the content to a
            > >> simple text, the <span> will be gone and the getLabelEl won't work any
            > >> longer since it looks for this <span>
            > >>
            > >> Satyam
            > >>
            > >>
            > >> nkwok escribió:
            > >>
            > >>> Satyam,
            > >>>
            > >>> Thanks for the tips and I got the input form render accordingly! Many thanks! However, I got stuck trying to change the label of the node - since one of the input value in the form will be the name of the node. I tried using node.getContentEl().textContent = 'new-value' and the label got reset afterward. Any suggestion!
            > >>>
            > >>>
            > >>> Regards,
            > >>> Norman
            > >>>
            > >>>
            > >>> --- In ydn-javascript@yahoogroups.com, Satyam <satyam@> wrote:
            > >>>
            > >>>
            > >>>> You can use HTMLNodes. They take a string containing whatever HTML you
            > >>>> wish. Your best option might be to load the HTMLNode with '<div
            > >>>> id="whatever"></div>' and then use YAHOO.util.Dom.get('whatever'); to
            > >>>> find the div and fill it up. You can also set all the div and the
            > >>>> complete form as an HTML string in just one go. Whatever you put in the
            > >>>> html property of an HTMLNode will be inserted into the innerHTML
            > >>>> property of the container for the node so either way will do. If all
            > >>>> you want in the node is contained within the form element, you won't
            > >>>> need the div. If the contents will be made of several elements, the
            > >>>> form plus something other siblings, it is better to wrap them all in a
            > >>>> single element, thus the div, just for safety.
            > >>>>
            > >>>> If you are using progressive enhancement and already have the markup for
            > >>>> the form, you can pick that DOM element remove it from the DOM tree at
            > >>>> its current location and insert it inside the 'whatever' div above.
            > >>>>
            > >>>> Two things to be aware of:
            > >>>>
            > >>>> The default action on clicking a TreeView node is toggling. That will
            > >>>> always happen when you click on the toggle icon no matter what, that's
            > >>>> what the icon is there for. It will also happen when clicking on the
            > >>>> content unless you tell it not to. To prevent that, listen to the
            > >>>> clickEvent, do whatever you need, if anything and return false.
            > >>>>
            > >>>> If you call any method that might produce a refresh of the node, any
            > >>>> event listeners attached to the form itself or any buttons or other
            > >>>> elements within will be lost. If you call tree.render more than once or
            > >>>> node.refresh your listener will turn deaf.
            > >>>>
            > >>>> Satyam
            > >>>>
            > >>>>
            > >>>> nkwok escribió:
            > >>>>
            > >>>>
            > >>>>> Satyam,
            > >>>>>
            > >>>>> Thanks for your quick reply! I am not sure I understood what you mean by "use a simple div to hold its contents"? Since DataTable does not support vertical display, I want to have an input form to replace the datatable in the example. Where do I put the "div" in the treeview? Any tip will be appreciated to get me started. Thanks again!
            > >>>>>
            > >>>>>
            > >>>>>
            > >>>>> Regards,
            > >>>>> Norman
            > >>>>>
            > >>>>>
            > >>>>> --- In ydn-javascript@yahoogroups.com, Satyam <satyam@> wrote:
            > >>>>>
            > >>>>>
            > >>>>>
            > >>>>>> Some widgets float over the ground floor of the page so they don't take
            > >>>>>> any space in it since they float above. All of the Container family is
            > >>>>>> meant to produce such floating containers. Panel and dialog are two
            > >>>>>> widgets from the same family. They are meant to be dragged about, shown
            > >>>>>> and hidden, resized and all this would leave a whole in the page
            > >>>>>> underneath if they took any space there. The DataTable is embedded
            > >>>>>> within the base of the page so it takes space there. If you want a
            > >>>>>> generic container to take up space in the base page, use a simple div to
            > >>>>>> hold its contents.
            > >>>>>>
            > >>>>>> Satyam
            > >>>>>>
            > >>>>>> nkwok escribió:
            > >>>>>>
            > >>>>>>
            > >>>>>>
            > >>>>>>> Hello,
            > >>>>>>>
            > >>>>>>> I found the excellent example "Tree View with DataTables as nodes) by Satyam. Is it possible to have other widget as node other than DataTable? I tried both "dialog" and "panel" widgets but they did not work correctly - meaning it rendered but overlapped with the next tree node. I was using the constructor like:
            > >>>>>>>
            > >>>>>>> new YAHOO.widget.Panel("panel", {width: "300px", constraintoviewport: false, visible: false});
            > >>>>>>>
            > >>>>>>> With DataTable, there is no overlap and the next tree node will expand accordingly. Is there some others parameters that I need for the Panel constructor in order for the treeview to render correctly?
            > >>>>>>>
            > >>>>>>>
            > >>>>>>> Thanks,
            > >>>>>>> Norman
            > >>>>>>>
            > >>>>>>>
            > >>>>>>>
            > >>>>>>>
            > >>>>>>> ------------------------------------
            > >>>>>>>
            > >>>>>>> Yahoo! Groups Links
            > >>>>>>>
            > >>>>>>>
            > >>>>>>>
            > >>>>>>> ------------------------------------------------------------------------
            > >>>>>>>
            > >>>>>>>
            > >>>>>>> No virus found in this incoming message.
            > >>>>>>> Checked by AVG - www.avg.com
            > >>>>>>> Version: 8.5.285 / Virus Database: 270.11.31/2029 - Release Date: 03/29/09 16:56:00
            > >>>>>>>
            > >>>>>>>
            > >>>>>>>
            > >>>>>>>
            > >>>>>>>
            > >>>>> ------------------------------------
            > >>>>>
            > >>>>> Yahoo! Groups Links
            > >>>>>
            > >>>>>
            > >>>>>
            > >>>>> ------------------------------------------------------------------------
            > >>>>>
            > >>>>>
            > >>>>> No virus found in this incoming message.
            > >>>>> Checked by AVG - www.avg.com
            > >>>>> Version: 8.5.285 / Virus Database: 270.11.31/2029 - Release Date: 03/29/09 16:56:00
            > >>>>>
            > >>>>>
            > >>>>>
            > >>>>>
            > >>>
            > >>>
            > >>> ------------------------------------
            > >>>
            > >>> Yahoo! Groups Links
            > >>>
            > >>>
            > >>>
            > >>> ------------------------------------------------------------------------
            > >>>
            > >>>
            > >>> No virus found in this incoming message.
            > >>> Checked by AVG - www.avg.com
            > >>> Version: 8.5.285 / Virus Database: 270.11.32/2030 - Release Date: 03/30/09 08:40:00
            > >>>
            > >>>
            > >>>
            > >
            > >
            > >
            > >
            > > ------------------------------------
            > >
            > > Yahoo! Groups Links
            > >
            > >
            > >
            > > ------------------------------------------------------------------------
            > >
            > >
            > > No virus found in this incoming message.
            > > Checked by AVG - www.avg.com
            > > Version: 8.5.285 / Virus Database: 270.11.32/2030 - Release Date: 03/30/09 08:40:00
            > >
            > >
            >
          • Satyam
            Can you send me your code, or a relevant section of it? I would love to try it and see what fails. Thanks Satyam
            Message 5 of 17 , Apr 1 2:25 PM
            • 0 Attachment
              Can you send me your code, or a relevant section of it? I would love to
              try it and see what fails.

              Thanks

              Satyam


              nkwok escribió:
              > Satyam,
              >
              > It did not work with setHtml method that you mention above. There are couple problems with this approach:
              >
              > 1. I used getHtml() to get the html string, then call setHtml() and the tree display 2 "-" icons like "- - label" and duplicate all the children. Strange!
              > 2. After setHtml() call, the data structure got wiped out. Calling the 'tree.getNodeByProperty('key", "my-key")' will return null the 2nd time.
              >
              > I also tried adding a <div id='alabel' >Label</div> and used getElementById('alabel') and changed by innerHTML. However, the tree render back the older data afterward.
              >
              > Is there any way to change the node label for HTMLNode?
              >
              >
              > Regards,
              > Norman
              >
              >
              > --- In ydn-javascript@yahoogroups.com, Satyam <satyam@...> wrote:
              >
              >> In HTMLNode, you can use the setHTML method. It doesn't have a label
              >> property, nor a getLabelEl() method.
              >>
              >> In general, avoid using the textContent property. When you read it, it
              >> will return all the text nodes within the container element,
              >> disregarding all HTML markup. If your node had been a TextNode instead
              >> of an HTMLNode, it would ignore the <span> enclosing the text and return
              >> the text within. That is fine if that's what you want, but the problem
              >> is that when you assign anything to it, it will wipe out that markup, it
              >> will not replace strictly what it showed you but it will replace all of
              >> it, what it showed you and what it didn't. The innerHTML property is
              >> more clear about it, it shows you all and replaces all, nothing hidden
              >> there.
              >>
              >> Satyam
              >>
              >>
              >> nkwok escribió:
              >>
              >>> Satyam,
              >>>
              >>> Sorry for not making myself clear! Yeah, that is what I want to do with the label of HTMLNode. Given that TextNode has a label property and HTMLNode doesn't, how do I change the label of HTMLNode and refresh to see the change? Thanks again!
              >>>
              >>>
              >>> Regards,
              >>> Norman
              >>>
              >>>
              >>> --- In ydn-javascript@yahoogroups.com, Satyam <satyam@> wrote:
              >>>
              >>>
              >>>> Not sure I understand you. Some random thoughts that might be related:
              >>>> TextNodes have a label property, HTMLNodes don't. Changing the label
              >>>> property on a TextNode does not automatically refresh the UI, not until
              >>>> the node is refreshed. You either call the refresh method or update the
              >>>> DOM yourself.
              >>>>
              >>>> If it is a TextNode, instead of:
              >>>>
              >>>> node.getContentEl().textContent = 'new-value'
              >>>>
              >>>> do:
              >>>>
              >>>> node.getLabelEl().innerHTML = 'new-value'
              >>>>
              >>>> The label is contained in a <span> and if you set the content to a
              >>>> simple text, the <span> will be gone and the getLabelEl won't work any
              >>>> longer since it looks for this <span>
              >>>>
              >>>> Satyam
              >>>>
              >>>>
              >>>> nkwok escribió:
              >>>>
              >>>>
              >>>>> Satyam,
              >>>>>
              >>>>> Thanks for the tips and I got the input form render accordingly! Many thanks! However, I got stuck trying to change the label of the node - since one of the input value in the form will be the name of the node. I tried using node.getContentEl().textContent = 'new-value' and the label got reset afterward. Any suggestion!
              >>>>>
              >>>>>
              >>>>> Regards,
              >>>>> Norman
              >>>>>
              >>>>>
              >>>>> --- In ydn-javascript@yahoogroups.com, Satyam <satyam@> wrote:
              >>>>>
              >>>>>
              >>>>>
              >>>>>> You can use HTMLNodes. They take a string containing whatever HTML you
              >>>>>> wish. Your best option might be to load the HTMLNode with '<div
              >>>>>> id="whatever"></div>' and then use YAHOO.util.Dom.get('whatever'); to
              >>>>>> find the div and fill it up. You can also set all the div and the
              >>>>>> complete form as an HTML string in just one go. Whatever you put in the
              >>>>>> html property of an HTMLNode will be inserted into the innerHTML
              >>>>>> property of the container for the node so either way will do. If all
              >>>>>> you want in the node is contained within the form element, you won't
              >>>>>> need the div. If the contents will be made of several elements, the
              >>>>>> form plus something other siblings, it is better to wrap them all in a
              >>>>>> single element, thus the div, just for safety.
              >>>>>>
              >>>>>> If you are using progressive enhancement and already have the markup for
              >>>>>> the form, you can pick that DOM element remove it from the DOM tree at
              >>>>>> its current location and insert it inside the 'whatever' div above.
              >>>>>>
              >>>>>> Two things to be aware of:
              >>>>>>
              >>>>>> The default action on clicking a TreeView node is toggling. That will
              >>>>>> always happen when you click on the toggle icon no matter what, that's
              >>>>>> what the icon is there for. It will also happen when clicking on the
              >>>>>> content unless you tell it not to. To prevent that, listen to the
              >>>>>> clickEvent, do whatever you need, if anything and return false.
              >>>>>>
              >>>>>> If you call any method that might produce a refresh of the node, any
              >>>>>> event listeners attached to the form itself or any buttons or other
              >>>>>> elements within will be lost. If you call tree.render more than once or
              >>>>>> node.refresh your listener will turn deaf.
              >>>>>>
              >>>>>> Satyam
              >>>>>>
              >>>>>>
              >>>>>> nkwok escribió:
              >>>>>>
              >>>>>>
              >>>>>>
              >>>>>>> Satyam,
              >>>>>>>
              >>>>>>> Thanks for your quick reply! I am not sure I understood what you mean by "use a simple div to hold its contents"? Since DataTable does not support vertical display, I want to have an input form to replace the datatable in the example. Where do I put the "div" in the treeview? Any tip will be appreciated to get me started. Thanks again!
              >>>>>>>
              >>>>>>>
              >>>>>>>
              >>>>>>> Regards,
              >>>>>>> Norman
              >>>>>>>
              >>>>>>>
              >>>>>>> --- In ydn-javascript@yahoogroups.com, Satyam <satyam@> wrote:
              >>>>>>>
              >>>>>>>
              >>>>>>>
              >>>>>>>
              >>>>>>>> Some widgets float over the ground floor of the page so they don't take
              >>>>>>>> any space in it since they float above. All of the Container family is
              >>>>>>>> meant to produce such floating containers. Panel and dialog are two
              >>>>>>>> widgets from the same family. They are meant to be dragged about, shown
              >>>>>>>> and hidden, resized and all this would leave a whole in the page
              >>>>>>>> underneath if they took any space there. The DataTable is embedded
              >>>>>>>> within the base of the page so it takes space there. If you want a
              >>>>>>>> generic container to take up space in the base page, use a simple div to
              >>>>>>>> hold its contents.
              >>>>>>>>
              >>>>>>>> Satyam
              >>>>>>>>
              >>>>>>>> nkwok escribió:
              >>>>>>>>
              >>>>>>>>
              >>>>>>>>
              >>>>>>>>
              >>>>>>>>> Hello,
              >>>>>>>>>
              >>>>>>>>> I found the excellent example "Tree View with DataTables as nodes) by Satyam. Is it possible to have other widget as node other than DataTable? I tried both "dialog" and "panel" widgets but they did not work correctly - meaning it rendered but overlapped with the next tree node. I was using the constructor like:
              >>>>>>>>>
              >>>>>>>>> new YAHOO.widget.Panel("panel", {width: "300px", constraintoviewport: false, visible: false});
              >>>>>>>>>
              >>>>>>>>> With DataTable, there is no overlap and the next tree node will expand accordingly. Is there some others parameters that I need for the Panel constructor in order for the treeview to render correctly?
              >>>>>>>>>
              >>>>>>>>>
              >>>>>>>>> Thanks,
              >>>>>>>>> Norman
              >>>>>>>>>
              >>>>>>>>>
              >>>>>>>>>
              >>>>>>>>>
              >>>>>>>>> ------------------------------------
              >>>>>>>>>
              >>>>>>>>> Yahoo! Groups Links
              >>>>>>>>>
              >>>>>>>>>
              >>>>>>>>>
              >>>>>>>>> ------------------------------------------------------------------------
              >>>>>>>>>
              >>>>>>>>>
              >>>>>>>>> No virus found in this incoming message.
              >>>>>>>>> Checked by AVG - www.avg.com
              >>>>>>>>> Version: 8.5.285 / Virus Database: 270.11.31/2029 - Release Date: 03/29/09 16:56:00
              >>>>>>>>>
              >>>>>>>>>
              >>>>>>>>>
              >>>>>>>>>
              >>>>>>>>>
              >>>>>>>>>
              >>>>>>> ------------------------------------
              >>>>>>>
              >>>>>>> Yahoo! Groups Links
              >>>>>>>
              >>>>>>>
              >>>>>>>
              >>>>>>> ------------------------------------------------------------------------
              >>>>>>>
              >>>>>>>
              >>>>>>> No virus found in this incoming message.
              >>>>>>> Checked by AVG - www.avg.com
              >>>>>>> Version: 8.5.285 / Virus Database: 270.11.31/2029 - Release Date: 03/29/09 16:56:00
              >>>>>>>
              >>>>>>>
              >>>>>>>
              >>>>>>>
              >>>>>>>
              >>>>> ------------------------------------
              >>>>>
              >>>>> Yahoo! Groups Links
              >>>>>
              >>>>>
              >>>>>
              >>>>> ------------------------------------------------------------------------
              >>>>>
              >>>>>
              >>>>> No virus found in this incoming message.
              >>>>> Checked by AVG - www.avg.com
              >>>>> Version: 8.5.285 / Virus Database: 270.11.32/2030 - Release Date: 03/30/09 08:40:00
              >>>>>
              >>>>>
              >>>>>
              >>>>>
              >>>
              >>>
              >>> ------------------------------------
              >>>
              >>> Yahoo! Groups Links
              >>>
              >>>
              >>>
              >>> ------------------------------------------------------------------------
              >>>
              >>>
              >>> No virus found in this incoming message.
              >>> Checked by AVG - www.avg.com
              >>> Version: 8.5.285 / Virus Database: 270.11.32/2030 - Release Date: 03/30/09 08:40:00
              >>>
              >>>
              >>>
              >
              >
              >
              >
              > ------------------------------------
              >
              > Yahoo! Groups Links
              >
              >
              >
              > ------------------------------------------------------------------------
              >
              >
              > No virus found in this incoming message.
              > Checked by AVG - www.avg.com
              > Version: 8.5.285 / Virus Database: 270.11.35/2034 - Release Date: 04/01/09 06:06:00
              >
              >
            • nkwok
              Satyam, Sure, should I cat & paste here since it does not allowed to attach any link? Regards, Norman
              Message 6 of 17 , Apr 1 9:30 PM
              • 0 Attachment
                Satyam,

                Sure, should I cat & paste here since it does not allowed to attach any link?


                Regards,
                Norman

                --- In ydn-javascript@yahoogroups.com, Satyam <satyam@...> wrote:
                >
                > Can you send me your code, or a relevant section of it? I would love to
                > try it and see what fails.
                >
                > Thanks
                >
                > Satyam
                >
                >
                > nkwok escribió:
                > > Satyam,
                > >
                > > It did not work with setHtml method that you mention above. There are couple problems with this approach:
                > >
                > > 1. I used getHtml() to get the html string, then call setHtml() and the tree display 2 "-" icons like "- - label" and duplicate all the children. Strange!
                > > 2. After setHtml() call, the data structure got wiped out. Calling the 'tree.getNodeByProperty('key", "my-key")' will return null the 2nd time.
                > >
                > > I also tried adding a <div id='alabel' >Label</div> and used getElementById('alabel') and changed by innerHTML. However, the tree render back the older data afterward.
                > >
                > > Is there any way to change the node label for HTMLNode?
                > >
                > >
                > > Regards,
                > > Norman
                > >
                > >
                > > --- In ydn-javascript@yahoogroups.com, Satyam <satyam@> wrote:
                > >
                > >> In HTMLNode, you can use the setHTML method. It doesn't have a label
                > >> property, nor a getLabelEl() method.
                > >>
                > >> In general, avoid using the textContent property. When you read it, it
                > >> will return all the text nodes within the container element,
                > >> disregarding all HTML markup. If your node had been a TextNode instead
                > >> of an HTMLNode, it would ignore the <span> enclosing the text and return
                > >> the text within. That is fine if that's what you want, but the problem
                > >> is that when you assign anything to it, it will wipe out that markup, it
                > >> will not replace strictly what it showed you but it will replace all of
                > >> it, what it showed you and what it didn't. The innerHTML property is
                > >> more clear about it, it shows you all and replaces all, nothing hidden
                > >> there.
                > >>
                > >> Satyam
                > >>
                > >>
                > >> nkwok escribió:
                > >>
                > >>> Satyam,
                > >>>
                > >>> Sorry for not making myself clear! Yeah, that is what I want to do with the label of HTMLNode. Given that TextNode has a label property and HTMLNode doesn't, how do I change the label of HTMLNode and refresh to see the change? Thanks again!
                > >>>
                > >>>
                > >>> Regards,
                > >>> Norman
                > >>>
                > >>>
                > >>> --- In ydn-javascript@yahoogroups.com, Satyam <satyam@> wrote:
                > >>>
                > >>>
                > >>>> Not sure I understand you. Some random thoughts that might be related:
                > >>>> TextNodes have a label property, HTMLNodes don't. Changing the label
                > >>>> property on a TextNode does not automatically refresh the UI, not until
                > >>>> the node is refreshed. You either call the refresh method or update the
                > >>>> DOM yourself.
                > >>>>
                > >>>> If it is a TextNode, instead of:
                > >>>>
                > >>>> node.getContentEl().textContent = 'new-value'
                > >>>>
                > >>>> do:
                > >>>>
                > >>>> node.getLabelEl().innerHTML = 'new-value'
                > >>>>
                > >>>> The label is contained in a <span> and if you set the content to a
                > >>>> simple text, the <span> will be gone and the getLabelEl won't work any
                > >>>> longer since it looks for this <span>
                > >>>>
                > >>>> Satyam
                > >>>>
                > >>>>
                > >>>> nkwok escribió:
                > >>>>
                > >>>>
                > >>>>> Satyam,
                > >>>>>
                > >>>>> Thanks for the tips and I got the input form render accordingly! Many thanks! However, I got stuck trying to change the label of the node - since one of the input value in the form will be the name of the node. I tried using node.getContentEl().textContent = 'new-value' and the label got reset afterward. Any suggestion!
                > >>>>>
                > >>>>>
                > >>>>> Regards,
                > >>>>> Norman
                > >>>>>
                > >>>>>
                > >>>>> --- In ydn-javascript@yahoogroups.com, Satyam <satyam@> wrote:
                > >>>>>
                > >>>>>
                > >>>>>
                > >>>>>> You can use HTMLNodes. They take a string containing whatever HTML you
                > >>>>>> wish. Your best option might be to load the HTMLNode with '<div
                > >>>>>> id="whatever"></div>' and then use YAHOO.util.Dom.get('whatever'); to
                > >>>>>> find the div and fill it up. You can also set all the div and the
                > >>>>>> complete form as an HTML string in just one go. Whatever you put in the
                > >>>>>> html property of an HTMLNode will be inserted into the innerHTML
                > >>>>>> property of the container for the node so either way will do. If all
                > >>>>>> you want in the node is contained within the form element, you won't
                > >>>>>> need the div. If the contents will be made of several elements, the
                > >>>>>> form plus something other siblings, it is better to wrap them all in a
                > >>>>>> single element, thus the div, just for safety.
                > >>>>>>
                > >>>>>> If you are using progressive enhancement and already have the markup for
                > >>>>>> the form, you can pick that DOM element remove it from the DOM tree at
                > >>>>>> its current location and insert it inside the 'whatever' div above.
                > >>>>>>
                > >>>>>> Two things to be aware of:
                > >>>>>>
                > >>>>>> The default action on clicking a TreeView node is toggling. That will
                > >>>>>> always happen when you click on the toggle icon no matter what, that's
                > >>>>>> what the icon is there for. It will also happen when clicking on the
                > >>>>>> content unless you tell it not to. To prevent that, listen to the
                > >>>>>> clickEvent, do whatever you need, if anything and return false.
                > >>>>>>
                > >>>>>> If you call any method that might produce a refresh of the node, any
                > >>>>>> event listeners attached to the form itself or any buttons or other
                > >>>>>> elements within will be lost. If you call tree.render more than once or
                > >>>>>> node.refresh your listener will turn deaf.
                > >>>>>>
                > >>>>>> Satyam
                > >>>>>>
                > >>>>>>
                > >>>>>> nkwok escribió:
                > >>>>>>
                > >>>>>>
                > >>>>>>
                > >>>>>>> Satyam,
                > >>>>>>>
                > >>>>>>> Thanks for your quick reply! I am not sure I understood what you mean by "use a simple div to hold its contents"? Since DataTable does not support vertical display, I want to have an input form to replace the datatable in the example. Where do I put the "div" in the treeview? Any tip will be appreciated to get me started. Thanks again!
                > >>>>>>>
                > >>>>>>>
                > >>>>>>>
                > >>>>>>> Regards,
                > >>>>>>> Norman
                > >>>>>>>
                > >>>>>>>
                > >>>>>>> --- In ydn-javascript@yahoogroups.com, Satyam <satyam@> wrote:
                > >>>>>>>
                > >>>>>>>
                > >>>>>>>
                > >>>>>>>
                > >>>>>>>> Some widgets float over the ground floor of the page so they don't take
                > >>>>>>>> any space in it since they float above. All of the Container family is
                > >>>>>>>> meant to produce such floating containers. Panel and dialog are two
                > >>>>>>>> widgets from the same family. They are meant to be dragged about, shown
                > >>>>>>>> and hidden, resized and all this would leave a whole in the page
                > >>>>>>>> underneath if they took any space there. The DataTable is embedded
                > >>>>>>>> within the base of the page so it takes space there. If you want a
                > >>>>>>>> generic container to take up space in the base page, use a simple div to
                > >>>>>>>> hold its contents.
                > >>>>>>>>
                > >>>>>>>> Satyam
                > >>>>>>>>
                > >>>>>>>> nkwok escribió:
                > >>>>>>>>
                > >>>>>>>>
                > >>>>>>>>
                > >>>>>>>>
                > >>>>>>>>> Hello,
                > >>>>>>>>>
                > >>>>>>>>> I found the excellent example "Tree View with DataTables as nodes) by Satyam. Is it possible to have other widget as node other than DataTable? I tried both "dialog" and "panel" widgets but they did not work correctly - meaning it rendered but overlapped with the next tree node. I was using the constructor like:
                > >>>>>>>>>
                > >>>>>>>>> new YAHOO.widget.Panel("panel", {width: "300px", constraintoviewport: false, visible: false});
                > >>>>>>>>>
                > >>>>>>>>> With DataTable, there is no overlap and the next tree node will expand accordingly. Is there some others parameters that I need for the Panel constructor in order for the treeview to render correctly?
                > >>>>>>>>>
                > >>>>>>>>>
                > >>>>>>>>> Thanks,
                > >>>>>>>>> Norman
                > >>>>>>>>>
                > >>>>>>>>>
                > >>>>>>>>>
                > >>>>>>>>>
                > >>>>>>>>> ------------------------------------
                > >>>>>>>>>
                > >>>>>>>>> Yahoo! Groups Links
                > >>>>>>>>>
                > >>>>>>>>>
                > >>>>>>>>>
                > >>>>>>>>> ------------------------------------------------------------------------
                > >>>>>>>>>
                > >>>>>>>>>
                > >>>>>>>>> No virus found in this incoming message.
                > >>>>>>>>> Checked by AVG - www.avg.com
                > >>>>>>>>> Version: 8.5.285 / Virus Database: 270.11.31/2029 - Release Date: 03/29/09 16:56:00
                > >>>>>>>>>
                > >>>>>>>>>
                > >>>>>>>>>
                > >>>>>>>>>
                > >>>>>>>>>
                > >>>>>>>>>
                > >>>>>>> ------------------------------------
                > >>>>>>>
                > >>>>>>> Yahoo! Groups Links
                > >>>>>>>
                > >>>>>>>
                > >>>>>>>
                > >>>>>>> ------------------------------------------------------------------------
                > >>>>>>>
                > >>>>>>>
                > >>>>>>> No virus found in this incoming message.
                > >>>>>>> Checked by AVG - www.avg.com
                > >>>>>>> Version: 8.5.285 / Virus Database: 270.11.31/2029 - Release Date: 03/29/09 16:56:00
                > >>>>>>>
                > >>>>>>>
                > >>>>>>>
                > >>>>>>>
                > >>>>>>>
                > >>>>> ------------------------------------
                > >>>>>
                > >>>>> Yahoo! Groups Links
                > >>>>>
                > >>>>>
                > >>>>>
                > >>>>> ------------------------------------------------------------------------
                > >>>>>
                > >>>>>
                > >>>>> No virus found in this incoming message.
                > >>>>> Checked by AVG - www.avg.com
                > >>>>> Version: 8.5.285 / Virus Database: 270.11.32/2030 - Release Date: 03/30/09 08:40:00
                > >>>>>
                > >>>>>
                > >>>>>
                > >>>>>
                > >>>
                > >>>
                > >>> ------------------------------------
                > >>>
                > >>> Yahoo! Groups Links
                > >>>
                > >>>
                > >>>
                > >>> ------------------------------------------------------------------------
                > >>>
                > >>>
                > >>> No virus found in this incoming message.
                > >>> Checked by AVG - www.avg.com
                > >>> Version: 8.5.285 / Virus Database: 270.11.32/2030 - Release Date: 03/30/09 08:40:00
                > >>>
                > >>>
                > >>>
                > >
                > >
                > >
                > >
                > > ------------------------------------
                > >
                > > Yahoo! Groups Links
                > >
                > >
                > >
                > > ------------------------------------------------------------------------
                > >
                > >
                > > No virus found in this incoming message.
                > > Checked by AVG - www.avg.com
                > > Version: 8.5.285 / Virus Database: 270.11.35/2034 - Release Date: 04/01/09 06:06:00
                > >
                > >
                >
              • nkwok
                Satyam, I uploaded the file at http://webpages.charter.net/tykwok/JMSTreeDataTable.htm Click on the expand + on the left to expand the node JMS Queue .
                Message 7 of 17 , Apr 1 10:25 PM
                • 0 Attachment
                  Satyam,

                  I uploaded the file at
                  http://webpages.charter.net/tykwok/JMSTreeDataTable.htm

                  Click on the expand '+' on the left to expand the node 'JMS Queue'. Then click on the green '+' on the right to add more nodes at 'JMS Queue' node. Afterward, click on the green '+' on the right won't add any more nodes since the node.data.key is gone. The code that I have at line 48 clear the data after using setHtml.

                  var newnHtml = node.getHtml();
                  node.setHtml(newnHtml);




                  Regards,
                  Norman

                  --- In ydn-javascript@yahoogroups.com, Satyam <satyam@...> wrote:
                  >
                  > Can you send me your code, or a relevant section of it? I would love to
                  > try it and see what fails.
                  >
                  > Thanks
                  >
                  > Satyam
                  >
                  >
                  > nkwok escribió:
                  > > Satyam,
                  > >
                  > > It did not work with setHtml method that you mention above. There are couple problems with this approach:
                  > >
                  > > 1. I used getHtml() to get the html string, then call setHtml() and the tree display 2 "-" icons like "- - label" and duplicate all the children. Strange!
                  > > 2. After setHtml() call, the data structure got wiped out. Calling the 'tree.getNodeByProperty('key", "my-key")' will return null the 2nd time.
                  > >
                  > > I also tried adding a <div id='alabel' >Label</div> and used getElementById('alabel') and changed by innerHTML. However, the tree render back the older data afterward.
                  > >
                  > > Is there any way to change the node label for HTMLNode?
                  > >
                  > >
                  > > Regards,
                  > > Norman
                  > >
                  > >
                  > > --- In ydn-javascript@yahoogroups.com, Satyam <satyam@> wrote:
                  > >
                  > >> In HTMLNode, you can use the setHTML method. It doesn't have a label
                  > >> property, nor a getLabelEl() method.
                  > >>
                  > >> In general, avoid using the textContent property. When you read it, it
                  > >> will return all the text nodes within the container element,
                  > >> disregarding all HTML markup. If your node had been a TextNode instead
                  > >> of an HTMLNode, it would ignore the <span> enclosing the text and return
                  > >> the text within. That is fine if that's what you want, but the problem
                  > >> is that when you assign anything to it, it will wipe out that markup, it
                  > >> will not replace strictly what it showed you but it will replace all of
                  > >> it, what it showed you and what it didn't. The innerHTML property is
                  > >> more clear about it, it shows you all and replaces all, nothing hidden
                  > >> there.
                  > >>
                  > >> Satyam
                  > >>
                  > >>
                  > >> nkwok escribió:
                  > >>
                  > >>> Satyam,
                  > >>>
                  > >>> Sorry for not making myself clear! Yeah, that is what I want to do with the label of HTMLNode. Given that TextNode has a label property and HTMLNode doesn't, how do I change the label of HTMLNode and refresh to see the change? Thanks again!
                  > >>>
                  > >>>
                  > >>> Regards,
                  > >>> Norman
                  > >>>
                  > >>>
                  > >>> --- In ydn-javascript@yahoogroups.com, Satyam <satyam@> wrote:
                  > >>>
                  > >>>
                  > >>>> Not sure I understand you. Some random thoughts that might be related:
                  > >>>> TextNodes have a label property, HTMLNodes don't. Changing the label
                  > >>>> property on a TextNode does not automatically refresh the UI, not until
                  > >>>> the node is refreshed. You either call the refresh method or update the
                  > >>>> DOM yourself.
                  > >>>>
                  > >>>> If it is a TextNode, instead of:
                  > >>>>
                  > >>>> node.getContentEl().textContent = 'new-value'
                  > >>>>
                  > >>>> do:
                  > >>>>
                  > >>>> node.getLabelEl().innerHTML = 'new-value'
                  > >>>>
                  > >>>> The label is contained in a <span> and if you set the content to a
                  > >>>> simple text, the <span> will be gone and the getLabelEl won't work any
                  > >>>> longer since it looks for this <span>
                  > >>>>
                  > >>>> Satyam
                  > >>>>
                  > >>>>
                  > >>>> nkwok escribió:
                  > >>>>
                  > >>>>
                  > >>>>> Satyam,
                  > >>>>>
                  > >>>>> Thanks for the tips and I got the input form render accordingly! Many thanks! However, I got stuck trying to change the label of the node - since one of the input value in the form will be the name of the node. I tried using node.getContentEl().textContent = 'new-value' and the label got reset afterward. Any suggestion!
                  > >>>>>
                  > >>>>>
                  > >>>>> Regards,
                  > >>>>> Norman
                  > >>>>>
                  > >>>>>
                  > >>>>> --- In ydn-javascript@yahoogroups.com, Satyam <satyam@> wrote:
                  > >>>>>
                  > >>>>>
                  > >>>>>
                  > >>>>>> You can use HTMLNodes. They take a string containing whatever HTML you
                  > >>>>>> wish. Your best option might be to load the HTMLNode with '<div
                  > >>>>>> id="whatever"></div>' and then use YAHOO.util.Dom.get('whatever'); to
                  > >>>>>> find the div and fill it up. You can also set all the div and the
                  > >>>>>> complete form as an HTML string in just one go. Whatever you put in the
                  > >>>>>> html property of an HTMLNode will be inserted into the innerHTML
                  > >>>>>> property of the container for the node so either way will do. If all
                  > >>>>>> you want in the node is contained within the form element, you won't
                  > >>>>>> need the div. If the contents will be made of several elements, the
                  > >>>>>> form plus something other siblings, it is better to wrap them all in a
                  > >>>>>> single element, thus the div, just for safety.
                  > >>>>>>
                  > >>>>>> If you are using progressive enhancement and already have the markup for
                  > >>>>>> the form, you can pick that DOM element remove it from the DOM tree at
                  > >>>>>> its current location and insert it inside the 'whatever' div above.
                  > >>>>>>
                  > >>>>>> Two things to be aware of:
                  > >>>>>>
                  > >>>>>> The default action on clicking a TreeView node is toggling. That will
                  > >>>>>> always happen when you click on the toggle icon no matter what, that's
                  > >>>>>> what the icon is there for. It will also happen when clicking on the
                  > >>>>>> content unless you tell it not to. To prevent that, listen to the
                  > >>>>>> clickEvent, do whatever you need, if anything and return false.
                  > >>>>>>
                  > >>>>>> If you call any method that might produce a refresh of the node, any
                  > >>>>>> event listeners attached to the form itself or any buttons or other
                  > >>>>>> elements within will be lost. If you call tree.render more than once or
                  > >>>>>> node.refresh your listener will turn deaf.
                  > >>>>>>
                  > >>>>>> Satyam
                  > >>>>>>
                  > >>>>>>
                  > >>>>>> nkwok escribió:
                  > >>>>>>
                  > >>>>>>
                  > >>>>>>
                  > >>>>>>> Satyam,
                  > >>>>>>>
                  > >>>>>>> Thanks for your quick reply! I am not sure I understood what you mean by "use a simple div to hold its contents"? Since DataTable does not support vertical display, I want to have an input form to replace the datatable in the example. Where do I put the "div" in the treeview? Any tip will be appreciated to get me started. Thanks again!
                  > >>>>>>>
                  > >>>>>>>
                  > >>>>>>>
                  > >>>>>>> Regards,
                  > >>>>>>> Norman
                  > >>>>>>>
                  > >>>>>>>
                  > >>>>>>> --- In ydn-javascript@yahoogroups.com, Satyam <satyam@> wrote:
                  > >>>>>>>
                  > >>>>>>>
                  > >>>>>>>
                  > >>>>>>>
                  > >>>>>>>> Some widgets float over the ground floor of the page so they don't take
                  > >>>>>>>> any space in it since they float above. All of the Container family is
                  > >>>>>>>> meant to produce such floating containers. Panel and dialog are two
                  > >>>>>>>> widgets from the same family. They are meant to be dragged about, shown
                  > >>>>>>>> and hidden, resized and all this would leave a whole in the page
                  > >>>>>>>> underneath if they took any space there. The DataTable is embedded
                  > >>>>>>>> within the base of the page so it takes space there. If you want a
                  > >>>>>>>> generic container to take up space in the base page, use a simple div to
                  > >>>>>>>> hold its contents.
                  > >>>>>>>>
                  > >>>>>>>> Satyam
                  > >>>>>>>>
                  > >>>>>>>> nkwok escribió:
                  > >>>>>>>>
                  > >>>>>>>>
                  > >>>>>>>>
                  > >>>>>>>>
                  > >>>>>>>>> Hello,
                  > >>>>>>>>>
                  > >>>>>>>>> I found the excellent example "Tree View with DataTables as nodes) by Satyam. Is it possible to have other widget as node other than DataTable? I tried both "dialog" and "panel" widgets but they did not work correctly - meaning it rendered but overlapped with the next tree node. I was using the constructor like:
                  > >>>>>>>>>
                  > >>>>>>>>> new YAHOO.widget.Panel("panel", {width: "300px", constraintoviewport: false, visible: false});
                  > >>>>>>>>>
                  > >>>>>>>>> With DataTable, there is no overlap and the next tree node will expand accordingly. Is there some others parameters that I need for the Panel constructor in order for the treeview to render correctly?
                  > >>>>>>>>>
                  > >>>>>>>>>
                  > >>>>>>>>> Thanks,
                  > >>>>>>>>> Norman
                  > >>>>>>>>>
                  > >>>>>>>>>
                  > >>>>>>>>>
                  > >>>>>>>>>
                  > >>>>>>>>> ------------------------------------
                  > >>>>>>>>>
                  > >>>>>>>>> Yahoo! Groups Links
                  > >>>>>>>>>
                  > >>>>>>>>>
                  > >>>>>>>>>
                  > >>>>>>>>> ------------------------------------------------------------------------
                  > >>>>>>>>>
                  > >>>>>>>>>
                  > >>>>>>>>> No virus found in this incoming message.
                  > >>>>>>>>> Checked by AVG - www.avg.com
                  > >>>>>>>>> Version: 8.5.285 / Virus Database: 270.11.31/2029 - Release Date: 03/29/09 16:56:00
                  > >>>>>>>>>
                  > >>>>>>>>>
                  > >>>>>>>>>
                  > >>>>>>>>>
                  > >>>>>>>>>
                  > >>>>>>>>>
                  > >>>>>>> ------------------------------------
                  > >>>>>>>
                  > >>>>>>> Yahoo! Groups Links
                  > >>>>>>>
                  > >>>>>>>
                  > >>>>>>>
                  > >>>>>>> ------------------------------------------------------------------------
                  > >>>>>>>
                  > >>>>>>>
                  > >>>>>>> No virus found in this incoming message.
                  > >>>>>>> Checked by AVG - www.avg.com
                  > >>>>>>> Version: 8.5.285 / Virus Database: 270.11.31/2029 - Release Date: 03/29/09 16:56:00
                  > >>>>>>>
                  > >>>>>>>
                  > >>>>>>>
                  > >>>>>>>
                  > >>>>>>>
                  > >>>>> ------------------------------------
                  > >>>>>
                  > >>>>> Yahoo! Groups Links
                  > >>>>>
                  > >>>>>
                  > >>>>>
                  > >>>>> ------------------------------------------------------------------------
                  > >>>>>
                  > >>>>>
                  > >>>>> No virus found in this incoming message.
                  > >>>>> Checked by AVG - www.avg.com
                  > >>>>> Version: 8.5.285 / Virus Database: 270.11.32/2030 - Release Date: 03/30/09 08:40:00
                  > >>>>>
                  > >>>>>
                  > >>>>>
                  > >>>>>
                  > >>>
                  > >>>
                  > >>> ------------------------------------
                  > >>>
                  > >>> Yahoo! Groups Links
                  > >>>
                  > >>>
                  > >>>
                  > >>> ------------------------------------------------------------------------
                  > >>>
                  > >>>
                  > >>> No virus found in this incoming message.
                  > >>> Checked by AVG - www.avg.com
                  > >>> Version: 8.5.285 / Virus Database: 270.11.32/2030 - Release Date: 03/30/09 08:40:00
                  > >>>
                  > >>>
                  > >>>
                  > >
                  > >
                  > >
                  > >
                  > > ------------------------------------
                  > >
                  > > Yahoo! Groups Links
                  > >
                  > >
                  > >
                  > > ------------------------------------------------------------------------
                  > >
                  > >
                  > > No virus found in this incoming message.
                  > > Checked by AVG - www.avg.com
                  > > Version: 8.5.285 / Virus Database: 270.11.35/2034 - Release Date: 04/01/09 06:06:00
                  > >
                  > >
                  >
                • Satyam
                  Looks nice! I like clean and simple interfaces What I notice is that after first adding a node to jsm_queue you get a copy of aammx001_queue_01 (there are now
                  Message 8 of 17 , Apr 2 3:22 AM
                  • 0 Attachment
                    Looks nice! I like clean and simple interfaces

                    What I notice is that after first adding a node to jsm_queue you get a
                    copy of aammx001_queue_01 (there are now two on the page) plus a
                    aammx001_Queue_4 and both of these are one level up from the original
                    aammx001_queue_01. It is not that node.data.key is gone but that the
                    previous getNodeByProperty fails and returns null for node, so my guess
                    is that you inserted the new nodes at the wrong nesting level of the
                    tree and then, due to that offset, you end up looking for things in the
                    wrong level.

                    However, the first thing I tried is, see if it checks with the
                    HTMLValidator and with the JSLint parser. It does not. Actually, it
                    has so many errors that JSLint quits. Most of them can be solved by a
                    simple search and replace. None of them are terrible, probably none of
                    them fatal, but the problem is that both tools are good at finding hard
                    to see errors and if you flood them with silly ones, the really
                    important ones go undetected. You have both variables declared but
                    unused and variables declared twice in the same scope. Both might
                    indicate the code is flowing through unexpected places. The parseInt
                    missing radix argument error might cause an very silly error:
                    parseInt('08') returns 0, not 8, because the leading 0 makes it assume
                    it is octal and 8 is not a valid character in octal, so it gets
                    ignored. parseInt('08',10) returns 8, which is what you probably
                    expected. Check your code with JSLint every so often and specially when
                    something goes wrong and certainly before deployment. It is not a bad
                    idea to run it through the YUI Compressor in verbose mode, it can hint
                    you at some questionable constructs.

                    Also, note you are loading yuiloader 2.6 and everything else 2.7.
                    Actually, whatever you load with the loader thereafter will be 2.6 since
                    each version of the loader loads components of its own version. It is
                    not a good idea to mix and hope they match.

                    For long string concatenations, piling segments into an array and then
                    doing a single join is usually faster than concatenating with +=. Your
                    strings are close to the breakeven point though so I'm not sure what
                    would be faster in your case.

                    var formElement = [
                    "<table border='0'>",
                    "<tr><td>   <\/td> <td>Name:<\/td> <td> <input
                    type='text' id='name",
                    divId,
                    "'/><\/td><\/tr>",
                    "<tr><td>   <\/td> <td>Description:<\/td> <td> <input
                    type='text' id='address" + divId + "'/><\/td><\/tr>",
                    "<tr><td>   <\/td> <td>Max Bytes:<\/td> <td> <input
                    type='text' id='maxbytes" + divId + "'/><\/td><\/tr>",
                    "<tr><td>   <\/td> <td>Global:<\/td> <td> <input
                    type='text' id='global" + divId + "'/><\/td><\/tr>",
                    "<\/table>"].join();

                    Satyam


                    nkwok escribió:
                    > Satyam,
                    >
                    > I uploaded the file at
                    > http://webpages.charter.net/tykwok/JMSTreeDataTable.htm
                    >
                    > Click on the expand '+' on the left to expand the node 'JMS Queue'. Then click on the green '+' on the right to add more nodes at 'JMS Queue' node. Afterward, click on the green '+' on the right won't add any more nodes since the node.data.key is gone. The code that I have at line 48 clear the data after using setHtml.
                    >
                    > var newnHtml = node.getHtml();
                    > node.setHtml(newnHtml);
                    >
                    >
                    >
                    >
                    > Regards,
                    > Norman
                    >
                    > --- In ydn-javascript@yahoogroups.com, Satyam <satyam@...> wrote:
                    >
                    >> Can you send me your code, or a relevant section of it? I would love to
                    >> try it and see what fails.
                    >>
                    >> Thanks
                    >>
                    >> Satyam
                    >>
                    >>
                    >> nkwok escribió:
                    >>
                    >>> Satyam,
                    >>>
                    >>> It did not work with setHtml method that you mention above. There are couple problems with this approach:
                    >>>
                    >>> 1. I used getHtml() to get the html string, then call setHtml() and the tree display 2 "-" icons like "- - label" and duplicate all the children. Strange!
                    >>> 2. After setHtml() call, the data structure got wiped out. Calling the 'tree.getNodeByProperty('key", "my-key")' will return null the 2nd time.
                    >>>
                    >>> I also tried adding a <div id='alabel' >Label</div> and used getElementById('alabel') and changed by innerHTML. However, the tree render back the older data afterward.
                    >>>
                    >>> Is there any way to change the node label for HTMLNode?
                    >>>
                    >>>
                    >>> Regards,
                    >>> Norman
                    >>>
                    >>>
                    >>> --- In ydn-javascript@yahoogroups.com, Satyam <satyam@> wrote:
                    >>>
                    >>>
                    >>>> In HTMLNode, you can use the setHTML method. It doesn't have a label
                    >>>> property, nor a getLabelEl() method.
                    >>>>
                    >>>> In general, avoid using the textContent property. When you read it, it
                    >>>> will return all the text nodes within the container element,
                    >>>> disregarding all HTML markup. If your node had been a TextNode instead
                    >>>> of an HTMLNode, it would ignore the <span> enclosing the text and return
                    >>>> the text within. That is fine if that's what you want, but the problem
                    >>>> is that when you assign anything to it, it will wipe out that markup, it
                    >>>> will not replace strictly what it showed you but it will replace all of
                    >>>> it, what it showed you and what it didn't. The innerHTML property is
                    >>>> more clear about it, it shows you all and replaces all, nothing hidden
                    >>>> there.
                    >>>>
                    >>>> Satyam
                    >>>>
                    >>>>
                    >>>> nkwok escribió:
                    >>>>
                    >>>>
                    >>>>> Satyam,
                    >>>>>
                    >>>>> Sorry for not making myself clear! Yeah, that is what I want to do with the label of HTMLNode. Given that TextNode has a label property and HTMLNode doesn't, how do I change the label of HTMLNode and refresh to see the change? Thanks again!
                    >>>>>
                    >>>>>
                    >>>>> Regards,
                    >>>>> Norman
                    >>>>>
                    >>>>>
                    >>>>> --- In ydn-javascript@yahoogroups.com, Satyam <satyam@> wrote:
                    >>>>>
                    >>>>>
                    >>>>>
                    >>>>>> Not sure I understand you. Some random thoughts that might be related:
                    >>>>>> TextNodes have a label property, HTMLNodes don't. Changing the label
                    >>>>>> property on a TextNode does not automatically refresh the UI, not until
                    >>>>>> the node is refreshed. You either call the refresh method or update the
                    >>>>>> DOM yourself.
                    >>>>>>
                    >>>>>> If it is a TextNode, instead of:
                    >>>>>>
                    >>>>>> node.getContentEl().textContent = 'new-value'
                    >>>>>>
                    >>>>>> do:
                    >>>>>>
                    >>>>>> node.getLabelEl().innerHTML = 'new-value'
                    >>>>>>
                    >>>>>> The label is contained in a <span> and if you set the content to a
                    >>>>>> simple text, the <span> will be gone and the getLabelEl won't work any
                    >>>>>> longer since it looks for this <span>
                    >>>>>>
                    >>>>>> Satyam
                    >>>>>>
                    >>>>>>
                    >>>>>> nkwok escribió:
                    >>>>>>
                    >>>>>>
                    >>>>>>
                    >>>>>>> Satyam,
                    >>>>>>>
                    >>>>>>> Thanks for the tips and I got the input form render accordingly! Many thanks! However, I got stuck trying to change the label of the node - since one of the input value in the form will be the name of the node. I tried using node.getContentEl().textContent = 'new-value' and the label got reset afterward. Any suggestion!
                    >>>>>>>
                    >>>>>>>
                    >>>>>>> Regards,
                    >>>>>>> Norman
                    >>>>>>>
                    >>>>>>>
                    >>>>>>> --- In ydn-javascript@yahoogroups.com, Satyam <satyam@> wrote:
                    >>>>>>>
                    >>>>>>>
                    >>>>>>>
                    >>>>>>>
                    >>>>>>>> You can use HTMLNodes. They take a string containing whatever HTML you
                    >>>>>>>> wish. Your best option might be to load the HTMLNode with '<div
                    >>>>>>>> id="whatever"></div>' and then use YAHOO.util.Dom.get('whatever'); to
                    >>>>>>>> find the div and fill it up. You can also set all the div and the
                    >>>>>>>> complete form as an HTML string in just one go. Whatever you put in the
                    >>>>>>>> html property of an HTMLNode will be inserted into the innerHTML
                    >>>>>>>> property of the container for the node so either way will do. If all
                    >>>>>>>> you want in the node is contained within the form element, you won't
                    >>>>>>>> need the div. If the contents will be made of several elements, the
                    >>>>>>>> form plus something other siblings, it is better to wrap them all in a
                    >>>>>>>> single element, thus the div, just for safety.
                    >>>>>>>>
                    >>>>>>>> If you are using progressive enhancement and already have the markup for
                    >>>>>>>> the form, you can pick that DOM element remove it from the DOM tree at
                    >>>>>>>> its current location and insert it inside the 'whatever' div above.
                    >>>>>>>>
                    >>>>>>>> Two things to be aware of:
                    >>>>>>>>
                    >>>>>>>> The default action on clicking a TreeView node is toggling. That will
                    >>>>>>>> always happen when you click on the toggle icon no matter what, that's
                    >>>>>>>> what the icon is there for. It will also happen when clicking on the
                    >>>>>>>> content unless you tell it not to. To prevent that, listen to the
                    >>>>>>>> clickEvent, do whatever you need, if anything and return false.
                    >>>>>>>>
                    >>>>>>>> If you call any method that might produce a refresh of the node, any
                    >>>>>>>> event listeners attached to the form itself or any buttons or other
                    >>>>>>>> elements within will be lost. If you call tree.render more than once or
                    >>>>>>>> node.refresh your listener will turn deaf.
                    >>>>>>>>
                    >>>>>>>> Satyam
                    >>>>>>>>
                    >>>>>>>>
                    >>>>>>>> nkwok escribió:
                    >>>>>>>>
                    >>>>>>>>
                    >>>>>>>>
                    >>>>>>>>
                    >>>>>>>>> Satyam,
                    >>>>>>>>>
                    >>>>>>>>> Thanks for your quick reply! I am not sure I understood what you mean by "use a simple div to hold its contents"? Since DataTable does not support vertical display, I want to have an input form to replace the datatable in the example. Where do I put the "div" in the treeview? Any tip will be appreciated to get me started. Thanks again!
                    >>>>>>>>>
                    >>>>>>>>>
                    >>>>>>>>>
                    >>>>>>>>> Regards,
                    >>>>>>>>> Norman
                    >>>>>>>>>
                    >>>>>>>>>
                    >>>>>>>>> --- In ydn-javascript@yahoogroups.com, Satyam <satyam@> wrote:
                    >>>>>>>>>
                    >>>>>>>>>
                    >>>>>>>>>
                    >>>>>>>>>
                    >>>>>>>>>
                    >>>>>>>>>> Some widgets float over the ground floor of the page so they don't take
                    >>>>>>>>>> any space in it since they float above. All of the Container family is
                    >>>>>>>>>> meant to produce such floating containers. Panel and dialog are two
                    >>>>>>>>>> widgets from the same family. They are meant to be dragged about, shown
                    >>>>>>>>>> and hidden, resized and all this would leave a whole in the page
                    >>>>>>>>>> underneath if they took any space there. The DataTable is embedded
                    >>>>>>>>>> within the base of the page so it takes space there. If you want a
                    >>>>>>>>>> generic container to take up space in the base page, use a simple div to
                    >>>>>>>>>> hold its contents.
                    >>>>>>>>>>
                    >>>>>>>>>> Satyam
                    >>>>>>>>>>
                    >>>>>>>>>> nkwok escribió:
                    >>>>>>>>>>
                    >>>>>>>>>>
                    >>>>>>>>>>
                    >>>>>>>>>>
                    >>>>>>>>>>
                    >>>>>>>>>>> Hello,
                    >>>>>>>>>>>
                    >>>>>>>>>>> I found the excellent example "Tree View with DataTables as nodes) by Satyam. Is it possible to have other widget as node other than DataTable? I tried both "dialog" and "panel" widgets but they did not work correctly - meaning it rendered but overlapped with the next tree node. I was using the constructor like:
                    >>>>>>>>>>>
                    >>>>>>>>>>> new YAHOO.widget.Panel("panel", {width: "300px", constraintoviewport: false, visible: false});
                    >>>>>>>>>>>
                    >>>>>>>>>>> With DataTable, there is no overlap and the next tree node will expand accordingly. Is there some others parameters that I need for the Panel constructor in order for the treeview to render correctly?
                    >>>>>>>>>>>
                    >>>>>>>>>>>
                    >>>>>>>>>>> Thanks,
                    >>>>>>>>>>> Norman
                    >>>>>>>>>>>
                    >>>>>>>>>>>
                    >>>>>>>>>>>
                    >>>>>>>>>>>
                    >>>>>>>>>>> ------------------------------------
                    >>>>>>>>>>>
                    >>>>>>>>>>> Yahoo! Groups Links
                    >>>>>>>>>>>
                    >>>>>>>>>>>
                    >>>>>>>>>>>
                    >>>>>>>>>>> ------------------------------------------------------------------------
                    >>>>>>>>>>>
                    >>>>>>>>>>>
                    >>>>>>>>>>> No virus found in this incoming message.
                    >>>>>>>>>>> Checked by AVG - www.avg.com
                    >>>>>>>>>>> Version: 8.5.285 / Virus Database: 270.11.31/2029 - Release Date: 03/29/09 16:56:00
                    >>>>>>>>>>>
                    >>>>>>>>>>>
                    >>>>>>>>>>>
                    >>>>>>>>>>>
                    >>>>>>>>>>>
                    >>>>>>>>>>>
                    >>>>>>>>>>>
                    >>>>>>>>> ------------------------------------
                    >>>>>>>>>
                    >>>>>>>>> Yahoo! Groups Links
                    >>>>>>>>>
                    >>>>>>>>>
                    >>>>>>>>>
                    >>>>>>>>> ------------------------------------------------------------------------
                    >>>>>>>>>
                    >>>>>>>>>
                    >>>>>>>>> No virus found in this incoming message.
                    >>>>>>>>> Checked by AVG - www.avg.com
                    >>>>>>>>> Version: 8.5.285 / Virus Database: 270.11.31/2029 - Release Date: 03/29/09 16:56:00
                    >>>>>>>>>
                    >>>>>>>>>
                    >>>>>>>>>
                    >>>>>>>>>
                    >>>>>>>>>
                    >>>>>>>>>
                    >>>>>>> ------------------------------------
                    >>>>>>>
                    >>>>>>> Yahoo! Groups Links
                    >>>>>>>
                    >>>>>>>
                    >>>>>>>
                    >>>>>>> ------------------------------------------------------------------------
                    >>>>>>>
                    >>>>>>>
                    >>>>>>> No virus found in this incoming message.
                    >>>>>>> Checked by AVG - www.avg.com
                    >>>>>>> Version: 8.5.285 / Virus Database: 270.11.32/2030 - Release Date: 03/30/09 08:40:00
                    >>>>>>>
                    >>>>>>>
                    >>>>>>>
                    >>>>>>>
                    >>>>>>>
                    >>>>> ------------------------------------
                    >>>>>
                    >>>>> Yahoo! Groups Links
                    >>>>>
                    >>>>>
                    >>>>>
                    >>>>> ------------------------------------------------------------------------
                    >>>>>
                    >>>>>
                    >>>>> No virus found in this incoming message.
                    >>>>> Checked by AVG - www.avg.com
                    >>>>> Version: 8.5.285 / Virus Database: 270.11.32/2030 - Release Date: 03/30/09 08:40:00
                    >>>>>
                    >>>>>
                    >>>>>
                    >>>>>
                    >>>
                    >>>
                    >>> ------------------------------------
                    >>>
                    >>> Yahoo! Groups Links
                    >>>
                    >>>
                    >>>
                    >>> ------------------------------------------------------------------------
                    >>>
                    >>>
                    >>> No virus found in this incoming message.
                    >>> Checked by AVG - www.avg.com
                    >>> Version: 8.5.285 / Virus Database: 270.11.35/2034 - Release Date: 04/01/09 06:06:00
                    >>>
                    >>>
                    >>>
                    >
                    >
                    >
                    >
                    > ------------------------------------
                    >
                    > Yahoo! Groups Links
                    >
                    >
                    >
                    > ------------------------------------------------------------------------
                    >
                    >
                    > No virus found in this incoming message.
                    > Checked by AVG - www.avg.com
                    > Version: 8.5.285 / Virus Database: 270.11.35/2034 - Release Date: 04/01/09 06:06:00
                    >
                    >
                  • nkwok
                    Satyam, Thanks for the JSLint tips! I went through JSLint and clean up as much as I can. I also upload the updated version at
                    Message 9 of 17 , Apr 2 11:50 AM
                    • 0 Attachment
                      Satyam,

                      Thanks for the JSLint tips! I went through JSLint and clean up as much as I can. I also upload the updated version at http://webpages.charter.net/tykwok/JMSTreeDataTable.htm

                      I added couple alert window to point out the node.data is gone after calling setHtml(). The block of code is between line #116 - 142. I stepped through the code using FireBug and found the node.data was changed after setHtml(). If you run the updated version again, you will see the first alert window will show the node.data is an object and will display the key:value pair. Right after the call of setHtml(), the 2nd alert window will show the node.data is now a string instead. That is why clicking the right-hand '+' icon will not work again since the data.key is gone.

                      What I am trying to do is find a way to update the label of the tree node at run time. I have tried different methods without luck. You mentioned using setHtml() and thought using getHtml() to get the node Html string, replace with the new label and use setHtml() to update the label accordingly - but it is not working as planned.

                      Like I mentioned in my last email, I tried adding a <div id='alabel> node-label </div>, used getElementById('alabel') and changed the node label using innerHTML. It did update the node label when single-step, but the tree render put the old data back afterward.

                      How do I change the node label if I am using widget HTMLNode, any suggestion? Again, thanks for your times and help!


                      Regards,
                      Norman

                      --- In ydn-javascript@yahoogroups.com, Satyam <satyam@...> wrote:
                      >
                      > Looks nice! I like clean and simple interfaces
                      >
                      > What I notice is that after first adding a node to jsm_queue you get a
                      > copy of aammx001_queue_01 (there are now two on the page) plus a
                      > aammx001_Queue_4 and both of these are one level up from the original
                      > aammx001_queue_01. It is not that node.data.key is gone but that the
                      > previous getNodeByProperty fails and returns null for node, so my guess
                      > is that you inserted the new nodes at the wrong nesting level of the
                      > tree and then, due to that offset, you end up looking for things in the
                      > wrong level.
                      >
                      > However, the first thing I tried is, see if it checks with the
                      > HTMLValidator and with the JSLint parser. It does not. Actually, it
                      > has so many errors that JSLint quits. Most of them can be solved by a
                      > simple search and replace. None of them are terrible, probably none of
                      > them fatal, but the problem is that both tools are good at finding hard
                      > to see errors and if you flood them with silly ones, the really
                      > important ones go undetected. You have both variables declared but
                      > unused and variables declared twice in the same scope. Both might
                      > indicate the code is flowing through unexpected places. The parseInt
                      > missing radix argument error might cause an very silly error:
                      > parseInt('08') returns 0, not 8, because the leading 0 makes it assume
                      > it is octal and 8 is not a valid character in octal, so it gets
                      > ignored. parseInt('08',10) returns 8, which is what you probably
                      > expected. Check your code with JSLint every so often and specially when
                      > something goes wrong and certainly before deployment. It is not a bad
                      > idea to run it through the YUI Compressor in verbose mode, it can hint
                      > you at some questionable constructs.
                      >
                      > Also, note you are loading yuiloader 2.6 and everything else 2.7.
                      > Actually, whatever you load with the loader thereafter will be 2.6 since
                      > each version of the loader loads components of its own version. It is
                      > not a good idea to mix and hope they match.
                      >
                      > For long string concatenations, piling segments into an array and then
                      > doing a single join is usually faster than concatenating with +=. Your
                      > strings are close to the breakeven point though so I'm not sure what
                      > would be faster in your case.
                      >
                      > var formElement = [
                      > "<table border='0'>",
                      > "<tr><td>   <\/td> <td>Name:<\/td> <td> <input
                      > type='text' id='name",
                      > divId,
                      > "'/><\/td><\/tr>",
                      > "<tr><td>   <\/td> <td>Description:<\/td> <td> <input
                      > type='text' id='address" + divId + "'/><\/td><\/tr>",
                      > "<tr><td>   <\/td> <td>Max Bytes:<\/td> <td> <input
                      > type='text' id='maxbytes" + divId + "'/><\/td><\/tr>",
                      > "<tr><td>   <\/td> <td>Global:<\/td> <td> <input
                      > type='text' id='global" + divId + "'/><\/td><\/tr>",
                      > "<\/table>"].join();
                      >
                      > Satyam
                      >
                      >
                      > nkwok escribió:
                      > > Satyam,
                      > >
                      > > I uploaded the file at
                      > > http://webpages.charter.net/tykwok/JMSTreeDataTable.htm
                      > >
                      > > Click on the expand '+' on the left to expand the node 'JMS Queue'. Then click on the green '+' on the right to add more nodes at 'JMS Queue' node. Afterward, click on the green '+' on the right won't add any more nodes since the node.data.key is gone. The code that I have at line 48 clear the data after using setHtml.
                      > >
                      > > var newnHtml = node.getHtml();
                      > > node.setHtml(newnHtml);
                      > >
                      > >
                      > >
                      > >
                      > > Regards,
                      > > Norman
                      > >
                      > > --- In ydn-javascript@yahoogroups.com, Satyam <satyam@> wrote:
                      > >
                      > >> Can you send me your code, or a relevant section of it? I would love to
                      > >> try it and see what fails.
                      > >>
                      > >> Thanks
                      > >>
                      > >> Satyam
                      > >>
                      > >>
                      > >> nkwok escribió:
                      > >>
                      > >>> Satyam,
                      > >>>
                      > >>> It did not work with setHtml method that you mention above. There are couple problems with this approach:
                      > >>>
                      > >>> 1. I used getHtml() to get the html string, then call setHtml() and the tree display 2 "-" icons like "- - label" and duplicate all the children. Strange!
                      > >>> 2. After setHtml() call, the data structure got wiped out. Calling the 'tree.getNodeByProperty('key", "my-key")' will return null the 2nd time.
                      > >>>
                      > >>> I also tried adding a <div id='alabel' >Label</div> and used getElementById('alabel') and changed by innerHTML. However, the tree render back the older data afterward.
                      > >>>
                      > >>> Is there any way to change the node label for HTMLNode?
                      > >>>
                      > >>>
                      > >>> Regards,
                      > >>> Norman
                      > >>>
                      > >>>
                      > >>> --- In ydn-javascript@yahoogroups.com, Satyam <satyam@> wrote:
                      > >>>
                      > >>>
                      > >>>> In HTMLNode, you can use the setHTML method. It doesn't have a label
                      > >>>> property, nor a getLabelEl() method.
                      > >>>>
                      > >>>> In general, avoid using the textContent property. When you read it, it
                      > >>>> will return all the text nodes within the container element,
                      > >>>> disregarding all HTML markup. If your node had been a TextNode instead
                      > >>>> of an HTMLNode, it would ignore the <span> enclosing the text and return
                      > >>>> the text within. That is fine if that's what you want, but the problem
                      > >>>> is that when you assign anything to it, it will wipe out that markup, it
                      > >>>> will not replace strictly what it showed you but it will replace all of
                      > >>>> it, what it showed you and what it didn't. The innerHTML property is
                      > >>>> more clear about it, it shows you all and replaces all, nothing hidden
                      > >>>> there.
                      > >>>>
                      > >>>> Satyam
                      > >>>>
                      > >>>>
                      > >>>> nkwok escribió:
                      > >>>>
                      > >>>>
                      > >>>>> Satyam,
                      > >>>>>
                      > >>>>> Sorry for not making myself clear! Yeah, that is what I want to do with the label of HTMLNode. Given that TextNode has a label property and HTMLNode doesn't, how do I change the label of HTMLNode and refresh to see the change? Thanks again!
                      > >>>>>
                      > >>>>>
                      > >>>>> Regards,
                      > >>>>> Norman
                      > >>>>>
                      > >>>>>
                      > >>>>> --- In ydn-javascript@yahoogroups.com, Satyam <satyam@> wrote:
                      > >>>>>
                      > >>>>>
                      > >>>>>
                      > >>>>>> Not sure I understand you. Some random thoughts that might be related:
                      > >>>>>> TextNodes have a label property, HTMLNodes don't. Changing the label
                      > >>>>>> property on a TextNode does not automatically refresh the UI, not until
                      > >>>>>> the node is refreshed. You either call the refresh method or update the
                      > >>>>>> DOM yourself.
                      > >>>>>>
                      > >>>>>> If it is a TextNode, instead of:
                      > >>>>>>
                      > >>>>>> node.getContentEl().textContent = 'new-value'
                      > >>>>>>
                      > >>>>>> do:
                      > >>>>>>
                      > >>>>>> node.getLabelEl().innerHTML = 'new-value'
                      > >>>>>>
                      > >>>>>> The label is contained in a <span> and if you set the content to a
                      > >>>>>> simple text, the <span> will be gone and the getLabelEl won't work any
                      > >>>>>> longer since it looks for this <span>
                      > >>>>>>
                      > >>>>>> Satyam
                      > >>>>>>
                      > >>>>>>
                      > >>>>>> nkwok escribió:
                      > >>>>>>
                      > >>>>>>
                      > >>>>>>
                      > >>>>>>> Satyam,
                      > >>>>>>>
                      > >>>>>>> Thanks for the tips and I got the input form render accordingly! Many thanks! However, I got stuck trying to change the label of the node - since one of the input value in the form will be the name of the node. I tried using node.getContentEl().textContent = 'new-value' and the label got reset afterward. Any suggestion!
                      > >>>>>>>
                      > >>>>>>>
                      > >>>>>>> Regards,
                      > >>>>>>> Norman
                      > >>>>>>>
                      > >>>>>>>
                      > >>>>>>> --- In ydn-javascript@yahoogroups.com, Satyam <satyam@> wrote:
                      > >>>>>>>
                      > >>>>>>>
                      > >>>>>>>
                      > >>>>>>>
                      > >>>>>>>> You can use HTMLNodes. They take a string containing whatever HTML you
                      > >>>>>>>> wish. Your best option might be to load the HTMLNode with '<div
                      > >>>>>>>> id="whatever"></div>' and then use YAHOO.util.Dom.get('whatever'); to
                      > >>>>>>>> find the div and fill it up. You can also set all the div and the
                      > >>>>>>>> complete form as an HTML string in just one go. Whatever you put in the
                      > >>>>>>>> html property of an HTMLNode will be inserted into the innerHTML
                      > >>>>>>>> property of the container for the node so either way will do. If all
                      > >>>>>>>> you want in the node is contained within the form element, you won't
                      > >>>>>>>> need the div. If the contents will be made of several elements, the
                      > >>>>>>>> form plus something other siblings, it is better to wrap them all in a
                      > >>>>>>>> single element, thus the div, just for safety.
                      > >>>>>>>>
                      > >>>>>>>> If you are using progressive enhancement and already have the markup for
                      > >>>>>>>> the form, you can pick that DOM element remove it from the DOM tree at
                      > >>>>>>>> its current location and insert it inside the 'whatever' div above.
                      > >>>>>>>>
                      > >>>>>>>> Two things to be aware of:
                      > >>>>>>>>
                      > >>>>>>>> The default action on clicking a TreeView node is toggling. That will
                      > >>>>>>>> always happen when you click on the toggle icon no matter what, that's
                      > >>>>>>>> what the icon is there for. It will also happen when clicking on the
                      > >>>>>>>> content unless you tell it not to. To prevent that, listen to the
                      > >>>>>>>> clickEvent, do whatever you need, if anything and return false.
                      > >>>>>>>>
                      > >>>>>>>> If you call any method that might produce a refresh of the node, any
                      > >>>>>>>> event listeners attached to the form itself or any buttons or other
                      > >>>>>>>> elements within will be lost. If you call tree.render more than once or
                      > >>>>>>>> node.refresh your listener will turn deaf.
                      > >>>>>>>>
                      > >>>>>>>> Satyam
                      > >>>>>>>>
                      > >>>>>>>>
                      > >>>>>>>> nkwok escribió:
                      > >>>>>>>>
                      > >>>>>>>>
                      > >>>>>>>>
                      > >>>>>>>>
                      > >>>>>>>>> Satyam,
                      > >>>>>>>>>
                      > >>>>>>>>> Thanks for your quick reply! I am not sure I understood what you mean by "use a simple div to hold its contents"? Since DataTable does not support vertical display, I want to have an input form to replace the datatable in the example. Where do I put the "div" in the treeview? Any tip will be appreciated to get me started. Thanks again!
                      > >>>>>>>>>
                      > >>>>>>>>>
                      > >>>>>>>>>
                      > >>>>>>>>> Regards,
                      > >>>>>>>>> Norman
                      > >>>>>>>>>
                      > >>>>>>>>>
                      > >>>>>>>>> --- In ydn-javascript@yahoogroups.com, Satyam <satyam@> wrote:
                      > >>>>>>>>>
                      > >>>>>>>>>
                      > >>>>>>>>>
                      > >>>>>>>>>
                      > >>>>>>>>>
                      > >>>>>>>>>> Some widgets float over the ground floor of the page so they don't take
                      > >>>>>>>>>> any space in it since they float above. All of the Container family is
                      > >>>>>>>>>> meant to produce such floating containers. Panel and dialog are two
                      > >>>>>>>>>> widgets from the same family. They are meant to be dragged about, shown
                      > >>>>>>>>>> and hidden, resized and all this would leave a whole in the page
                      > >>>>>>>>>> underneath if they took any space there. The DataTable is embedded
                      > >>>>>>>>>> within the base of the page so it takes space there. If you want a
                      > >>>>>>>>>> generic container to take up space in the base page, use a simple div to
                      > >>>>>>>>>> hold its contents.
                      > >>>>>>>>>>
                      > >>>>>>>>>> Satyam
                      > >>>>>>>>>>
                      > >>>>>>>>>> nkwok escribió:
                      > >>>>>>>>>>
                      > >>>>>>>>>>
                      > >>>>>>>>>>
                      > >>>>>>>>>>
                      > >>>>>>>>>>
                      > >>>>>>>>>>> Hello,
                      > >>>>>>>>>>>
                      > >>>>>>>>>>> I found the excellent example "Tree View with DataTables as nodes) by Satyam. Is it possible to have other widget as node other than DataTable? I tried both "dialog" and "panel" widgets but they did not work correctly - meaning it rendered but overlapped with the next tree node. I was using the constructor like:
                      > >>>>>>>>>>>
                      > >>>>>>>>>>> new YAHOO.widget.Panel("panel", {width: "300px", constraintoviewport: false, visible: false});
                      > >>>>>>>>>>>
                      > >>>>>>>>>>> With DataTable, there is no overlap and the next tree node will expand accordingly. Is there some others parameters that I need for the Panel constructor in order for the treeview to render correctly?
                      > >>>>>>>>>>>
                      > >>>>>>>>>>>
                      > >>>>>>>>>>> Thanks,
                      > >>>>>>>>>>> Norman
                      > >>>>>>>>>>>
                      > >>>>>>>>>>>
                      > >>>>>>>>>>>
                      > >>>>>>>>>>>
                      > >>>>>>>>>>> ------------------------------------
                      > >>>>>>>>>>>
                      > >>>>>>>>>>> Yahoo! Groups Links
                      > >>>>>>>>>>>
                      > >>>>>>>>>>>
                      > >>>>>>>>>>>
                      > >>>>>>>>>>> ------------------------------------------------------------------------
                      > >>>>>>>>>>>
                      > >>>>>>>>>>>
                      > >>>>>>>>>>> No virus found in this incoming message.
                      > >>>>>>>>>>> Checked by AVG - www.avg.com
                      > >>>>>>>>>>> Version: 8.5.285 / Virus Database: 270.11.31/2029 - Release Date: 03/29/09 16:56:00
                      > >>>>>>>>>>>
                      > >>>>>>>>>>>
                      > >>>>>>>>>>>
                      > >>>>>>>>>>>
                      > >>>>>>>>>>>
                      > >>>>>>>>>>>
                      > >>>>>>>>>>>
                      > >>>>>>>>> ------------------------------------
                      > >>>>>>>>>
                      > >>>>>>>>> Yahoo! Groups Links
                      > >>>>>>>>>
                      > >>>>>>>>>
                      > >>>>>>>>>
                      > >>>>>>>>> ------------------------------------------------------------------------
                      > >>>>>>>>>
                      > >>>>>>>>>
                      > >>>>>>>>> No virus found in this incoming message.
                      > >>>>>>>>> Checked by AVG - www.avg.com
                      > >>>>>>>>> Version: 8.5.285 / Virus Database: 270.11.31/2029 - Release Date: 03/29/09 16:56:00
                      > >>>>>>>>>
                      > >>>>>>>>>
                      > >>>>>>>>>
                      > >>>>>>>>>
                      > >>>>>>>>>
                      > >>>>>>>>>
                      > >>>>>>> ------------------------------------
                      > >>>>>>>
                      > >>>>>>> Yahoo! Groups Links
                      > >>>>>>>
                      > >>>>>>>
                      > >>>>>>>
                      > >>>>>>> ------------------------------------------------------------------------
                      > >>>>>>>
                      > >>>>>>>
                      > >>>>>>> No virus found in this incoming message.
                      > >>>>>>> Checked by AVG - www.avg.com
                      > >>>>>>> Version: 8.5.285 / Virus Database: 270.11.32/2030 - Release Date: 03/30/09 08:40:00
                      > >>>>>>>
                      > >>>>>>>
                      > >>>>>>>
                      > >>>>>>>
                      > >>>>>>>
                      > >>>>> ------------------------------------
                      > >>>>>
                      > >>>>> Yahoo! Groups Links
                      > >>>>>
                      > >>>>>
                      > >>>>>
                      > >>>>> ------------------------------------------------------------------------
                      > >>>>>
                      > >>>>>
                      > >>>>> No virus found in this incoming message.
                      > >>>>> Checked by AVG - www.avg.com
                      > >>>>> Version: 8.5.285 / Virus Database: 270.11.32/2030 - Release Date: 03/30/09 08:40:00
                      > >>>>>
                      > >>>>>
                      > >>>>>
                      > >>>>>
                      > >>>
                      > >>>
                      > >>> ------------------------------------
                      > >>>
                      > >>> Yahoo! Groups Links
                      > >>>
                      > >>>
                      > >>>
                      > >>> ------------------------------------------------------------------------
                      > >>>
                      > >>>
                      > >>> No virus found in this incoming message.
                      > >>> Checked by AVG - www.avg.com
                      > >>> Version: 8.5.285 / Virus Database: 270.11.35/2034 - Release Date: 04/01/09 06:06:00
                      > >>>
                      > >>>
                      > >>>
                      > >
                      > >
                      > >
                      > >
                      > > ------------------------------------
                      > >
                      > > Yahoo! Groups Links
                      > >
                      > >
                      > >
                      > > ------------------------------------------------------------------------
                      > >
                      > >
                      > > No virus found in this incoming message.
                      > > Checked by AVG - www.avg.com
                      > > Version: 8.5.285 / Virus Database: 270.11.35/2034 - Release Date: 04/01/09 06:06:00
                      > >
                      > >
                      >
                    • Satyam
                      Norman, The error in setHTML was fixed in 2.7 I didn t notice which version you were using. Also the names are missleading, setHTML is not the opposite of
                      Message 10 of 17 , Apr 2 1:15 PM
                      • 0 Attachment
                        Norman,

                        The error in setHTML was fixed in 2.7 I didn't notice which version you
                        were using.

                        Also the names are missleading, setHTML is not the opposite of getHTML.
                        The getHTML function belongs to Node and, thus, is inherited by HTMLNode
                        and it returns the HTML markup that will constitute the node UI.
                        setHTML, on the other hand, belongs to HTMLNode and though it makes
                        sense that it sets the html property and refreshes it right away (which
                        setting the html property on its own does not) but it is not related
                        with Node.getHTML at all.

                        So, you either do:

                        newNode.html = node.html;
                        newNode.refresh();

                        or:
                        newNode.getContentEl().innerHTML = newNode.html = node.html;

                        In 2.7, this would also work:
                        newNode.setHTML(node.html);



                        Any reason for you to use 2.6 instead of 2.7?

                        Anyhow, thanks for the sample because I found another error which
                        wouldn't break your application but I run it with 'break on all errors'
                        and it surfaced and setHTML is not well documented.

                        Satyam


                        nkwok escribió:
                        > Satyam,
                        >
                        > Thanks for the JSLint tips! I went through JSLint and clean up as much as I can. I also upload the updated version at http://webpages.charter.net/tykwok/JMSTreeDataTable.htm
                        >
                        > I added couple alert window to point out the node.data is gone after calling setHtml(). The block of code is between line #116 - 142. I stepped through the code using FireBug and found the node.data was changed after setHtml(). If you run the updated version again, you will see the first alert window will show the node.data is an object and will display the key:value pair. Right after the call of setHtml(), the 2nd alert window will show the node.data is now a string instead. That is why clicking the right-hand '+' icon will not work again since the data.key is gone.
                        >
                        > What I am trying to do is find a way to update the label of the tree node at run time. I have tried different methods without luck. You mentioned using setHtml() and thought using getHtml() to get the node Html string, replace with the new label and use setHtml() to update the label accordingly - but it is not working as planned.
                        >
                        > Like I mentioned in my last email, I tried adding a <div id='alabel> node-label </div>, used getElementById('alabel') and changed the node label using innerHTML. It did update the node label when single-step, but the tree render put the old data back afterward.
                        >
                        > How do I change the node label if I am using widget HTMLNode, any suggestion? Again, thanks for your times and help!
                        >
                        >
                        > Regards,
                        > Norman
                        >
                        > --- In ydn-javascript@yahoogroups.com, Satyam <satyam@...> wrote:
                        >
                        >> Looks nice! I like clean and simple interfaces
                        >>
                        >> What I notice is that after first adding a node to jsm_queue you get a
                        >> copy of aammx001_queue_01 (there are now two on the page) plus a
                        >> aammx001_Queue_4 and both of these are one level up from the original
                        >> aammx001_queue_01. It is not that node.data.key is gone but that the
                        >> previous getNodeByProperty fails and returns null for node, so my guess
                        >> is that you inserted the new nodes at the wrong nesting level of the
                        >> tree and then, due to that offset, you end up looking for things in the
                        >> wrong level.
                        >>
                        >> However, the first thing I tried is, see if it checks with the
                        >> HTMLValidator and with the JSLint parser. It does not. Actually, it
                        >> has so many errors that JSLint quits. Most of them can be solved by a
                        >> simple search and replace. None of them are terrible, probably none of
                        >> them fatal, but the problem is that both tools are good at finding hard
                        >> to see errors and if you flood them with silly ones, the really
                        >> important ones go undetected. You have both variables declared but
                        >> unused and variables declared twice in the same scope. Both might
                        >> indicate the code is flowing through unexpected places. The parseInt
                        >> missing radix argument error might cause an very silly error:
                        >> parseInt('08') returns 0, not 8, because the leading 0 makes it assume
                        >> it is octal and 8 is not a valid character in octal, so it gets
                        >> ignored. parseInt('08',10) returns 8, which is what you probably
                        >> expected. Check your code with JSLint every so often and specially when
                        >> something goes wrong and certainly before deployment. It is not a bad
                        >> idea to run it through the YUI Compressor in verbose mode, it can hint
                        >> you at some questionable constructs.
                        >>
                        >> Also, note you are loading yuiloader 2.6 and everything else 2.7.
                        >> Actually, whatever you load with the loader thereafter will be 2.6 since
                        >> each version of the loader loads components of its own version. It is
                        >> not a good idea to mix and hope they match.
                        >>
                        >> For long string concatenations, piling segments into an array and then
                        >> doing a single join is usually faster than concatenating with +=. Your
                        >> strings are close to the breakeven point though so I'm not sure what
                        >> would be faster in your case.
                        >>
                        >> var formElement = [
                        >> "<table border='0'>",
                        >> "<tr><td>   <\/td> <td>Name:<\/td> <td> <input
                        >> type='text' id='name",
                        >> divId,
                        >> "'/><\/td><\/tr>",
                        >> "<tr><td>   <\/td> <td>Description:<\/td> <td> <input
                        >> type='text' id='address" + divId + "'/><\/td><\/tr>",
                        >> "<tr><td>   <\/td> <td>Max Bytes:<\/td> <td> <input
                        >> type='text' id='maxbytes" + divId + "'/><\/td><\/tr>",
                        >> "<tr><td>   <\/td> <td>Global:<\/td> <td> <input
                        >> type='text' id='global" + divId + "'/><\/td><\/tr>",
                        >> "<\/table>"].join();
                        >>
                        >> Satyam
                        >>
                        >>
                        >> nkwok escribió:
                        >>
                        >>> Satyam,
                        >>>
                        >>> I uploaded the file at
                        >>> http://webpages.charter.net/tykwok/JMSTreeDataTable.htm
                        >>>
                        >>> Click on the expand '+' on the left to expand the node 'JMS Queue'. Then click on the green '+' on the right to add more nodes at 'JMS Queue' node. Afterward, click on the green '+' on the right won't add any more nodes since the node.data.key is gone. The code that I have at line 48 clear the data after using setHtml.
                        >>>
                        >>> var newnHtml = node.getHtml();
                        >>> node.setHtml(newnHtml);
                        >>>
                        >>>
                        >>>
                        >>>
                        >>> Regards,
                        >>> Norman
                        >>>
                        >>> --- In ydn-javascript@yahoogroups.com, Satyam <satyam@> wrote:
                        >>>
                        >>>
                        >>>> Can you send me your code, or a relevant section of it? I would love to
                        >>>> try it and see what fails.
                        >>>>
                        >>>> Thanks
                        >>>>
                        >>>> Satyam
                        >>>>
                        >>>>
                        >>>> nkwok escribió:
                        >>>>
                        >>>>
                        >>>>> Satyam,
                        >>>>>
                        >>>>> It did not work with setHtml method that you mention above. There are couple problems with this approach:
                        >>>>>
                        >>>>> 1. I used getHtml() to get the html string, then call setHtml() and the tree display 2 "-" icons like "- - label" and duplicate all the children. Strange!
                        >>>>> 2. After setHtml() call, the data structure got wiped out. Calling the 'tree.getNodeByProperty('key", "my-key")' will return null the 2nd time.
                        >>>>>
                        >>>>> I also tried adding a <div id='alabel' >Label</div> and used getElementById('alabel') and changed by innerHTML. However, the tree render back the older data afterward.
                        >>>>>
                        >>>>> Is there any way to change the node label for HTMLNode?
                        >>>>>
                        >>>>>
                        >>>>> Regards,
                        >>>>> Norman
                        >>>>>
                        >>>>>
                        >>>>> --- In ydn-javascript@yahoogroups.com, Satyam <satyam@> wrote:
                        >>>>>
                        >>>>>
                        >>>>>
                        >>>>>> In HTMLNode, you can use the setHTML method. It doesn't have a label
                        >>>>>> property, nor a getLabelEl() method.
                        >>>>>>
                        >>>>>> In general, avoid using the textContent property. When you read it, it
                        >>>>>> will return all the text nodes within the container element,
                        >>>>>> disregarding all HTML markup. If your node had been a TextNode instead
                        >>>>>> of an HTMLNode, it would ignore the <span> enclosing the text and return
                        >>>>>> the text within. That is fine if that's what you want, but the problem
                        >>>>>> is that when you assign anything to it, it will wipe out that markup, it
                        >>>>>> will not replace strictly what it showed you but it will replace all of
                        >>>>>> it, what it showed you and what it didn't. The innerHTML property is
                        >>>>>> more clear about it, it shows you all and replaces all, nothing hidden
                        >>>>>> there.
                        >>>>>>
                        >>>>>> Satyam
                        >>>>>>
                        >>>>>>
                        >>>>>> nkwok escribió:
                        >>>>>>
                        >>>>>>
                        >>>>>>
                        >>>>>>> Satyam,
                        >>>>>>>
                        >>>>>>> Sorry for not making myself clear! Yeah, that is what I want to do with the label of HTMLNode. Given that TextNode has a label property and HTMLNode doesn't, how do I change the label of HTMLNode and refresh to see the change? Thanks again!
                        >>>>>>>
                        >>>>>>>
                        >>>>>>> Regards,
                        >>>>>>> Norman
                        >>>>>>>
                        >>>>>>>
                        >>>>>>> --- In ydn-javascript@yahoogroups.com, Satyam <satyam@> wrote:
                        >>>>>>>
                        >>>>>>>
                        >>>>>>>
                        >>>>>>>
                        >>>>>>>> Not sure I understand you. Some random thoughts that might be related:
                        >>>>>>>> TextNodes have a label property, HTMLNodes don't. Changing the label
                        >>>>>>>> property on a TextNode does not automatically refresh the UI, not until
                        >>>>>>>> the node is refreshed. You either call the refresh method or update the
                        >>>>>>>> DOM yourself.
                        >>>>>>>>
                        >>>>>>>> If it is a TextNode, instead of:
                        >>>>>>>>
                        >>>>>>>> node.getContentEl().textContent = 'new-value'
                        >>>>>>>>
                        >>>>>>>> do:
                        >>>>>>>>
                        >>>>>>>> node.getLabelEl().innerHTML = 'new-value'
                        >>>>>>>>
                        >>>>>>>> The label is contained in a <span> and if you set the content to a
                        >>>>>>>> simple text, the <span> will be gone and the getLabelEl won't work any
                        >>>>>>>> longer since it looks for this <span>
                        >>>>>>>>
                        >>>>>>>> Satyam
                        >>>>>>>>
                        >>>>>>>>
                        >>>>>>>> nkwok escribió:
                        >>>>>>>>
                        >>>>>>>>
                        >>>>>>>>
                        >>>>>>>>
                        >>>>>>>>> Satyam,
                        >>>>>>>>>
                        >>>>>>>>> Thanks for the tips and I got the input form render accordingly! Many thanks! However, I got stuck trying to change the label of the node - since one of the input value in the form will be the name of the node. I tried using node.getContentEl().textContent = 'new-value' and the label got reset afterward. Any suggestion!
                        >>>>>>>>>
                        >>>>>>>>>
                        >>>>>>>>> Regards,
                        >>>>>>>>> Norman
                        >>>>>>>>>
                        >>>>>>>>>
                        >>>>>>>>> --- In ydn-javascript@yahoogroups.com, Satyam <satyam@> wrote:
                        >>>>>>>>>
                        >>>>>>>>>
                        >>>>>>>>>
                        >>>>>>>>>
                        >>>>>>>>>
                        >>>>>>>>>> You can use HTMLNodes. They take a string containing whatever HTML you
                        >>>>>>>>>> wish. Your best option might be to load the HTMLNode with '<div
                        >>>>>>>>>> id="whatever"></div>' and then use YAHOO.util.Dom.get('whatever'); to
                        >>>>>>>>>> find the div and fill it up. You can also set all the div and the
                        >>>>>>>>>> complete form as an HTML string in just one go. Whatever you put in the
                        >>>>>>>>>> html property of an HTMLNode will be inserted into the innerHTML
                        >>>>>>>>>> property of the container for the node so either way will do. If all
                        >>>>>>>>>> you want in the node is contained within the form element, you won't
                        >>>>>>>>>> need the div. If the contents will be made of several elements, the
                        >>>>>>>>>> form plus something other siblings, it is better to wrap them all in a
                        >>>>>>>>>> single element, thus the div, just for safety.
                        >>>>>>>>>>
                        >>>>>>>>>> If you are using progressive enhancement and already have the markup for
                        >>>>>>>>>> the form, you can pick that DOM element remove it from the DOM tree at
                        >>>>>>>>>> its current location and insert it inside the 'whatever' div above.
                        >>>>>>>>>>
                        >>>>>>>>>> Two things to be aware of:
                        >>>>>>>>>>
                        >>>>>>>>>> The default action on clicking a TreeView node is toggling. That will
                        >>>>>>>>>> always happen when you click on the toggle icon no matter what, that's
                        >>>>>>>>>> what the icon is there for. It will also happen when clicking on the
                        >>>>>>>>>> content unless you tell it not to. To prevent that, listen to the
                        >>>>>>>>>> clickEvent, do whatever you need, if anything and return false.
                        >>>>>>>>>>
                        >>>>>>>>>> If you call any method that might produce a refresh of the node, any
                        >>>>>>>>>> event listeners attached to the form itself or any buttons or other
                        >>>>>>>>>> elements within will be lost. If you call tree.render more than once or
                        >>>>>>>>>> node.refresh your listener will turn deaf.
                        >>>>>>>>>>
                        >>>>>>>>>> Satyam
                        >>>>>>>>>>
                        >>>>>>>>>>
                        >>>>>>>>>> nkwok escribió:
                        >>>>>>>>>>
                        >>>>>>>>>>
                        >>>>>>>>>>
                        >>>>>>>>>>
                        >>>>>>>>>>
                        >>>>>>>>>>> Satyam,
                        >>>>>>>>>>>
                        >>>>>>>>>>> Thanks for your quick reply! I am not sure I understood what you mean by "use a simple div to hold its contents"? Since DataTable does not support vertical display, I want to have an input form to replace the datatable in the example. Where do I put the "div" in the treeview? Any tip will be appreciated to get me started. Thanks again!
                        >>>>>>>>>>>
                        >>>>>>>>>>>
                        >>>>>>>>>>>
                        >>>>>>>>>>> Regards,
                        >>>>>>>>>>> Norman
                        >>>>>>>>>>>
                        >>>>>>>>>>>
                        >>>>>>>>>>> --- In ydn-javascript@yahoogroups.com, Satyam <satyam@> wrote:
                        >>>>>>>>>>>
                        >>>>>>>>>>>
                        >>>>>>>>>>>
                        >>>>>>>>>>>
                        >>>>>>>>>>>
                        >>>>>>>>>>>
                        >>>>>>>>>>>> Some widgets float over the ground floor of the page so they don't take
                        >>>>>>>>>>>> any space in it since they float above. All of the Container family is
                        >>>>>>>>>>>> meant to produce such floating containers. Panel and dialog are two
                        >>>>>>>>>>>> widgets from the same family. They are meant to be dragged about, shown
                        >>>>>>>>>>>> and hidden, resized and all this would leave a whole in the page
                        >>>>>>>>>>>> underneath if they took any space there. The DataTable is embedded
                        >>>>>>>>>>>> within the base of the page so it takes space there. If you want a
                        >>>>>>>>>>>> generic container to take up space in the base page, use a simple div to
                        >>>>>>>>>>>> hold its contents.
                        >>>>>>>>>>>>
                        >>>>>>>>>>>> Satyam
                        >>>>>>>>>>>>
                        >>>>>>>>>>>> nkwok escribió:
                        >>>>>>>>>>>>
                        >>>>>>>>>>>>
                        >>>>>>>>>>>>
                        >>>>>>>>>>>>
                        >>>>>>>>>>>>
                        >>>>>>>>>>>>
                        >>>>>>>>>>>>> Hello,
                        >>>>>>>>>>>>>
                        >>>>>>>>>>>>> I found the excellent example "Tree View with DataTables as nodes) by Satyam. Is it possible to have other widget as node other than DataTable? I tried both "dialog" and "panel" widgets but they did not work correctly - meaning it rendered but overlapped with the next tree node. I was using the constructor like:
                        >>>>>>>>>>>>>
                        >>>>>>>>>>>>> new YAHOO.widget.Panel("panel", {width: "300px", constraintoviewport: false, visible: false});
                        >>>>>>>>>>>>>
                        >>>>>>>>>>>>> With DataTable, there is no overlap and the next tree node will expand accordingly. Is there some others parameters that I need for the Panel constructor in order for the treeview to render correctly?
                        >>>>>>>>>>>>>
                        >>>>>>>>>>>>>
                        >>>>>>>>>>>>> Thanks,
                        >>>>>>>>>>>>> Norman
                        >>>>>>>>>>>>>
                        >>>>>>>>>>>>>
                        >>>>>>>>>>>>>
                        >>>>>>>>>>>>>
                        >
                      • Satyam
                        BTW: It is not that node.data has no property key, it is that node is null and thus has no data property nor any other for that matter. Method
                        Message 11 of 17 , Apr 2 1:38 PM
                        • 0 Attachment
                          BTW:

                          It is not that node.data has no property key, it is that node is
                          null and thus has no data property nor any other for that matter.
                          Method getNodeByProperty cannot find if. Tracing through it I found the
                          first node has the key property set to undefined-jmsuser, the second to
                          undefined-jmsuser-data, the third to undefined-jmsqueue. I'm not sure
                          you meant the key values to take those values. I would assume the
                          undefined part is due to a concatenation in between something that
                          supposedly had some value but in reality is undefined and the rest.

                          Also note that method getNodeByProperty will not find a node if the
                          value of the given property does not fully match the value requested.
                          It doesn't take partial matches.

                          In fact, this code is pointless:

                          var node = gtree.getNodeByProperty('key', nodekey);

                          var k = node.data.key;

                          If node is not null, which in your case it is, k wouldn't have any other
                          value but nodekey. It would make sense if, as it seems you assume,
                          getNodeByProperty would do partial matches because you would then be
                          looking to what is it that did match. That is not the case.

                          Satyam


                          Satyam escribió:
                          > Norman,
                          >
                          > The error in setHTML was fixed in 2.7 I didn't notice which version you
                          > were using.
                          >
                          > Also the names are missleading, setHTML is not the opposite of getHTML.
                          > The getHTML function belongs to Node and, thus, is inherited by HTMLNode
                          > and it returns the HTML markup that will constitute the node UI.
                          > setHTML, on the other hand, belongs to HTMLNode and though it makes
                          > sense that it sets the html property and refreshes it right away (which
                          > setting the html property on its own does not) but it is not related
                          > with Node.getHTML at all.
                          >
                          > So, you either do:
                          >
                          > newNode.html = node.html;
                          > newNode.refresh();
                          >
                          > or:
                          > newNode.getContentEl().innerHTML = newNode.html = node.html;
                          >
                          > In 2.7, this would also work:
                          > newNode.setHTML(node.html);
                          >
                          >
                          >
                          > Any reason for you to use 2.6 instead of 2.7?
                          >
                          > Anyhow, thanks for the sample because I found another error which
                          > wouldn't break your application but I run it with 'break on all errors'
                          > and it surfaced and setHTML is not well documented.
                          >
                          > Satyam
                          >
                          >
                          > nkwok escribió:
                          >
                          >> Satyam,
                          >>
                          >> Thanks for the JSLint tips! I went through JSLint and clean up as much as I can. I also upload the updated version at http://webpages.charter.net/tykwok/JMSTreeDataTable.htm
                          >>
                          >> I added couple alert window to point out the node.data is gone after calling setHtml(). The block of code is between line #116 - 142. I stepped through the code using FireBug and found the node.data was changed after setHtml(). If you run the updated version again, you will see the first alert window will show the node.data is an object and will display the key:value pair. Right after the call of setHtml(), the 2nd alert window will show the node.data is now a string instead. That is why clicking the right-hand '+' icon will not work again since the data.key is gone.
                          >>
                          >> What I am trying to do is find a way to update the label of the tree node at run time. I have tried different methods without luck. You mentioned using setHtml() and thought using getHtml() to get the node Html string, replace with the new label and use setHtml() to update the label accordingly - but it is not working as planned.
                          >>
                          >> Like I mentioned in my last email, I tried adding a <div id='alabel> node-label </div>, used getElementById('alabel') and changed the node label using innerHTML. It did update the node label when single-step, but the tree render put the old data back afterward.
                          >>
                          >> How do I change the node label if I am using widget HTMLNode, any suggestion? Again, thanks for your times and help!
                          >>
                          >>
                          >> Regards,
                          >> Norman
                          >>
                          >> --- In ydn-javascript@yahoogroups.com, Satyam <satyam@...> wrote:
                          >>
                          >>
                          >>> Looks nice! I like clean and simple interfaces
                          >>>
                          >>> What I notice is that after first adding a node to jsm_queue you get a
                          >>> copy of aammx001_queue_01 (there are now two on the page) plus a
                          >>> aammx001_Queue_4 and both of these are one level up from the original
                          >>> aammx001_queue_01. It is not that node.data.key is gone but that the
                          >>> previous getNodeByProperty fails and returns null for node, so my guess
                          >>> is that you inserted the new nodes at the wrong nesting level of the
                          >>> tree and then, due to that offset, you end up looking for things in the
                          >>> wrong level.
                          >>>
                          >>> However, the first thing I tried is, see if it checks with the
                          >>> HTMLValidator and with the JSLint parser. It does not. Actually, it
                          >>> has so many errors that JSLint quits. Most of them can be solved by a
                          >>> simple search and replace. None of them are terrible, probably none of
                          >>> them fatal, but the problem is that both tools are good at finding hard
                          >>> to see errors and if you flood them with silly ones, the really
                          >>> important ones go undetected. You have both variables declared but
                          >>> unused and variables declared twice in the same scope. Both might
                          >>> indicate the code is flowing through unexpected places. The parseInt
                          >>> missing radix argument error might cause an very silly error:
                          >>> parseInt('08') returns 0, not 8, because the leading 0 makes it assume
                          >>> it is octal and 8 is not a valid character in octal, so it gets
                          >>> ignored. parseInt('08',10) returns 8, which is what you probably
                          >>> expected. Check your code with JSLint every so often and specially when
                          >>> something goes wrong and certainly before deployment. It is not a bad
                          >>> idea to run it through the YUI Compressor in verbose mode, it can hint
                          >>> you at some questionable constructs.
                          >>>
                          >>> Also, note you are loading yuiloader 2.6 and everything else 2.7.
                          >>> Actually, whatever you load with the loader thereafter will be 2.6 since
                          >>> each version of the loader loads components of its own version. It is
                          >>> not a good idea to mix and hope they match.
                          >>>
                          >>> For long string concatenations, piling segments into an array and then
                          >>> doing a single join is usually faster than concatenating with +=. Your
                          >>> strings are close to the breakeven point though so I'm not sure what
                          >>> would be faster in your case.
                          >>>
                          >>> var formElement = [
                          >>> "<table border='0'>",
                          >>> "<tr><td>   <\/td> <td>Name:<\/td> <td> <input
                          >>> type='text' id='name",
                          >>> divId,
                          >>> "'/><\/td><\/tr>",
                          >>> "<tr><td>   <\/td> <td>Description:<\/td> <td> <input
                          >>> type='text' id='address" + divId + "'/><\/td><\/tr>",
                          >>> "<tr><td>   <\/td> <td>Max Bytes:<\/td> <td> <input
                          >>> type='text' id='maxbytes" + divId + "'/><\/td><\/tr>",
                          >>> "<tr><td>   <\/td> <td>Global:<\/td> <td> <input
                          >>> type='text' id='global" + divId + "'/><\/td><\/tr>",
                          >>> "<\/table>"].join();
                          >>>
                          >>> Satyam
                          >>>
                          >>>
                          >>> nkwok escribió:
                          >>>
                          >>>
                          >>>> Satyam,
                          >>>>
                          >>>> I uploaded the file at
                          >>>> http://webpages.charter.net/tykwok/JMSTreeDataTable.htm
                          >>>>
                          >>>> Click on the expand '+' on the left to expand the node 'JMS Queue'. Then click on the green '+' on the right to add more nodes at 'JMS Queue' node. Afterward, click on the green '+' on the right won't add any more nodes since the node.data.key is gone. The code that I have at line 48 clear the data after using setHtml.
                          >>>>
                          >>>> var newnHtml = node.getHtml();
                          >>>> node.setHtml(newnHtml);
                          >>>>
                          >>>>
                          >>>>
                          >>>>
                          >>>> Regards,
                          >>>> Norman
                          >>>>
                          >>>> --- In ydn-javascript@yahoogroups.com, Satyam <satyam@> wrote:
                          >>>>
                          >>>>
                          >>>>
                          >>>>> Can you send me your code, or a relevant section of it? I would love to
                          >>>>> try it and see what fails.
                          >>>>>
                          >>>>> Thanks
                          >>>>>
                          >>>>> Satyam
                          >>>>>
                          >>>>>
                          >>>>> nkwok escribió:
                          >>>>>
                          >>>>>
                          >>>>>
                          >>>>>> Satyam,
                          >>>>>>
                          >>>>>> It did not work with setHtml method that you mention above. There are couple problems with this approach:
                          >>>>>>
                          >>>>>> 1. I used getHtml() to get the html string, then call setHtml() and the tree display 2 "-" icons like "- - label" and duplicate all the children. Strange!
                          >>>>>> 2. After setHtml() call, the data structure got wiped out. Calling the 'tree.getNodeByProperty('key", "my-key")' will return null the 2nd time.
                          >>>>>>
                          >>>>>> I also tried adding a <div id='alabel' >Label</div> and used getElementById('alabel') and changed by innerHTML. However, the tree render back the older data afterward.
                          >>>>>>
                          >>>>>> Is there any way to change the node label for HTMLNode?
                          >>>>>>
                          >>>>>>
                          >>>>>> Regards,
                          >>>>>> Norman
                          >>>>>>
                          >>>>>>
                          >>>>>> --- In ydn-javascript@yahoogroups.com, Satyam <satyam@> wrote:
                          >>>>>>
                          >>>>>>
                          >>>>>>
                          >>>>>>
                          >>>>>>> In HTMLNode, you can use the setHTML method. It doesn't have a label
                          >>>>>>> property, nor a getLabelEl() method.
                          >>>>>>>
                          >>>>>>> In general, avoid using the textContent property. When you read it, it
                          >>>>>>> will return all the text nodes within the container element,
                          >>>>>>> disregarding all HTML markup. If your node had been a TextNode instead
                          >>>>>>> of an HTMLNode, it would ignore the <span> enclosing the text and return
                          >>>>>>> the text within. That is fine if that's what you want, but the problem
                          >>>>>>> is that when you assign anything to it, it will wipe out that markup, it
                          >>>>>>> will not replace strictly what it showed you but it will replace all of
                          >>>>>>> it, what it showed you and what it didn't. The innerHTML property is
                          >>>>>>> more clear about it, it shows you all and replaces all, nothing hidden
                          >>>>>>> there.
                          >>>>>>>
                          >>>>>>> Satyam
                          >>>>>>>
                          >>>>>>>
                          >>>>>>> nkwok escribió:
                          >>>>>>>
                          >>>>>>>
                          >>>>>>>
                          >>>>>>>
                          >>>>>>>> Satyam,
                          >>>>>>>>
                          >>>>>>>> Sorry for not making myself clear! Yeah, that is what I want to do with the label of HTMLNode. Given that TextNode has a label property and HTMLNode doesn't, how do I change the label of HTMLNode and refresh to see the change? Thanks again!
                          >>>>>>>>
                          >>>>>>>>
                          >>>>>>>> Regards,
                          >>>>>>>> Norman
                          >>>>>>>>
                          >>>>>>>>
                          >>>>>>>> --- In ydn-javascript@yahoogroups.com, Satyam <satyam@> wrote:
                          >>>>>>>>
                          >>>>>>>>
                          >>>>>>>>
                          >>>>>>>>
                          >>>>>>>>
                          >>>>>>>>> Not sure I understand you. Some random thoughts that might be related:
                          >>>>>>>>> TextNodes have a label property, HTMLNodes don't. Changing the label
                          >>>>>>>>> property on a TextNode does not automatically refresh the UI, not until
                          >>>>>>>>> the node is refreshed. You either call the refresh method or update the
                          >>>>>>>>> DOM yourself.
                          >>>>>>>>>
                          >>>>>>>>> If it is a TextNode, instead of:
                          >>>>>>>>>
                          >>>>>>>>> node.getContentEl().textContent = 'new-value'
                          >>>>>>>>>
                          >>>>>>>>> do:
                          >>>>>>>>>
                          >>>>>>>>> node.getLabelEl().innerHTML = 'new-value'
                          >>>>>>>>>
                          >>>>>>>>> The label is contained in a <span> and if you set the content to a
                          >>>>>>>>> simple text, the <span> will be gone and the getLabelEl won't work any
                          >>>>>>>>> longer since it looks for this <span>
                          >>>>>>>>>
                          >>>>>>>>> Satyam
                          >>>>>>>>>
                          >>>>>>>>>
                          >>>>>>>>> nkwok escribió:
                          >>>>>>>>>
                          >>>>>>>>>
                          >>>>>>>>>
                          >>>>>>>>>
                          >>>>>>>>>
                          >>>>>>>>>> Satyam,
                          >>>>>>>>>>
                          >>>>>>>>>> Thanks for the tips and I got the input form render accordingly! Many thanks! However, I got stuck trying to change the label of the node - since one of the input value in the form will be the name of the node. I tried using node.getContentEl().textContent = 'new-value' and the label got reset afterward. Any suggestion!
                          >>>>>>>>>>
                          >>>>>>>>>>
                          >>>>>>>>>> Regards,
                          >>>>>>>>>> Norman
                          >>>>>>>>>>
                          >>>>>>>>>>
                          >>>>>>>>>> --- In ydn-javascript@yahoogroups.com, Satyam <satyam@> wrote:
                          >>>>>>>>>>
                          >>>>>>>>>>
                          >>>>>>>>>>
                          >>>>>>>>>>
                          >>>>>>>>>>
                          >>>>>>>>>>
                          >>>>>>>>>>> You can use HTMLNodes. They take a string containing whatever HTML you
                          >>>>>>>>>>> wish. Your best option might be to load the HTMLNode with '<div
                          >>>>>>>>>>> id="whatever"></div>' and then use YAHOO.util.Dom.get('whatever'); to
                          >>>>>>>>>>> find the div and fill it up. You can also set all the div and the
                          >>>>>>>>>>> complete form as an HTML string in just one go. Whatever you put in the
                          >>>>>>>>>>> html property of an HTMLNode will be inserted into the innerHTML
                          >>>>>>>>>>> property of the container for the node so either way will do. If all
                          >>>>>>>>>>> you want in the node is contained within the form element, you won't
                          >>>>>>>>>>> need the div. If the contents will be made of several elements, the
                          >>>>>>>>>>> form plus something other siblings, it is better to wrap them all in a
                          >>>>>>>>>>> single element, thus the div, just for safety.
                          >>>>>>>>>>>
                          >>>>>>>>>>> If you are using progressive enhancement and already have the markup for
                          >>>>>>>>>>> the form, you can pick that DOM element remove it from the DOM tree at
                          >>>>>>>>>>> its current location and insert it inside the 'whatever' div above.
                          >>>>>>>>>>>
                          >>>>>>>>>>> Two things to be aware of:
                          >>>>>>>>>>>
                          >>>>>>>>>>> The default action on clicking a TreeView node is toggling. That will
                          >>>>>>>>>>> always happen when you click on the toggle icon no matter what, that's
                          >>>>>>>>>>> what the icon is there for. It will also happen when clicking on the
                          >>>>>>>>>>> content unless you tell it not to. To prevent that, listen to the
                          >>>>>>>>>>> clickEvent, do whatever you need, if anything and return false.
                          >>>>>>>>>>>
                          >>>>>>>>>>> If you call any method that might produce a refresh of the node, any
                          >>>>>>>>>>> event listeners attached to the form itself or any buttons or other
                          >>>>>>>>>>> elements within will be lost. If you call tree.render more than once or
                          >>>>>>>>>>> node.refresh your listener will turn deaf.
                          >>>>>>>>>>>
                          >>>>>>>>>>> Satyam
                          >>>>>>>>>>>
                          >>>>>>>>>>>
                          >>>>>>>>>>> nkwok escribió:
                          >>>>>>>>>>>
                          >>>>>>>>>>>
                          >>>>>>>>>>>
                          >>>>>>>>>>>
                          >>>>>>>>>>>
                          >>>>>>>>>>>
                          >>>>>>>>>>>> Satyam,
                          >>>>>>>>>>>>
                          >>>>>>>>>>>> Thanks for your quick reply! I am not sure I understood what you mean by "use a simple div to hold its contents"? Since DataTable does not support vertical display, I want to have an input form to replace the datatable in the example. Where do I put the "div" in the treeview? Any tip will be appreciated to get me started. Thanks again!
                          >>>>>>>>>>>>
                          >>>>>>>>>>>>
                          >>>>>>>>>>>>
                          >>>>>>>>>>>> Regards,
                          >>>>>>>>>>>> Norman
                          >>>>>>>>>>>>
                          >>>>>>>>>>>>
                          >>>>>>>>>>>> --- In ydn-javascript@yahoogroups.com, Satyam <satyam@> wrote:
                          >>>>>>>>>>>>
                          >>>>>>>>>>>>
                          >>>>>>>>>>>>
                          >>>>>>>>>>>>
                          >>>>>>>>>>>>
                          >>>>>>>>>>>>
                          >>>>>>>>>>>>
                          >>>>>>>>>>>>> Some widgets float over the ground floor of the page so they don't take
                          >>>>>>>>>>>>> any space in it since they float above. All of the Container family is
                          >>>>>>>>>>>>> meant to produce such floating containers. Panel and dialog are two
                          >>>>>>>>>>>>> widgets from the same family. They are meant to be dragged about, shown
                          >>>>>>>>>>>>> and hidden, resized and all this would leave a whole in the page
                          >>>>>>>>>>>>> underneath if they took any space there. The DataTable is embedded
                          >>>>>>>>>>>>> within the base of the page so it takes space there. If you want a
                          >>>>>>>>>>>>> generic container to take up space in the base page, use a simple div to
                          >>>>>>>>>>>>> hold its contents.
                          >>>>>>>>>>>>>
                          >>>>>>>>>>>>> Satyam
                          >>>>>>>>>>>>>
                          >>>>>>>>>>>>> nkwok escribió:
                          >>>>>>>>>>>>>
                          >>>>>>>>>>>>>
                          >>>>>>>>>>>>>
                          >>>>>>>>>>>>>
                          >>>>>>>>>>>>>
                          >>>>>>>>>>>>>
                          >>>>>>>>>>>>>
                          >>>>>>>>>>>>>> Hello,
                          >>>>>>>>>>>>>>
                          >>>>>>>>>>>>>> I found the excellent example "Tree View with DataTables as nodes) by Satyam. Is it possible to have other widget as node other than DataTable? I tried both "dialog" and "panel" widgets but they did not work correctly - meaning it rendered but overlapped with the next tree node. I was using the constructor like:
                          >>>>>>>>>>>>>>
                          >>>>>>>>>>>>>> new YAHOO.widget.Panel("panel", {width: "300px", constraintoviewport: false, visible: false});
                          >>>>>>>>>>>>>>
                          >>>>>>>>>>>>>> With DataTable, there is no overlap and the next tree node will expand accordingly. Is there some others parameters that I need for the Panel constructor in order for the treeview to render correctly?
                          >>>>>>>>>>>>>>
                          >>>>>>>>>>>>>>
                          >>>>>>>>>>>>>> Thanks,
                          >>>>>>>>>>>>>> Norman
                          >>>>>>>>>>>>>>
                          >>>>>>>>>>>>>>
                          >>>>>>>>>>>>>>
                          >>>>>>>>>>>>>>
                          >>>>>>>>>>>>>>
                          >
                          >
                          > ------------------------------------
                          >
                          > Yahoo! Groups Links
                          >
                          >
                          >
                          > ------------------------------------------------------------------------
                          >
                          >
                          > No virus found in this incoming message.
                          > Checked by AVG - www.avg.com
                          > Version: 8.5.285 / Virus Database: 270.11.38/2037 - Release Date: 04/02/09 06:09:00
                          >
                          >
                        • nkwok
                          Satyam, Thanks for all your helps! Really appreciate that you took the time to answer every one of my email in details and in timely manner! Thanks again!
                          Message 12 of 17 , Apr 2 6:02 PM
                          • 0 Attachment
                            Satyam,

                            Thanks for all your helps! Really appreciate that you took the time to answer every one of my email in details and in timely manner! Thanks again!

                            With all your helps and tips, I got what I want with:

                            var newHtml = node.getContentEl().innerHTML;
                            node.html = newHtml.replace('old-label', 'new-label');
                            node.refresh();

                            The reason that I was using version 2.6 instead of 2.7 because it did not work with getNodeByProperty('key', 'my-key') with version 2.7. However, your next email pointed out all the keys had 'undefined-xxxxx'. It turned out with version 2.7, node.data is an object and in version 2.6, node.data is null, which I took care the first null and fail to check for node.data.key, and get 'undefined' instead. I fixed them now and it is working with both version 2.6 & 2.7.

                            I uploaded the final version in http://webpages.charter.net/tykwok/JMSTreeDataTable.htm for your reference.

                            Many thanks again! Thanks for taking the time to help me out!


                            Regards,
                            Norman

                            --- In ydn-javascript@yahoogroups.com, Satyam <satyam@...> wrote:
                            >
                            > BTW:
                            >
                            > It is not that node.data has no property key, it is that node is
                            > null and thus has no data property nor any other for that matter.
                            > Method getNodeByProperty cannot find if. Tracing through it I found the
                            > first node has the key property set to undefined-jmsuser, the second to
                            > undefined-jmsuser-data, the third to undefined-jmsqueue. I'm not sure
                            > you meant the key values to take those values. I would assume the
                            > undefined part is due to a concatenation in between something that
                            > supposedly had some value but in reality is undefined and the rest.
                            >
                            > Also note that method getNodeByProperty will not find a node if the
                            > value of the given property does not fully match the value requested.
                            > It doesn't take partial matches.
                            >
                            > In fact, this code is pointless:
                            >
                            > var node = gtree.getNodeByProperty('key', nodekey);
                            >
                            > var k = node.data.key;
                            >
                            > If node is not null, which in your case it is, k wouldn't have any other
                            > value but nodekey. It would make sense if, as it seems you assume,
                            > getNodeByProperty would do partial matches because you would then be
                            > looking to what is it that did match. That is not the case.
                            >
                            > Satyam
                            >
                            >
                            > Satyam escribió:
                            > > Norman,
                            > >
                            > > The error in setHTML was fixed in 2.7 I didn't notice which version you
                            > > were using.
                            > >
                            > > Also the names are missleading, setHTML is not the opposite of getHTML.
                            > > The getHTML function belongs to Node and, thus, is inherited by HTMLNode
                            > > and it returns the HTML markup that will constitute the node UI.
                            > > setHTML, on the other hand, belongs to HTMLNode and though it makes
                            > > sense that it sets the html property and refreshes it right away (which
                            > > setting the html property on its own does not) but it is not related
                            > > with Node.getHTML at all.
                            > >
                            > > So, you either do:
                            > >
                            > > newNode.html = node.html;
                            > > newNode.refresh();
                            > >
                            > > or:
                            > > newNode.getContentEl().innerHTML = newNode.html = node.html;
                            > >
                            > > In 2.7, this would also work:
                            > > newNode.setHTML(node.html);
                            > >
                            > >
                            > >
                            > > Any reason for you to use 2.6 instead of 2.7?
                            > >
                            > > Anyhow, thanks for the sample because I found another error which
                            > > wouldn't break your application but I run it with 'break on all errors'
                            > > and it surfaced and setHTML is not well documented.
                            > >
                            > > Satyam
                            > >
                            > >
                            > > nkwok escribió:
                            > >
                            > >> Satyam,
                            > >>
                            > >> Thanks for the JSLint tips! I went through JSLint and clean up as much as I can. I also upload the updated version at http://webpages.charter.net/tykwok/JMSTreeDataTable.htm
                            > >>
                            > >> I added couple alert window to point out the node.data is gone after calling setHtml(). The block of code is between line #116 - 142. I stepped through the code using FireBug and found the node.data was changed after setHtml(). If you run the updated version again, you will see the first alert window will show the node.data is an object and will display the key:value pair. Right after the call of setHtml(), the 2nd alert window will show the node.data is now a string instead. That is why clicking the right-hand '+' icon will not work again since the data.key is gone.
                            > >>
                            > >> What I am trying to do is find a way to update the label of the tree node at run time. I have tried different methods without luck. You mentioned using setHtml() and thought using getHtml() to get the node Html string, replace with the new label and use setHtml() to update the label accordingly - but it is not working as planned.
                            > >>
                            > >> Like I mentioned in my last email, I tried adding a <div id='alabel> node-label </div>, used getElementById('alabel') and changed the node label using innerHTML. It did update the node label when single-step, but the tree render put the old data back afterward.
                            > >>
                            > >> How do I change the node label if I am using widget HTMLNode, any suggestion? Again, thanks for your times and help!
                            > >>
                            > >>
                            > >> Regards,
                            > >> Norman
                            > >>
                            > >> --- In ydn-javascript@yahoogroups.com, Satyam <satyam@> wrote:
                            > >>
                            > >>
                            > >>> Looks nice! I like clean and simple interfaces
                            > >>>
                            > >>> What I notice is that after first adding a node to jsm_queue you get a
                            > >>> copy of aammx001_queue_01 (there are now two on the page) plus a
                            > >>> aammx001_Queue_4 and both of these are one level up from the original
                            > >>> aammx001_queue_01. It is not that node.data.key is gone but that the
                            > >>> previous getNodeByProperty fails and returns null for node, so my guess
                            > >>> is that you inserted the new nodes at the wrong nesting level of the
                            > >>> tree and then, due to that offset, you end up looking for things in the
                            > >>> wrong level.
                            > >>>
                            > >>> However, the first thing I tried is, see if it checks with the
                            > >>> HTMLValidator and with the JSLint parser. It does not. Actually, it
                            > >>> has so many errors that JSLint quits. Most of them can be solved by a
                            > >>> simple search and replace. None of them are terrible, probably none of
                            > >>> them fatal, but the problem is that both tools are good at finding hard
                            > >>> to see errors and if you flood them with silly ones, the really
                            > >>> important ones go undetected. You have both variables declared but
                            > >>> unused and variables declared twice in the same scope. Both might
                            > >>> indicate the code is flowing through unexpected places. The parseInt
                            > >>> missing radix argument error might cause an very silly error:
                            > >>> parseInt('08') returns 0, not 8, because the leading 0 makes it assume
                            > >>> it is octal and 8 is not a valid character in octal, so it gets
                            > >>> ignored. parseInt('08',10) returns 8, which is what you probably
                            > >>> expected. Check your code with JSLint every so often and specially when
                            > >>> something goes wrong and certainly before deployment. It is not a bad
                            > >>> idea to run it through the YUI Compressor in verbose mode, it can hint
                            > >>> you at some questionable constructs.
                            > >>>
                            > >>> Also, note you are loading yuiloader 2.6 and everything else 2.7.
                            > >>> Actually, whatever you load with the loader thereafter will be 2.6 since
                            > >>> each version of the loader loads components of its own version. It is
                            > >>> not a good idea to mix and hope they match.
                            > >>>
                            > >>> For long string concatenations, piling segments into an array and then
                            > >>> doing a single join is usually faster than concatenating with +=. Your
                            > >>> strings are close to the breakeven point though so I'm not sure what
                            > >>> would be faster in your case.
                            > >>>
                            > >>> var formElement = [
                            > >>> "<table border='0'>",
                            > >>> "<tr><td>   <\/td> <td>Name:<\/td> <td> <input
                            > >>> type='text' id='name",
                            > >>> divId,
                            > >>> "'/><\/td><\/tr>",
                            > >>> "<tr><td>   <\/td> <td>Description:<\/td> <td> <input
                            > >>> type='text' id='address" + divId + "'/><\/td><\/tr>",
                            > >>> "<tr><td>   <\/td> <td>Max Bytes:<\/td> <td> <input
                            > >>> type='text' id='maxbytes" + divId + "'/><\/td><\/tr>",
                            > >>> "<tr><td>   <\/td> <td>Global:<\/td> <td> <input
                            > >>> type='text' id='global" + divId + "'/><\/td><\/tr>",
                            > >>> "<\/table>"].join();
                            > >>>
                            > >>> Satyam
                            > >>>
                            > >>>
                            > >>> nkwok escribió:
                            > >>>
                            > >>>
                            > >>>> Satyam,
                            > >>>>
                            > >>>> I uploaded the file at
                            > >>>> http://webpages.charter.net/tykwok/JMSTreeDataTable.htm
                            > >>>>
                            > >>>> Click on the expand '+' on the left to expand the node 'JMS Queue'. Then click on the green '+' on the right to add more nodes at 'JMS Queue' node. Afterward, click on the green '+' on the right won't add any more nodes since the node.data.key is gone. The code that I have at line 48 clear the data after using setHtml.
                            > >>>>
                            > >>>> var newnHtml = node.getHtml();
                            > >>>> node.setHtml(newnHtml);
                            > >>>>
                            > >>>>
                            > >>>>
                            > >>>>
                            > >>>> Regards,
                            > >>>> Norman
                            > >>>>
                            > >>>> --- In ydn-javascript@yahoogroups.com, Satyam <satyam@> wrote:
                            > >>>>
                            > >>>>
                            > >>>>
                            > >>>>> Can you send me your code, or a relevant section of it? I would love to
                            > >>>>> try it and see what fails.
                            > >>>>>
                            > >>>>> Thanks
                            > >>>>>
                            > >>>>> Satyam
                            > >>>>>
                            > >>>>>
                            > >>>>> nkwok escribió:
                            > >>>>>
                            > >>>>>
                            > >>>>>
                            > >>>>>> Satyam,
                            > >>>>>>
                            > >>>>>> It did not work with setHtml method that you mention above. There are couple problems with this approach:
                            > >>>>>>
                            > >>>>>> 1. I used getHtml() to get the html string, then call setHtml() and the tree display 2 "-" icons like "- - label" and duplicate all the children. Strange!
                            > >>>>>> 2. After setHtml() call, the data structure got wiped out. Calling the 'tree.getNodeByProperty('key", "my-key")' will return null the 2nd time.
                            > >>>>>>
                            > >>>>>> I also tried adding a <div id='alabel' >Label</div> and used getElementById('alabel') and changed by innerHTML. However, the tree render back the older data afterward.
                            > >>>>>>
                            > >>>>>> Is there any way to change the node label for HTMLNode?
                            > >>>>>>
                            > >>>>>>
                            > >>>>>> Regards,
                            > >>>>>> Norman
                            > >>>>>>
                            > >>>>>>
                            > >>>>>> --- In ydn-javascript@yahoogroups.com, Satyam <satyam@> wrote:
                            > >>>>>>
                            > >>>>>>
                            > >>>>>>
                            > >>>>>>
                            > >>>>>>> In HTMLNode, you can use the setHTML method. It doesn't have a label
                            > >>>>>>> property, nor a getLabelEl() method.
                            > >>>>>>>
                            > >>>>>>> In general, avoid using the textContent property. When you read it, it
                            > >>>>>>> will return all the text nodes within the container element,
                            > >>>>>>> disregarding all HTML markup. If your node had been a TextNode instead
                            > >>>>>>> of an HTMLNode, it would ignore the <span> enclosing the text and return
                            > >>>>>>> the text within. That is fine if that's what you want, but the problem
                            > >>>>>>> is that when you assign anything to it, it will wipe out that markup, it
                            > >>>>>>> will not replace strictly what it showed you but it will replace all of
                            > >>>>>>> it, what it showed you and what it didn't. The innerHTML property is
                            > >>>>>>> more clear about it, it shows you all and replaces all, nothing hidden
                            > >>>>>>> there.
                            > >>>>>>>
                            > >>>>>>> Satyam
                            > >>>>>>>
                            > >>>>>>>
                            > >>>>>>> nkwok escribió:
                            > >>>>>>>
                            > >>>>>>>
                            > >>>>>>>
                            > >>>>>>>
                            > >>>>>>>> Satyam,
                            > >>>>>>>>
                            > >>>>>>>> Sorry for not making myself clear! Yeah, that is what I want to do with the label of HTMLNode. Given that TextNode has a label property and HTMLNode doesn't, how do I change the label of HTMLNode and refresh to see the change? Thanks again!
                            > >>>>>>>>
                            > >>>>>>>>
                            > >>>>>>>> Regards,
                            > >>>>>>>> Norman
                            > >>>>>>>>
                            > >>>>>>>>
                            > >>>>>>>> --- In ydn-javascript@yahoogroups.com, Satyam <satyam@> wrote:
                            > >>>>>>>>
                            > >>>>>>>>
                            > >>>>>>>>
                            > >>>>>>>>
                            > >>>>>>>>
                            > >>>>>>>>> Not sure I understand you. Some random thoughts that might be related:
                            > >>>>>>>>> TextNodes have a label property, HTMLNodes don't. Changing the label
                            > >>>>>>>>> property on a TextNode does not automatically refresh the UI, not until
                            > >>>>>>>>> the node is refreshed. You either call the refresh method or update the
                            > >>>>>>>>> DOM yourself.
                            > >>>>>>>>>
                            > >>>>>>>>> If it is a TextNode, instead of:
                            > >>>>>>>>>
                            > >>>>>>>>> node.getContentEl().textContent = 'new-value'
                            > >>>>>>>>>
                            > >>>>>>>>> do:
                            > >>>>>>>>>
                            > >>>>>>>>> node.getLabelEl().innerHTML = 'new-value'
                            > >>>>>>>>>
                            > >>>>>>>>> The label is contained in a <span> and if you set the content to a
                            > >>>>>>>>> simple text, the <span> will be gone and the getLabelEl won't work any
                            > >>>>>>>>> longer since it looks for this <span>
                            > >>>>>>>>>
                            > >>>>>>>>> Satyam
                            > >>>>>>>>>
                            > >>>>>>>>>
                            > >>>>>>>>> nkwok escribió:
                            > >>>>>>>>>
                            > >>>>>>>>>
                            > >>>>>>>>>
                            > >>>>>>>>>
                            > >>>>>>>>>
                            > >>>>>>>>>> Satyam,
                            > >>>>>>>>>>
                            > >>>>>>>>>> Thanks for the tips and I got the input form render accordingly! Many thanks! However, I got stuck trying to change the label of the node - since one of the input value in the form will be the name of the node. I tried using node.getContentEl().textContent = 'new-value' and the label got reset afterward. Any suggestion!
                            > >>>>>>>>>>
                            > >>>>>>>>>>
                            > >>>>>>>>>> Regards,
                            > >>>>>>>>>> Norman
                            > >>>>>>>>>>
                            > >>>>>>>>>>
                            > >>>>>>>>>> --- In ydn-javascript@yahoogroups.com, Satyam <satyam@> wrote:
                            > >>>>>>>>>>
                            > >>>>>>>>>>
                            > >>>>>>>>>>
                            > >>>>>>>>>>
                            > >>>>>>>>>>
                            > >>>>>>>>>>
                            > >>>>>>>>>>> You can use HTMLNodes. They take a string containing whatever HTML you
                            > >>>>>>>>>>> wish. Your best option might be to load the HTMLNode with '<div
                            > >>>>>>>>>>> id="whatever"></div>' and then use YAHOO.util.Dom.get('whatever'); to
                            > >>>>>>>>>>> find the div and fill it up. You can also set all the div and the
                            > >>>>>>>>>>> complete form as an HTML string in just one go. Whatever you put in the
                            > >>>>>>>>>>> html property of an HTMLNode will be inserted into the innerHTML
                            > >>>>>>>>>>> property of the container for the node so either way will do. If all
                            > >>>>>>>>>>> you want in the node is contained within the form element, you won't
                            > >>>>>>>>>>> need the div. If the contents will be made of several elements, the
                            > >>>>>>>>>>> form plus something other siblings, it is better to wrap them all in a
                            > >>>>>>>>>>> single element, thus the div, just for safety.
                            > >>>>>>>>>>>
                            > >>>>>>>>>>> If you are using progressive enhancement and already have the markup for
                            > >>>>>>>>>>> the form, you can pick that DOM element remove it from the DOM tree at
                            > >>>>>>>>>>> its current location and insert it inside the 'whatever' div above.
                            > >>>>>>>>>>>
                            > >>>>>>>>>>> Two things to be aware of:
                            > >>>>>>>>>>>
                            > >>>>>>>>>>> The default action on clicking a TreeView node is toggling. That will
                            > >>>>>>>>>>> always happen when you click on the toggle icon no matter what, that's
                            > >>>>>>>>>>> what the icon is there for. It will also happen when clicking on the
                            > >>>>>>>>>>> content unless you tell it not to. To prevent that, listen to the
                            > >>>>>>>>>>> clickEvent, do whatever you need, if anything and return false.
                            > >>>>>>>>>>>
                            > >>>>>>>>>>> If you call any method that might produce a refresh of the node, any
                            > >>>>>>>>>>> event listeners attached to the form itself or any buttons or other
                            > >>>>>>>>>>> elements within will be lost. If you call tree.render more than once or
                            > >>>>>>>>>>> node.refresh your listener will turn deaf.
                            > >>>>>>>>>>>
                            > >>>>>>>>>>> Satyam
                            > >>>>>>>>>>>
                            > >>>>>>>>>>>
                            > >>>>>>>>>>> nkwok escribió:
                            > >>>>>>>>>>>
                            > >>>>>>>>>>>
                            > >>>>>>>>>>>
                            > >>>>>>>>>>>
                            > >>>>>>>>>>>
                            > >>>>>>>>>>>
                            > >>>>>>>>>>>> Satyam,
                            > >>>>>>>>>>>>
                            > >>>>>>>>>>>> Thanks for your quick reply! I am not sure I understood what you mean by "use a simple div to hold its contents"? Since DataTable does not support vertical display, I want to have an input form to replace the datatable in the example. Where do I put the "div" in the treeview? Any tip will be appreciated to get me started. Thanks again!
                            > >>>>>>>>>>>>
                            > >>>>>>>>>>>>
                            > >>>>>>>>>>>>
                            > >>>>>>>>>>>> Regards,
                            > >>>>>>>>>>>> Norman
                            > >>>>>>>>>>>>
                            > >>>>>>>>>>>>
                            > >>>>>>>>>>>> --- In ydn-javascript@yahoogroups.com, Satyam <satyam@> wrote:
                            > >>>>>>>>>>>>
                            > >>>>>>>>>>>>
                            > >>>>>>>>>>>>
                            > >>>>>>>>>>>>
                            > >>>>>>>>>>>>
                            > >>>>>>>>>>>>
                            > >>>>>>>>>>>>
                            > >>>>>>>>>>>>> Some widgets float over the ground floor of the page so they don't take
                            > >>>>>>>>>>>>> any space in it since they float above. All of the Container family is
                            > >>>>>>>>>>>>> meant to produce such floating containers. Panel and dialog are two
                            > >>>>>>>>>>>>> widgets from the same family. They are meant to be dragged about, shown
                            > >>>>>>>>>>>>> and hidden, resized and all this would leave a whole in the page
                            > >>>>>>>>>>>>> underneath if they took any space there. The DataTable is embedded
                            > >>>>>>>>>>>>> within the base of the page so it takes space there. If you want a
                            > >>>>>>>>>>>>> generic container to take up space in the base page, use a simple div to
                            > >>>>>>>>>>>>> hold its contents.
                            > >>>>>>>>>>>>>
                            > >>>>>>>>>>>>> Satyam
                            > >>>>>>>>>>>>>
                            > >>>>>>>>>>>>> nkwok escribió:
                            > >>>>>>>>>>>>>
                            > >>>>>>>>>>>>>
                            > >>>>>>>>>>>>>
                            > >>>>>>>>>>>>>
                            > >>>>>>>>>>>>>
                            > >>>>>>>>>>>>>
                            > >>>>>>>>>>>>>
                            > >>>>>>>>>>>>>> Hello,
                            > >>>>>>>>>>>>>>
                            > >>>>>>>>>>>>>> I found the excellent example "Tree View with DataTables as nodes) by Satyam. Is it possible to have other widget as node other than DataTable? I tried both "dialog" and "panel" widgets but they did not work correctly - meaning it rendered but overlapped with the next tree node. I was using the constructor like:
                            > >>>>>>>>>>>>>>
                            > >>>>>>>>>>>>>> new YAHOO.widget.Panel("panel", {width: "300px", constraintoviewport: false, visible: false});
                            > >>>>>>>>>>>>>>
                            > >>>>>>>>>>>>>> With DataTable, there is no overlap and the next tree node will expand accordingly. Is there some others parameters that I need for the Panel constructor in order for the treeview to render correctly?
                            > >>>>>>>>>>>>>>
                            > >>>>>>>>>>>>>>
                            > >>>>>>>>>>>>>> Thanks,
                            > >>>>>>>>>>>>>> Norman
                            > >>>>>>>>>>>>>>
                            > >>>>>>>>>>>>>>
                            > >>>>>>>>>>>>>>
                            > >>>>>>>>>>>>>>
                            > >>>>>>>>>>>>>>
                            > >
                            > >
                            > > ------------------------------------
                            > >
                            > > Yahoo! Groups Links
                            > >
                            > >
                            > >
                            > > ------------------------------------------------------------------------
                            > >
                            > >
                            > > No virus found in this incoming message.
                            > > Checked by AVG - www.avg.com
                            > > Version: 8.5.285 / Virus Database: 270.11.38/2037 - Release Date: 04/02/09 06:09:00
                            > >
                            > >
                            >
                          Your message has been successfully submitted and would be delivered to recipients shortly.