3 Replies Latest reply on Aug 11, 2009 10:58 PM by Chandru.BS

    Workaround for ComboBox Horizontal Scrolling Needed

    Chandru.BS

      Hi ,

       

      I have a combobox which contains very long strings.(actually 3 strings(name of size 10 chars,type of size 10 chars, and 3rd string containing a list of abt 60 numbers)

      But on selection, the width becomes too much and goes out of the screen.

      I dont want to set max width becoz there is a requirement for the user to be able to see the contents of the whole string.

       

      I learnt that there is no Horizontal scrolling option for the dropdown of the combobox.

       

      So i'd like to know if the following is possible.

       

      display only the
      name and type in the dropdown. and when the mouse is hovered over a particular item, show  a vertical list of 60numbers corresponding to the item being currently hovered.

       

      is such a thing possible? or can u suggest a better workaround?

       

      one option is to select an item from the dropdownlist and then use alert.show() to show the list of all numbers. but tat seems very crude way of doin it.

       

      Thanks.

        • 1. Re: Workaround for ComboBox Horizontal Scrolling Needed
          Chandru.BS Level 1

          i made a small change.

           

          now in the drop down i display only the name and type. and after the user selects any item from the list, and hovers over the combobox, it shows the list of numbers as a tool tip.

           

          this is very close to the functionality i was lookin for.

           

          I just want to know one thing now..

           

          how do i get a tool tip for each of the items in the drop down( and not just the  tooltip for the whole combobox)??

          • 2. Re: Workaround for ComboBox Horizontal Scrolling Needed
            Gregory Lafrance Level 6

            This code works fairly well using an itemRenderer, though you may need to tweak it for your situation.

             

            If this post answers your question or helps, please mark it as such.

             

            <?xml version="1.0"?>
            <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
              <mx:Script>
                <![CDATA[
                  import mx.collections.ArrayCollection;
                  
                  [Bindable] private var ac:ArrayCollection = new ArrayCollection([
                    {name: "Test Name One", type: "Test Type One", numbers: "2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 62, 64, 66, 68, 70, 72, 74, 76, 78, 80, 82, 84, 86, 88, 90, 92, 94, 96, 98, 100, 102, 104, 106, 108, 110, 112, 114, 116, 118, 120"},
                    {name: "Test Name Two", type: "Test Type Two", numbers: "5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 95, 100, 105, 110, 115, 120, 125, 130, 135, 140, 145, 150, 155, 160, 165, 170, 175, 180, 185, 190, 195, 200, 205, 210, 215, 220, 225, 230, 235, 240, 245, 250, 255, 260, 265, 270, 275, 280, 285, 290, 295, 300"},
                    {name: "Test Name Three", type: "Test Type Three", numbers: "100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100, 1200, 1300, 1400, 1500, 1600, 1700, 1800, 1900, 2000, 2100, 2200, 2300, 2400, 2500, 2600, 2700, 2800, 2900, 3000, 3100, 3200, 3300, 3400, 3500, 3600, 3700, 3800, 3900, 4000, 4100, 4200, 4300, 4400, 4500, 4600, 4700, 4800, 4900, 5000, 5100, 5200, 5300, 5400, 5500, 5600, 5700, 5800, 5900, 6000"},
                  ]);
                  
                  private function createLabel(data:Object):String{
                    return data.name + " : " + data.type;
                  }
                ]]>
              </mx:Script>
              <mx:ComboBox id="cbx" dataProvider="{ac}" labelFunction="createLabel" 
                width="400">
                <mx:itemRenderer>
                  <mx:Component>
                    <mx:VBox>
                      <mx:Text text="{data.name + ' : ' + data.type}"/>
                      <mx:TextArea text="{data.numbers}" 
                        width="{outerDocument.cbx.width-20}"
                        height="100"/>
                    </mx:VBox>
                  </mx:Component>
                </mx:itemRenderer>
              </mx:ComboBox>
            </mx:Application>
            
            • 3. Re: Workaround for ComboBox Horizontal Scrolling Needed
              Chandru.BS Level 1

              Hey Greg,

               

              Thanks a ton for ur reply.

              U just gave me the exact functionality i was looking for.

               

              now i learnt how to use the item renderer, thanks to u. now i can put almost anything in the items of the comboBox..

              so wat i did was just make each item have label as "name:type:numbers" and put them in a HBox.

              So now my dropdwon will be small, and each item will have a horizontal scroll.

              Isn't aesthetically pleasing.. but this is wat i originally wanted( horizontal scroller for comboBox).