5 Replies Latest reply on Aug 5, 2011 8:58 AM by Amy Blankenship

    Bind one column to two fields in spark data grid

    mikmiki

      hi,

      igave a spark datagrid that uses a GridItemRenderer with a RichText label display.

      the RichText column needs to display two or more fields in diffrenet sizes and colors.

      how can i bind the column to two or more fields?

      any help would be great.

        • 1. Re: Bind one column to two fields in spark data grid
          Amy Blankenship Level 4

          You should be able to use a labelFunction to wrap appropriate formatting around the various values.  For example:

           

          private function formatLabel(item:Object, column:GridColumn):String {

               var result:String = '<span fontSize="12">'+item.someField+'</span>';

               result += '<span color="#FF0000">'+item.someOtherField+'</span>';

               return result;

          }

          • 2. Re: Bind one column to two fields in spark data grid
            mikmiki Level 1

            not working.it's just displaying the column as : '<span fontSize="12">'+somedata+'</span>';

                 result += '<span color="#FF0000">'+someOtherdata+'</span>';

            • 3. Re: Bind one column to two fields in spark data grid
              Amy Blankenship Level 4

              That looks like you didn't set up the labelFunction properly in your datagrid column.  Can you post your actual code?

              • 4. Re: Bind one column to two fields in spark data grid
                mikmiki Level 1

                yes.

                my label function is:

                 

                 

                private function list_labelFunc(item:Object, column:GridColumn):String

                {

                 

                 

                var result:String = '<span fontSize="12">'+item.InstrumentName+'</span>';

                 

                result +=

                '<span color="#FF0000">'+item.SystemName+'</span>';

                 

                 

                return result;

                 

                 

                 

                /* return markupSystem.replace("INSTRUMENTNAME",data.InstrumentName).replace("SYSTEMNAME",data.Syst emName)); */

                 

                }

                 

                 

                my grid column defenition  is:

                 

                 

                <s:GridColumn id="colName" labelFunction="list_labelFunc" headerText="Name" itemRenderer="renderers.OpenPositionsItemRenderer" >

                 

                and my item renderer is:

                <s:GridItemRenderer

                 

                 

                xmlns:fx="http://ns.adobe.com/mxml/2009"

                xmlns:s="

                library://ns.adobe.com/flex/spark"

                xmlns:mx="

                library://ns.adobe.com/flex/mx" clipAndEnableScrolling="true">

                 

                 

                 

                <fx:Script>

                <![CDATA[

                 

                import mx.collections.ArrayCollection;

                 

                import spark.components.Grid;

                 

                import flashx.textLayout.elements.TextFlow;

                 

                import spark.utils.TextFlowUtil;

                 

                 

                var markupSystem:String = "<p>INSTRUMENTNAME</p><p>SYSTEMNAME</p>";

                 

                override public function prepare(hasBeenRecycled:Boolean):void {

                lblData.text = data[column.dataField]

                }

                 

                 

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

                {

                 

                var myOwner = super.grid as Grid;

                 

                super.data = value;

                 

                 

                var myOwnerDataProvider:ArrayCollection = myOwner.dataProvider as ArrayCollection;

                 

                 

                var myIndex:int = myOwnerDataProvider.getItemIndex( data );

                 

                 

                 

                var i : uint;

                 

                if(myOwner.selectedIndex !=myIndex)

                {

                 

                if(myIndex % 2 == 0)

                {

                 

                c.color=0x525252;

                 

                }

                 

                else

                {

                c.color=0x2C2C2C;

                }

                }

                 

                else

                 

                {

                c.color=0x355180;

                }

                 

                 

                if(column.columnIndex==1)

                {

                 

                var flow:TextFlow = TextFlowUtil.importFromString(markupSystem.replace("INSTRUMENTNAME",data.InstrumentName).replace("SYSTEMNAME",data.SystemName));

                lblData.textFlow = flow;

                 

                }

                 

                }

                 

                 

                 

                ]]>

                 

                </fx:Script>

                 

                <s:Rect id="rect" top="0" bottom="0" right="0" left="0">

                 

                <s:fill>

                 

                <s:SolidColor id="c" color="#2C2C2C"/>

                 

                </s:fill>

                 

                </s:Rect>

                 

                <s:RichText id="lblData" textAlign="center" color="#DADADA" alpha="0.5" top="20" left="20"/>

                </s:GridItemRenderer>

                 

                • 5. Re: Bind one column to two fields in spark data grid
                  Amy Blankenship Level 4

                  Try changing

                   

                  lblData.text = data[column.dataField]

                   

                  to

                   

                  lblData.textFlow = TextFlowUtil.importFromXML(XML(column.dataField));

                   

                  and also changing the label function to wrap the whole return in <p></p> so that it will evaluate as valid XML

                   

                  HTH;

                   

                  Amy