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

Regarding custom icon tree view

Expand Messages
  • mohan kumar
    Hi, we are using custom icon tree view.I want to know is it possible to have two or more custom icons for each node in the tree.If it is possible what is the
    Message 1 of 5 , Jan 30, 2009
    • 0 Attachment
      Hi,

      we are using custom icon tree view.I want to know is it possible to have two or more custom icons for each node in the tree.If it is possible what is the solution for it.

      Thanks,
      Mohan
    • Satyam
      If you look at treeview-skin.css you can see that the definition for one of the toggle icons is as follows: .ygtvlp { width:18px; height:22px; cursor:pointer ;
      Message 2 of 5 , Jan 30, 2009
      • 0 Attachment
        If you look at treeview-skin.css you can see that the definition for one
        of the toggle icons is as follows:

        .ygtvlp {
        width:18px; height:22px;
        cursor:pointer ;
        background: url(treeview-sprite.gif) 0 -2400px no-repeat;
        }*
        *
        That is the one for the last node in a branch with a plus sign ('lp').

        You could add your own className to those already used by the TreeView
        for each node as it is being created or at any time later:

        YAHOO.util.Dom.addClass(newNode.getToggleEl(),'iconSet1');

        Then you could add style definitions like the one above for each icon set:

        .ygtvlp.iconSet1 {
        width:18px; height:22px;
        cursor:pointer ;
        background: url(iconset1-lp.gif) no-repeat;
        }

        There is no space in between .ygtvlp and .iconSet1. You can either
        make a sprite with your various icon sets, which is what TreeView does,
        thus the offsets in the background position, or you can use different
        individual icons as in the example.

        Satyam

        **

        mohan kumar wrote:
        > Hi,
        >
        > we are using custom icon tree view.I want to know is it possible to have two or more custom icons for each node in the tree.If it is possible what is the solution for it.
        >
        > Thanks,
        > Mohan
        >
        >
        >
        >
        > ------------------------------------
        >
        > Yahoo! Groups Links
        >
        >
        >
        > ------------------------------------------------------------------------
        >
        >
        > No virus found in this incoming message.
        > Checked by AVG - www.avg.com
        > Version: 8.0.233 / Virus Database: 270.10.15/1924 - Release Date: 01/29/09 07:13:00
        >
        >
      • mohan kumar
        Hi, I did not understand reply for my question.I want to expalin my question in more detail. We are using yui custom icon treeview in our product. we want to
        Message 3 of 5 , Feb 2, 2009
        • 0 Attachment
          Hi,

          I did not understand reply for my question.I want to expalin my question in more detail.

          We are using yui custom icon treeview in our product.

          we want to show multiple icons for each node.

          I attached screen shots of our current tree view and required tree.

          In our current tree we are showing only one icon for each node.we want to multiple icons for each node.

          Thanks,
          Mohan




          --- On Fri, 1/30/09, Satyam <satyam@...> wrote:

          > From: Satyam <satyam@...>
          > Subject: Re: [ydn-javascript] Regarding custom icon tree view
          > To: ydn-javascript@yahoogroups.com
          > Date: Friday, January 30, 2009, 8:11 AM
          > If you look at treeview-skin.css you can see that the
          > definition for one
          > of the toggle icons is as follows:
          >
          > .ygtvlp {
          > width:18px; height:22px;
          > cursor:pointer ;
          > background: url(treeview-sprite.gif) 0 -2400px
          > no-repeat;
          > }*
          > *
          > That is the one for the last node in a branch with a plus
          > sign ('lp').
          >
          > You could add your own className to those already used by
          > the TreeView
          > for each node as it is being created or at any time later:
          >
          > YAHOO.util.Dom.addClass(newNode.getToggleEl(),'iconSet1');
          >
          > Then you could add style definitions like the one above for
          > each icon set:
          >
          > .ygtvlp.iconSet1 {
          > width:18px; height:22px;
          > cursor:pointer ;
          > background: url(iconset1-lp.gif) no-repeat;
          > }
          >
          > There is no space in between .ygtvlp and .iconSet1. You
          > can either
          > make a sprite with your various icon sets, which is what
          > TreeView does,
          > thus the offsets in the background position, or you can use
          > different
          > individual icons as in the example.
          >
          > Satyam
          >
          > **
          >
          > mohan kumar wrote:
          > > Hi,
          > >
          > > we are using custom icon tree view.I want to know is
          > it possible to have two or more custom icons for each node
          > in the tree.If it is possible what is the solution for it.
          > >
          > > Thanks,
          > > Mohan
          > >
          > >
          > >
          > >
          > > ------------------------------------
          > >
          > > Yahoo! Groups Links
          > >
          > >
          > >
          > >
          > ------------------------------------------------------------------------
          > >
          > >
          > > No virus found in this incoming message.
          > > Checked by AVG - www.avg.com
          > > Version: 8.0.233 / Virus Database: 270.10.15/1924 -
          > Release Date: 01/29/09 07:13:00
          > >
          > >
        • mohan kumar
          ... question in more detail. ... want to multiple icons for each node.
          Message 4 of 5 , Feb 2, 2009
          • 0 Attachment
            --- In ydn-javascript@yahoogroups.com, mohan kumar <tmk_mohankumar@...>
            wrote:
            >
            > Hi,
            >
            > I did not understand reply for my question.I want to expalin my
            question in more detail.
            >
            > We are using yui custom icon treeview in our product.
            >
            > we want to show multiple icons for each node.
            >
            > I attached screen shots of our current tree view and required tree.
            >
            > In our current tree we are showing only one icon for each node.we
            want to multiple icons for each node.
            >
            > Thanks,
            > Mohan
            >
            >
            >
            >
            > --- On Fri, 1/30/09, Satyam satyam@... wrote:
            >
            > > From: Satyam satyam@...
            > > Subject: Re: [ydn-javascript] Regarding custom icon tree view
            > > To: ydn-javascript@yahoogroups.com
            > > Date: Friday, January 30, 2009, 8:11 AM
            > > If you look at treeview-skin.css you can see that the
            > > definition for one
            > > of the toggle icons is as follows:
            > >
            > > .ygtvlp {
            > > width:18px; height:22px;
            > > cursor:pointer ;
            > > background: url(treeview-sprite.gif) 0 -2400px
            > > no-repeat;
            > > }*
            > > *
            > > That is the one for the last node in a branch with a plus
            > > sign ('lp').
            > >
            > > You could add your own className to those already used by
            > > the TreeView
            > > for each node as it is being created or at any time later:
            > >
            > > YAHOO.util.Dom.addClass(newNode.getToggleEl(),'iconSet1');
            > >
            > > Then you could add style definitions like the one above for
            > > each icon set:
            > >
            > > .ygtvlp.iconSet1 {
            > > width:18px; height:22px;
            > > cursor:pointer ;
            > > background: url(iconset1-lp.gif) no-repeat;
            > > }
            > >
            > > There is no space in between .ygtvlp and .iconSet1. You
            > > can either
            > > make a sprite with your various icon sets, which is what
            > > TreeView does,
            > > thus the offsets in the background position, or you can use
            > > different
            > > individual icons as in the example.
            > >
            > > Satyam
            > >
            > > **
            > >
            > > mohan kumar wrote:
            > > > Hi,
            > > >
            > > > we are using custom icon tree view.I want to know is
            > > it possible to have two or more custom icons for each node
            > > in the tree.If it is possible what is the solution for it.
            > > >
            > > > Thanks,
            > > > Mohan
            > > >
            > > >
            > > >
            > > >
            > > > ------------------------------------
            > > >
            > > > Yahoo! Groups Links
            > > >
            > > >
            > > >
            > > >
            > >
            ------------------------------------------------------------------------
            > > >
            > > >
            > > > No virus found in this incoming message.
            > > > Checked by AVG - www.avg.com
            > > > Version: 8.0.233 / Virus Database: 270.10.15/1924 -
            > > Release Date: 01/29/09 07:13:00
            > > >
            > > >
            >
          • Satyam
            My apolocies, I didn t understand the question, I thought you wanted different sets of icons for each node and what you had asked for was multiples
            Message 5 of 5 , Feb 2, 2009
            • 0 Attachment
              My apolocies, I didn't understand the question, I thought you wanted
              different sets of icons for each node and what you had asked for was
              multiples simultaneous icons for each node.

              For the expand/collapse icons, you can take the style sheet and images
              from the Menu-style example. Ignore the code, you don't need that for
              your code.

              For the multiple icons, then, you would have to use HTMLNodes, each
              loaded with the required <img> tags for the icons required.

              Actually, there are two ways to do this. You can use <img> tags in each
              node or you can use CSS to set different background images for each
              icon, which is what YUI often does with images such as the toggle icons
              for the default TreeView.

              You could set up a node like this:

              var newNode = YAHOO.widget.HTMLNode({html:'<div class="icon1"></div><div
              class="icon2"></div>Event Incidents - 5',parentNode);
              YAHOO.util.Dom.addClass(newNode.getContentEl(),'bullseyefolder');
              YAHOO.util.Dom.addClass(newNode.getContentEl(),'ok');

              Then, you can define the corresponding styles as:

              .bullseyefolder .icon1 {
              background: transparent url( .... );
              width: 20px;
              height:18px;
              float:left;
              }

              .ok .icon2 {
              background: transparent url( .... );
              width: 20px;
              height:18px;
              float:left;
              }

              By simply changing the style (Dom.replaceClass('ok','alert')) on the
              node's content, the images change according to the stylesheet declaration.

              Satyam





              mohan kumar wrote:
              > Hi,
              >
              > I did not understand reply for my question.I want to expalin my question in more detail.
              >
              > We are using yui custom icon treeview in our product.
              >
              > we want to show multiple icons for each node.
              >
              > I attached screen shots of our current tree view and required tree.
              >
              > In our current tree we are showing only one icon for each node.we want to multiple icons for each node.
              >
              > Thanks,
              > Mohan
              >
              >
              >
              >
              > --- On Fri, 1/30/09, Satyam <satyam@...> wrote:
              >
              >
              >> From: Satyam <satyam@...>
              >> Subject: Re: [ydn-javascript] Regarding custom icon tree view
              >> To: ydn-javascript@yahoogroups.com
              >> Date: Friday, January 30, 2009, 8:11 AM
              >> If you look at treeview-skin.css you can see that the
              >> definition for one
              >> of the toggle icons is as follows:
              >>
              >> .ygtvlp {
              >> width:18px; height:22px;
              >> cursor:pointer ;
              >> background: url(treeview-sprite.gif) 0 -2400px
              >> no-repeat;
              >> }*
              >> *
              >> That is the one for the last node in a branch with a plus
              >> sign ('lp').
              >>
              >> You could add your own className to those already used by
              >> the TreeView
              >> for each node as it is being created or at any time later:
              >>
              >> YAHOO.util.Dom.addClass(newNode.getToggleEl(),'iconSet1');
              >>
              >> Then you could add style definitions like the one above for
              >> each icon set:
              >>
              >> .ygtvlp.iconSet1 {
              >> width:18px; height:22px;
              >> cursor:pointer ;
              >> background: url(iconset1-lp.gif) no-repeat;
              >> }
              >>
              >> There is no space in between .ygtvlp and .iconSet1. You
              >> can either
              >> make a sprite with your various icon sets, which is what
              >> TreeView does,
              >> thus the offsets in the background position, or you can use
              >> different
              >> individual icons as in the example.
              >>
              >> Satyam
              >>
              >> **
              >>
              >> mohan kumar wrote:
              >>
              >>> Hi,
              >>>
              >>> we are using custom icon tree view.I want to know is
              >>>
              >> it possible to have two or more custom icons for each node
              >> in the tree.If it is possible what is the solution for it.
              >>
              >>> Thanks,
              >>> Mohan
              >>>
              >>>
              >>>
              >>>
              >>> ------------------------------------
              >>>
              >>> Yahoo! Groups Links
              >>>
              >>>
              >>>
              >>>
              >>>
              >> ------------------------------------------------------------------------
              >>
              >>> No virus found in this incoming message.
              >>> Checked by AVG - www.avg.com
              >>> Version: 8.0.233 / Virus Database: 270.10.15/1924 -
              >>>
              >> Release Date: 01/29/09 07:13:00
              >>
              >>>
              >
              >
              >
              > ------------------------------------
              >
              > Yahoo! Groups Links
              >
              >
              >
              >
              > ------------------------------------------------------------------------
              >
              >
              > No virus found in this incoming message.
              > Checked by AVG - www.avg.com
              > Version: 8.0.233 / Virus Database: 270.10.16/1929 - Release Date: 01/31/09 20:03:00
              >
              >
            Your message has been successfully submitted and would be delivered to recipients shortly.