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

Re: Treeview with other widget instead of DataTable

Expand Messages
  • 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 1 of 17 , Mar 31, 2009
      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 2 of 17 , Mar 31, 2009
        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 3 of 17 , Apr 1, 2009
          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 4 of 17 , Apr 1, 2009
            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 5 of 17 , Apr 1, 2009
              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 6 of 17 , Apr 1, 2009
                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 7 of 17 , Apr 2, 2009
                  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 8 of 17 , Apr 2, 2009
                    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 9 of 17 , Apr 2, 2009
                      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 10 of 17 , Apr 2, 2009
                        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 11 of 17 , Apr 2, 2009
                          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.