7 Replies Latest reply on Aug 28, 2009 7:43 AM by Flex harUI

    how to change the background color of a cell in datagrid using flex3

    zdevu Level 1

      i want to change the background color of a cell.....how can i achieve this.....and also i want to know how a spacing cane be done between cells in a datagrid...plzzz help me???

        • 1. Re: how to change the background color of a cell in datagrid using flex3
          Barna Biro Level 3

          I don't think you can do this with the default DataGrid. You might need to extend DataGrid and implement the desired feature.

          • 2. Re: how to change the background color of a cell in datagrid using flex3
            zdevu Level 1

            can i do this using item renderer and plzz tell me how a spacing can be done between cells?? is it possible

            • 3. Re: how to change the background color of a cell in datagrid using flex3
              Barna Biro Level 3

              zdevu wrote:

               

              can i do this using item renderer and plzz tell me how a spacing can be done between cells?? is it possible

               

              I don't think that using an item renderer would make any difference ( but if you also want to use a renderer then go ahead ). If I'm not mistaking then there is not public method or property that would let you talk dirrectly to a certain cell and modify it if needed. The more "sure solution" is to extended the DataGrid component ( as I have already mentioned ) and implement the desired functionality.

               

              The same applies to cell spacing. I'm not aware of any public method or property that would let you specify the spacing ( but to make sure that there is no such property or method, surf this page: http://livedocs.adobe.com/flex/3/langref/mx/controls/DataGrid.html ), so this feature should also be implemented by extending the DataGrid.

              • 4. Re: how to change the background color of a cell in datagrid using flex3
                flex2008 Level 3

                You want to change the background color of a single cell or the background color of all the cells.??
                If it is the first case,you would have to go with a custom item renderer
                If it is the second case,you can use backgroundcolor and backgroundalpha styles.

                • 5. Re: how to change the background color of a cell in datagrid using flex3
                  Niranjan_swain Level 1

                  Hai, u can do this this only item renderer.

                   

                  there is different situation. if u want color cell wise means one row can different color then u take itemrenderer column wise otherwise u do it on the datagrid.

                   

                  the main thing if u use static color then it is declar static but u want color dynamically means according to cell value at that time u write logic in the renderer block and check ur cell value according to that u give color.

                   

                  I think this will help u. if u want any more or required example let me know.

                   

                  if u sucess then give me mark

                   

                  Thanks

                  Niranjan

                  • 6. Re: how to change the background color of a cell in datagrid using flex3
                    Andrew Rosewarn Level 3

                    The only way I can see to do this is to use an item renderer for your cells.  This is really scruffy and would need tyding up, and maybe with a little more time could do better or someone else may have an idea but none the less this works.

                     

                    Define a custom component as below;

                     

                    This has logic to see what the value of the data is proveided by the dataprovider for the row, and if it matches the conditions in this case is equal to 5 sets the background color.

                     

                    <?xml version="1.0" encoding="utf-8"?>
                    <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="88" height="26" dataChange="doColor()" borderColor="#000000" borderStyle="solid"
                        backgroundAlpha="1">
                        <mx:Script>
                            <![CDATA[
                                private function doColor():void {
                                    if (data.value == 5) {
                                        setStyle('backgroundColor', 0xcccccc);
                                    } else {
                                        setStyle('backgroundColor', 0xffffff);
                                    }
                                }
                            ]]>
                        </mx:Script>
                    </mx:Canvas>

                     

                    Now just apply the item renderer in the datagrid and that will do it.

                     

                    <?xml version="1.0" encoding="utf-8"?>
                    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"  xmlns:ns1="*">
                        <mx:Script>
                            <![CDATA[
                                import mx.collections.ArrayCollection;
                          
                               
                                [Bindable]
                                private var ac:ArrayCollection = new ArrayCollection([
                                    {value : 1},
                                    {value : 2},
                                    {value : 3},
                                    {value : 4},
                                    {value : 5},
                                    {value : 6},
                                    {value : 7},
                                    {value : 8},
                                    {value : 9},
                                    {value : 10}
                                ]);
                          ]]>
                        </mx:Script>
                        <mx:DataGrid x="40" y="36" width="408" height="193" dataProvider="{ac}">
                            <mx:columns>
                                <mx:DataGridColumn headerText="Column 1" dataField="value" itemRenderer="MyComp"/>
                                <mx:DataGridColumn headerText="Column 2" dataField="col2"/>
                                <mx:DataGridColumn headerText="Column 3" dataField="col3"/>
                            </mx:columns>
                        </mx:DataGrid>
                       
                      
                    </mx:Application>

                     

                    I hope this helps

                     

                    Andrew

                    • 7. Re: how to change the background color of a cell in datagrid using flex3
                      Flex harUI Adobe Employee

                      There are some examples in the item renderer section on my blog

                       

                      Alex Harui

                      Flex SDK Developer

                      Adobe Systems Inc.

                      Blog: http://blogs.adobe.com/aharui