0 Replies Latest reply on Sep 19, 2009 4:48 AM by VIVEK JAIN YJA

    Highlight DataGrid Row on Mouce Over

    VIVEK JAIN YJA Level 1

      Hi All,

       

      I am very new to Flex. Here my requirement is to highlight grid row on mouce over event and based on condition.

       

      ScreenHunter_01 Sep. 19 17.05.gif

      In the Participation Column, I am displaying value with red color because they are below 60.0. I want to highlight only these rows with red color on mouce over event as there will be only two rows with red color.

       

      I am trying to achieve this using the following code as pasted below:

       

          import mx.events.ListEvent;           
                
                  private function onItemRollOver(event : ListEvent) : void
                  {    
             
                        if(String(event.rowIndex)== "3")
                        {
                           dgCohorts.setStyle("color","red");
                         
                        }
                  }

       

       

                  private function onItemRollOut(event : ListEvent) : void
                  {
                      dgCohorts.setStyle("color","black");
                  }
          ]]>
          </mx:Script>
         
         <mx:DataGrid id="dgCohorts" x="10" y="37" width="392" height="236"  color="#000000"
              fontSize="11" dataProvider="{cohortsList}"  themeColor="#03A1FC" itemRollOver="onItemRollOver(event)" itemRollOut="onItemRollOut(event)">
                   <mx:columns>
                   <mx:DataGridColumn dataField="Name" headerText="Name" headerStyleName="centered" width="100" sortable="false"  />
                <mx:DataGridColumn id="myImage"  dataField="SchOnTime" headerText="Scheduled On Time" headerStyleName="centered" width="105" sortable="false">
                  <mx:itemRenderer>
                      <mx:Component>
                         <mx:Image source="{data.SchOnTime}" horizontalAlign="center" verticalAlign="middle" >
                         </mx:Image>
                      </mx:Component>
                  </mx:itemRenderer>
                </mx:DataGridColumn>         
                 <mx:DataGridColumn dataField="Participation" headerText="Participation" headerStyleName="centered" width="80" textAlign="center" sortable="false">
                    <mx:itemRenderer>
                       <mx:Component>
                         <mx:Label>
                          <mx:Script>
                           <![CDATA[
                               import mx.states.SetStyle;
                                 override protected function updateDisplayList(unscaledWidth: Number,unscaledHeight:Number):void
                                 {
                                   super.updateDisplayList(unscaledWidth, unscaledHeight);
                                   if (data && listData)
                                   {
                                    if (data.Participation < 60.0)
                                    {
                                      setStyle("color", "red");
                                      setStyle("fontWeight","bold");
                                    }
                                    else
                                    {
                                      setStyle("color", "green");
                                    }
                                   }
                                 }
                             ]]>
                                </mx:Script>
                         </mx:Label>
                       </mx:Component>
                     </mx:itemRenderer>
                 </mx:DataGridColumn>
                 <mx:DataGridColumn dataField="Score" headerText="Score" headerStyleName="centered" width="40" textAlign="center" sortable="false"/>
         </mx:columns>

       

      I don not know Whether i am right or not with this code.

       

      I am looking for your earliest help in this regard.

       

      Thanks in advance.

       

      -Vivek Jain
        
         </mx:DataGrid>