4 Replies Latest reply on Mar 23, 2011 4:14 AM by EvyatarBH

    Wordwrap in DataGrid

    Ameya Mogare

      Hi,

       

      I want to implement DataGrid control that should: -

       

      1. wordwrap the text inside the cell (no horizontal scrollbars) (note skill5 in Array)

      2. put a vertical scrollbar when no. of entries exceed 5

      3. hide column headers

       

      I have following initial code: -

       

          <mx:Script>
              <![CDATA[
                  import mx.collections.ArrayCollection;

       

                  [Bindable]
                  public var MySkills : ArrayCollection = new ArrayCollection( [
                        {label:"skill1", MySkill:"SAP", Prof:"Expert"},
                        {label:"skill2", MySkill:"JAVA", Prof:"Expert"},
                        {label:"skill3", MySkill:".NET", Prof:"BEGINER"},
                        {label:"skill4", MySkill:"ORACLE", Prof:"BEGINER"},
                        {label:"skill5", MySkill:"WEB SERVICES4 ABCDEFGH", Prof:"EXPERT"},
                        {label:"skill6", MySkill:"Adobe Flex", Prof:"BEGINER"}
                        ]);
              ]]>
          </mx:Script>

       

            <mx:DataGrid id="myGrid" dataProvider="{MySkills}">
                   <mx:columns>
                       <mx:DataGridColumn  dataField="MySkill"/>
                       <mx:DataGridColumn dataField="Prof" />
                   </mx:columns>
             </mx:DataGrid>        

       

       

      Please guide/help.

       

      Thanks and regards,

      Amey

        • 1. Re: Wordwrap in DataGrid
          senthil s

            Try this code

           

          place this code in datagrid header:

           

          1.rowcount"{MySkills.length}"

          if u want to set 5 statically means use rowcount="5"  otherwise dont use rowcount nd on verticalscrollpolicy="true";

           

          2.showHeader"true"

          3.verticalscrollpolicy="true"

           

          <mx:DataGrid id="myGrid"   dataProvider="{MySkills}">
                       <mx:columns>
                           <mx:DataGridColumn  dataField="MySkill"/>
                           <mx:DataGridColumn dataField="Prof" />
                       </mx:columns>
                 </mx:DataGrid>       

          • 2. Re: Wordwrap in DataGrid
            senthil s Level 1

            if u want to hide datagrid header use showHeader="false".

             

             

            Thanks&Regards,

            senthil

            • 3. Re: Wordwrap in DataGrid
              senthil s Level 1

                Use Item renderer concept:

               

               

               

              <mx:DataGrid id="myGrid" dataProvider="{MySkills}">
                           <mx:columns>

                               <mx:DataGridColumn  dataField="MySkill">

              <mx:itemRenderer>

               

               

               

              <fx:Component>

               

               

               

              <mx:HBox horizontalScrollPolicy="off">

               

               

              <fx:Script>

               

              <![CDATA[

               

               

               

              override public function set data(value:Object):void

              {

               

               

              super.data=value;

               

              Txt_Area.text=

              data.MySkill;

               

              }

               

              ]]>

               

              </fx:Script>

               

               

               

              <mx:TextArea id=Txt_Area  wordwrap="true"  width="10"/>

               

               

               

              </mx:HBox>

               

               

               

              </fx:Component>

               

               

               

              </mx:itemRenderer>

               

               

               

              </mx:DataGridColumn>

               

               


                               <mx:DataGridColumn dataField="Prof" />
                           </mx:columns>
                     </mx:DataGrid>       

               

              1 person found this helpful
              • 4. Re: Wordwrap in DataGrid
                EvyatarBH Level 3

                Although this is marked as Answered, I think there's a much simpler and better solution by setting the following DataGrid properties -

                variableRowHeight="true"

                wordWrap="true"

                 

                Good luck!