8 Replies Latest reply on Dec 24, 2009 11:30 AM by michaelflex1980

    ItemRenderer overides the DataGrid styles

    michaelflex1980

      Hi,

       

      I have a CSS file where I have defined the styles for DataGrid like following:

       

      DataGrid
      {
            selection-color: #243E4F;
            text-selected-color: #FFFFFF;
            alternating-item-colors: #DCE3E8, #FFFFFF;
      }

       

      I have a Datagrid in my mxml component page. I use an ItemRenderer for the html text in one of my datagrid column.

       

      <mx:DataGridColumn dataField="AccountName" headerText="Name" width="122">
                      <mx:itemRenderer>
                        <mx:Component>
                            <mx:Text selectable="true" htmlText="{data.AccountName}" width="100%"/>
                      </mx:Component>
                      </mx:itemRenderer>

      </mx:DataGridColumn>

       

      But now when I select any of the DataGridColumn 'AccountName', the font color (ie. text-selected-color )  in this cell turns black.

       

      Please help me to resolve this issue?

       

      Thanks in advance,

      Micheal

        • 1. Re: ItemRenderer overides the DataGrid styles
          saisri2k2 Level 4

          Try putting the itemRenderer in a container( Canvas, Hbox etc.,)

           

          I have a few questions, I've never implemented anything like what you have done.. Your purpose of putting a Text is to make it editable rite? if so why not make the DataGrid Editable=true? that would work the same way.. without the itemrenderers.

          • 2. Re: ItemRenderer overides the DataGrid styles
            michaelflex1980 Level 1

            Hi,

             

            Thank you for your quick response.

             

            My DataGrid is inside a HBox.

             

            //my component mxml

             

            <?xml version="1.0" encoding="utf-8"?>
            <mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" >

             

                <mx:Script>
                    <![CDATA[
                        import mx.controls.Alert;
                       
                        import mx.collections.ArrayCollection;
                        [Bindable]
                        public var cashData:ArrayCollection = new ArrayCollection();
                       
                        private function formatBalance(item:Object, column:DataGridColumn):String
                        {
                            return item.Balance.currencyCode+''+item.Balance.amount;
                        }
                       
                       
                       
                    ]]>
                </mx:Script>
               
                <!--<mx:CurrencyFormatter id="currFmt" currencySymbol="$"/>-->
               
                <mx:DataGrid width="100%" height="100%" id="gridID" dataProvider="{cashData}" showHeaders="false" verticalGridLines="true">
                    <mx:columns>
                       
                        <mx:DataGridColumn dataField="AccountName" headerText="Name" width="122">
                           
                            <mx:itemRenderer>
                              <mx:Component>
                                  <mx:Text selectable="true" htmlText="{data.AccountName}" width="100%"/>
                            </mx:Component>
                            </mx:itemRenderer>
                        </mx:DataGridColumn>
                       
                        <mx:DataGridColumn dataField="Balance" headerText="Balance" labelFunction="formatBalance" width="122" textAlign="right"/>
                    </mx:columns>
                </mx:DataGrid>

             

            </mx:VBox>

             

             

            Actually I set the dataprovider from PureMVC mediator. You can see that column 'AccountName' is an 'htmltext'. This value will be a link not a editable text.

             

            ie. <span class="xyz"><a href= "someurl.do?x=20106650&amp;y=10232371"><strong>details</strong></a><br/><span class="caption">Intranet Card</span></span>

             

             

             

            Thanks,

            Michael

            • 4. Re: ItemRenderer overides the DataGrid styles
              michaelflex1980 Level 1

              Hi Saisri,

               

              Did you post the reply? I cant see anything...

               

              Thanks,

              Michael.

              • 5. Re: ItemRenderer overides the DataGrid styles
                saisri2k2 Level 4

                Hey michael, Even i've implemented the same stylesheet on my DataGrid, it shows the same effect like it has shown in yours, So, i've googled it.. it looks like the itemrenderer will not respond to any styles that the dataGrid has, you have to explicitly set the style of the ItemRenderer using your programming logic.(http://www.janus-flash.com/help/index.html?flex_set_style_for_inline_item.html) i've understood that from this post . I'll still do some research. I'll post if any progress.

                • 7. Re: ItemRenderer overides the DataGrid styles
                  michaelflex1980 Level 1

                  Thank you very much for the information..

                   

                   

                  Thanks,

                  Michael

                  • 8. Re: ItemRenderer overides the DataGrid styles
                    michaelflex1980 Level 1

                    Hi,

                     

                    I looked into this site:

                     

                    http://www.janus-flash.com/help/index.html?flex_set_style_for_inline_item.html.

                     

                    I applied like the following.

                     

                    ....................

                     

                    <mx:Style>
                           
                            DataGrid.myStyle
                            {
                                selection-color: #243E4F;
                                  text-selected-color: #FFFFFF;
                                  alternating-item-colors: #DCE3E8, #FFFFFF;
                            }
                           
                           
                        </mx:Style>

                     

                    .....................

                     

                    <mx:DataGridColumn dataField="AccountName" headerText="Name" width="122">
                                   
                                    <mx:itemRenderer>
                                      <mx:Component className="myStyle">
                                          <mx:Text selectable="true" htmlText="{data.AccountName}" width="100%"/>
                                    </mx:Component>
                                    </mx:itemRenderer>


                                </mx:DataGridColumn>
                                   

                    --

                     

                     

                    It didnt work for me. The style which i applied for " text-selected-color: #FFFFFF; " is still not working. It shows black for this cell.

                     

                     

                    Do you see anything wrong with this code? If it is there, Please help me by writing some code. Its very urgent for me.

                     

                     

                    Thanks,

                    Michael.