0 Replies Latest reply on Aug 21, 2012 3:37 AM by lcmorley

    Help, I need help with highlighting rows in a Spark Data Grid

    lcmorley

      I am fairly new to flex, so please be gentle.

       

      Is it possible to highlight rows in a Spark data grid without the need to mess around with itemrenderers?

       

      I am trying to create a generic approach to a problem that will potentially impact all grid within our system.

       

      For example, I have created an IndexedChangeableDataGrid which extends the Spark Data Grid as shown below:

       

      <util:IndexedChangeableDataGrid id="sitesOfWorkGrid"

                         x="443"

                         y="170"

                         width="240"

                         height="150"

                         dataProvider="{_otmWorksiteDetails.otmSitesOfWork}"

                         editable="false"

                         gridClick.Create="otmSitesOfWorkGrid_gridClickHandler(event)"

                         gridClick.Edit="otmSitesOfWorkGrid_gridClickHandler(event)"

                         gridClick.Controlled="otmSitesOfWorkGrid_gridClickHandler(event)"

                         sortableColumns="false"

                         toolTip.Create="Click here to create a Site of Work"

                         toolTip.Edit="Click here to create a Site of Work"

                         toolTip.Controlled="Click here to create a Site of Work"

                         xPathPrefix="/OTMShift/OTMWorksiteDetails[index0]/OTMSitesOfWork">

               <util:columns>

                     <s:ArrayList>

                         <s:GridColumn dataField="name"

                                          headerText="Site of Work"

                                          editable="false">

                               <s:itemRenderer>

                                   <fx:Component>

                                         <s:GridItemRenderer>

                                             <mx:LinkButton label="{data.label}"

                                                               click="outerDocument.sitesOfWorkListLinkButton_clickHandler(event)"/>

                                         </s:GridItemRenderer>

                                   </fx:Component>

                               </s:itemRenderer>

                         </s:GridColumn>

       

       

                         <s:GridColumn includeIn="Controlled,Create,Edit,Exit"

                                          width="20"

                                          editable="false">

                               <s:itemRenderer>

                                   <fx:Component>

                                         <s:GridItemRenderer width="20">

                                             <s:Image id="addImage"

                                                       source="@Embed(source='/../resources/images/AddIcon16.gif')"

                                                       verticalCenter="0"

                                                       horizontalCenter="0"

                                                       toolTip="Add Site of Work"/>

       

       

                                         </s:GridItemRenderer>

                                   </fx:Component>

                               </s:itemRenderer>

                         </s:GridColumn>

                         <s:GridColumn includeIn="Controlled,Create,Edit,Exit"

                                          editable="false"

                                          width="20">

                               <s:itemRenderer>

                                   <fx:Component>

                                         <s:GridItemRenderer width="20">

                                             <s:Image id="image"

                                                       source="@Embed(source='/../resources/images/deleteicon_enabled.gif')"

                                                       verticalCenter="0"

                                                       horizontalCenter="0"

                                                       toolTip="Delete Site of Work"/>

                                         </s:GridItemRenderer>

                                   </fx:Component>

                               </s:itemRenderer>

                         </s:GridColumn>

                     </s:ArrayList>

               </util:columns>

               <util:typicalItem>

                     <fx:Object dataField1="{OTM_SITE_OF_WORK_LABEL}"/>

               </util:typicalItem>

           </util:IndexedChangeableDataGrid>

       

       

      As can be seen the default state of the grid currently has GridItemRenderers on each column. All I want to do is change the background color to "pink" in addition to these GridItemRenderers.

       

      As far as I am concerned, I am not interested in existing renderers, I just want them to be the same as they appear above, but in addition, a pink background on certain rows.

       

      This is just one grid in use, we have 20-30 different grids with different renderers and the only approach I can realistically see is to have each of these renderers in a file, and then to select the appropriate renderer based on the data in the row. This seems like a lot of hard to work to me. Can I not just get hold of a row in the grid and highlight it?