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

Treeview with other widget instead of DataTable

Expand Messages
  • nkwok
    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
    Message 1 of 17 , Mar 29, 2009
    • 0 Attachment
      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
      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
      Message 2 of 17 , Mar 30, 2009
      • 0 Attachment
        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
        >
        >
      • nkwok
        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
        Message 3 of 17 , Mar 30, 2009
        • 0 Attachment
          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
          > >
          > >
          >
        • Satyam
          You can use HTMLNodes. They take a string containing whatever HTML you wish. Your best option might be to load the HTMLNode with
          Message 4 of 17 , Mar 30, 2009
          • 0 Attachment
            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
            >
            >
          • nkwok
            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
            Message 5 of 17 , Mar 30, 2009
            • 0 Attachment
              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
              > >
              > >
              >
            • Satyam
              Not sure I understand you. Some random thoughts that might be related: TextNodes have a label property, HTMLNodes don t. Changing the label property on a
              Message 6 of 17 , Mar 31, 2009
              • 0 Attachment
                Not sure I understand you. Some random thoughts that might be related:
                TextNodes have a label property, HTMLNodes don't. Changing the label
                property on a TextNode does not automatically refresh the UI, not until
                the node is refreshed. You either call the refresh method or update the
                DOM yourself.

                If it is a TextNode, instead of:

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

                do:

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

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

                Satyam


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

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


                  Regards,
                  Norman


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

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

                    Satyam


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

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

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

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

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


                      Regards,
                      Norman


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

                        Thanks

                        Satyam


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

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


                          Regards,
                          Norman

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

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

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

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




                            Regards,
                            Norman

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

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

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

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

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

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

                              Satyam


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

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

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

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

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

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


                                Regards,
                                Norman

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

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

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

                                  So, you either do:

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

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

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



                                  Any reason for you to use 2.6 instead of 2.7?

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

                                  Satyam


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

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

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

                                    In fact, this code is pointless:

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

                                    var k = node.data.key;

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

                                    Satyam


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

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

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

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

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

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

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


                                      Regards,
                                      Norman

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