0 Replies Latest reply on Jun 30, 2011 4:05 AM by Flex Rock

    Set style to Datagrid HeaderRenderer

    Flex Rock Level 1

      Hi,

      Here is the sample code.

      <components:columns>
                      <mx:DataGridColumn  headerText="{modelLocator.appModel.getResourceStrng('PG#')}" width="10" sortable="true" resizable="false" headerStyleName="statsHeader" sortCompareFunction="utils.ValueConverters.sortByPg">
                      <mx:headerRenderer>
                              <mx:Component>
                                  <mx:Canvas verticalScrollPolicy="off" horizontalScrollPolicy="off" mouseOver="customToolTip.createCustomTip(event,ToolTipLinks.pgLink, ToolTipLinks.pgName,true)"  mouseOut="customToolTip.destroyCustomTip(event)"
                                      styleName="{this.parentDocument.statsRaceSummaryGrid.sortColumnIndex == 0 ? 'raceSummaryNormalBackground' : 'raceSummaryTransparentBackground'}" 
                                       click="sortbypg(event)">
                                      <mx:Script>
                                          <![CDATA[
                                              import utils.ToolTipLinks;
                                              import utils.customToolTip;
                                              import models.ModelLocator;
                                              import mx.collections.Sort;
                                              import mx.collections.SortField;
                                             
                                              private function sortbypg(event):void {
                                                  ModelLocator.getInstance().raceInfo.raceDetails.pgsort = toggleSort(ModelLocator.getInstance().raceInfo.raceDetails.pgsort);
                                                  var sortbyPg:Sort = new Sort();
                                                  sortbyPg.fields = [new SortField('programNumber', false, false)];
                                                  sortbyPg.compareFunction = utils.ValueConverters.sortByPg;
                                                  ModelLocator.getInstance().raceInfo.raceDetails.currentViewedRace.statsHorses.sort = sortbyPg;
                                                  ModelLocator.getInstance().raceInfo.raceDetails.currentViewedRace.statsHorses.refresh();    
                                              }
                                              private function toggleSort(value:Boolean) :Boolean {
                                                  if(value)
                                                  value = false
                                                  else
                                                  value = true;
                                                  return value;
                                             }
                                          ]]>
                                      </mx:Script>
                                      <mx:Label width="100%"  textAlign="left" text="{ModelLocator.getInstance().appModel.getResourceStrng('PG#')}"  paddingBottom="0" paddingLeft="0" paddingTop="0" verticalCenter="0" horizontalCenter="0" styleName="{(this.parentDocument.statsRaceSummaryGrid.sortColumnIndex == 0)? 'H4white2' : 'H4gray2'}"/>
                                      <mx:HRule styleName="VHruleColor" height="1" width="100%" top="21"  />
                                      <mx:VRule styleName="VHruleColor" width="1" height="21"  left="20"  />
                                  </mx:Canvas>
                              </mx:Component>
                          </mx:headerRenderer>
                          <mx:itemRenderer>
                              <mx:Component>
                                  <mx:Canvas backgroundColor="{data.programColor}"
                                      backgroundImage="{data.programBackground}"
                                      backgroundSize="100%" width="23" height="16"
                                       horizontalCenter="0" verticalCenter="0">
                                      <mx:Label
                                              text="{data.programNumber}" styleName="H4white"
                                              horizontalCenter="0" verticalCenter="1" textAlign="center"
                                              >
                                          <mx:filters>
                                              <mx:GlowFilter blurX="2" blurY="2" quality="3" strength="4" color="#000000"/>
                                          </mx:filters>
                                      </mx:Label>
                                  </mx:Canvas>
                              </mx:Component>
                          </mx:itemRenderer>
                      </mx:DataGridColumn>
                      <mx:DataGridColumn headerText="{modelLocator.appModel.getResourceStrng('HORSE')}" headerStyleName="statsHeader" width="68"  sortable="true" dataField="horseName" resizable="false" >
                      <mx:headerRenderer>
                              <mx:Component>
                                  <mx:Canvas verticalScrollPolicy="off" horizontalScrollPolicy="off"  mouseOver="customToolTip.createCustomTip(event,ToolTipLinks.HorseLink, ToolTipLinks.HorseName,true)"  mouseOut="customToolTip.destroyCustomTip(event)"
                                      styleName="{this.parentDocument.statsRaceSummaryGrid.sortColumnIndex == 1 ? 'raceSummaryNormalBackground' : 'raceSummaryTransparentBackground'}"
                                       click="sortbyHorse(event)">
                                      <mx:Script>
                                          <![CDATA[
                                              import utils.ToolTipLinks;
                                              import utils.customToolTip;
                                              import models.ModelLocator;
                                              import mx.collections.Sort;
                                              import mx.collections.SortField;
                                             
                                              private function sortbyHorse(event):void {
                                                  ModelLocator.getInstance().raceInfo.raceDetails.horsenamesort = toggleSort(ModelLocator.getInstance().raceInfo.raceDetails.horsenamesort);
                                                  var sortbyHorse:Sort = new Sort();
                                                  sortbyHorse.fields = [new SortField('horseName', false, false)];
                                                  sortbyHorse.compareFunction = utils.ValueConverters.sortByHorse;
                                                  ModelLocator.getInstance().raceInfo.raceDetails.currentViewedRace.statsHorses.sort = sortbyHorse;
                                                  ModelLocator.getInstance().raceInfo.raceDetails.currentViewedRace.statsHorses.refresh();    
                                              }
                                              private function toggleSort(value:Boolean) :Boolean {
                                              if(value)
                                              value = false
                                              else
                                              value = true;
                                              return value;
                                           }
                                          ]]>
                                      </mx:Script>
                                      <mx:Label width="100%"  textAlign="left" text="{ModelLocator.getInstance().appModel.getResourceStrng('HORSE')}"  paddingBottom="0" paddingLeft="3" paddingTop="0" verticalCenter="0" horizontalCenter="0" styleName="{(this.parentDocument.statsRaceSummaryGrid.sortColumnIndex == 1)? 'H4white2' : 'H4gray2'}" />
                                      <mx:HRule styleName="VHruleColor" height="1" width="100%" top="21"  />
                                      <mx:VRule styleName="VHruleColor" width="1" height="21"  left="144"  />
                                  </mx:Canvas>
                              </mx:Component>
                          </mx:headerRenderer>
                          <mx:itemRenderer>
                              <mx:Component>
                              <mx:HBox >
                              <mx:Script>
                                          <![CDATA[
                                              import mx.core.UIComponent;
                                              import models.RaceInfoModel;
                                              import domainobjects.Horse;
                                              import mx.core.Application;
                                              import models.ModelLocator;
                                             
                                             
                                              [Bindable]
                                              public var modelLocator:ModelLocator = ModelLocator.getInstance();
                                             
                                             
                                             
                                              private function invokeReplaySearch(data:Object):void {
                                                  var horse:Horse = data as Horse;
                                                  var appInstance:ttv = Application.application as ttv;
                                                  var raceInfo:RaceInfoModel = ModelLocator.getInstance().raceInfo;
                                                  appInstance.invokeSearchReplayByHorse(raceInfo.raceDetails.track, raceInfo.raceDetails.currentViewedRace, horse);
                                              }
                                          ]]>
                                      </mx:Script>
                                  <!-- # 6269 -AE didn't get listed as an available runner -->
                                  <mx:Label  maxWidth="117" width="117"   text="{data.horseName}"  truncateToFit="true" verticalCenter="0" styleName="{(data.isScratched || data.isAEEntry ) ? 'H4gray1' : 'H4white'}" toolTip="{data.horseName + '\n' + data.jockey + ' / ' + data.trainer}" paddingLeft="3" />
                                     
                                      <mx:Button
                                           styleName="ReplayVideoButton"
                                           paddingBottom="0" paddingLeft="0" paddingRight="0" paddingTop="0"
                                           right="0" height="15"
                                           visible="{data.hasReplay &amp;&amp; modelLocator.appModel.internetStatus == 'connected'}"
                                           includeInLayout="{data.hasReplay &amp;&amp; modelLocator.appModel.internetStatus == 'connected'}"
                                           toolTip="{modelLocator.appModel.getResourceStrng('SEARCH_REPLAY_FOR')  + data.horseName}"
                                           click="invokeReplaySearch(data);"
                                          />
                                         
                              </mx:HBox>
                              </mx:Component>
                          </mx:itemRenderer>
                      </mx:DataGridColumn>
                      <mx:DataGridColumn headerText="{modelLocator.appModel.getResourceStrng('STATS_E1')}" headerStyleName="statsHeader" width="13" sortable="true" sortCompareFunction="utils.ValueConverters.sortByE1" resizable="false"  >
                      <mx:headerRenderer>
                              <mx:Component>
                                  <mx:Canvas verticalScrollPolicy="off" horizontalScrollPolicy="off" mouseOver="customToolTip.createCustomTip(event,ToolTipLinks.E1Link, ToolTipLinks.E1Name,true)"  mouseOut="customToolTip.destroyCustomTip(event)"
                                      styleName="{this.parentDocument.statsRaceSummaryGrid.sortColumnIndex == 2 ? 'raceSummaryNormalBackground' : 'raceSummaryTransparentBackground'}"
                                      click="sortByE1(event)">
                                  <mx:Script>
                                      <![CDATA[
                                          import utils.ToolTipLinks;
                                          import utils.customToolTip;
                                          import models.ModelLocator;
                                          import mx.collections.Sort;
                                          import mx.collections.SortField;
                                         
                                          private function sortByE1(event):void {
                                              ModelLocator.getInstance().raceInfo.raceDetails.e1sort = toggleSort(ModelLocator.getInstance().raceInfo.raceDetails.e1sort);
                                              var sortbyE1:Sort = new Sort();
                                              sortbyE1.fields = [new SortField('EarlyPace1Avg', false, ModelLocator.getInstance().raceInfo.raceDetails.e1sort)];
                                              sortbyE1.compareFunction = utils.ValueConverters.sortByE1;
                                              ModelLocator.getInstance().raceInfo.raceDetails.currentViewedRace.statsHorses.sort = sortbyE1;
                                              ModelLocator.getInstance().raceInfo.raceDetails.currentViewedRace.statsHorses.refresh();    
                                             
                                          }
                                          private function toggleSort(value:Boolean) :Boolean {
                                              if(value)
                                              value = false
                                              else
                                              value = true;
                                              return value;
                                          }
                                      ]]>
                                  </mx:Script>
                                  <mx:Label     width="100%"  textAlign="left" text="{ModelLocator.getInstance().appModel.getResourceStrng('STATS_E1')}"  paddingBottom="0" paddingLeft="7" paddingTop="0" verticalCenter="0" horizontalCenter="0" styleName="{(this.parentDocument.statsRaceSummaryGrid.sortColumnIndex == 2)? 'H4white2' : 'H4gray2'}" />
                                      <mx:HRule styleName="VHruleColor" height="1" width="100%" top="21"  />
                                      <mx:VRule styleName="VHruleColor" width="1" height="21"  left="27"  />
                                  </mx:Canvas>
                              </mx:Component>
                          </mx:headerRenderer>
                          <mx:itemRenderer>
                              <mx:Component>
                              <mx:Canvas verticalScrollPolicy="off" horizontalScrollPolicy="off">
                                  <mx:Label text="{data.EarlyPace1Avg}" textAlign="center" verticalCenter="0" width="100%"  styleName="H4white"/>
                                  </mx:Canvas>
                              </mx:Component>
                          </mx:itemRenderer>
                      </mx:DataGridColumn>
                      <mx:DataGridColumn  width="23"  headerText="{modelLocator.appModel.getResourceStrng('STATS_E2_LATE')}" headerStyleName="statsHeader" sortable="true"  resizable="false"   >
                          <mx:headerRenderer>
                              <mx:Component>
                             
                                  <mx:Canvas verticalScrollPolicy="off" horizontalScrollPolicy="off"
                                  styleName="{this.parentDocument.statsRaceSummaryGrid.sortColumnIndex == 3 ? 'raceSummaryNormalBackground' : 'raceSummaryTransparentBackground'}">
                                  <mx:Script>
                                  <![CDATA[
                                  import models.RaceDetailsModel;
                                  import models.ModelLocator;
                                  import models.RaceInfoModel;
                                  import mx.collections.Sort;
                                  import utils.ValueConverters;
                                  import utils.customToolTip;
                                  import mx.collections.SortField;
                                  import mx.events.DataGridEvent;
                                  import mx.collections.ICollectionView;
                                  import utils.ToolTipLinks;
                                  //[Bindable]
                                  //public var raceInfo:RaceInfoModel;
                                  private var sortByE2:Sort = new Sort();
                                  private var sortByLate:Sort = new Sort();

       

                                                     
                                  private function SortByE2(event:MouseEvent) :void {
                                      ModelLocator.getInstance().raceInfo.raceDetails.e2sort = toggleSort(ModelLocator.getInstance().raceInfo.raceDetails.e2sort);
                                      ModelLocator.getInstance().raceInfo.raceDetails.sortByE2 = 1;
                                      sortByE2.fields = [new SortField('EarlyPace2Avg', false, ModelLocator.getInstance().raceInfo.raceDetails.e2sort)];

       

                                      sortByE2.compareFunction = utils.ValueConverters.SortByE2Late;
                                      ModelLocator.getInstance().raceInfo.raceDetails.currentViewedRace.statsHorses.sort = sortByE2;

       

                                      ModelLocator.getInstance().raceInfo.raceDetails.currentViewedRace.statsHorses.refresh();

       


                                  }
                                  private function SortByLate(event:MouseEvent):void {
                                       ModelLocator.getInstance().raceInfo.raceDetails.latesort = toggleSort(ModelLocator.getInstance().raceInfo.raceDetails.latesort);
                                      ModelLocator.getInstance().raceInfo.raceDetails.sortByE2 = 2;
                                      sortByLate.fields = [new SortField('LatePaceAvg', false, ModelLocator.getInstance().raceInfo.raceDetails.latesort)];

       

                                     
                                      sortByLate.compareFunction = utils.ValueConverters.SortByE2Late;
                                      ModelLocator.getInstance().raceInfo.raceDetails.currentViewedRace.statsHorses.sort = sortByLate;

       

                                      ModelLocator.getInstance().raceInfo.raceDetails.currentViewedRace.statsHorses.refresh();

       


                                  }
                                  private function toggleSort(value:Boolean) :Boolean {
                                      if(value)
                                      value = false
                                      else
                                      value = true;
                                      return value;
                                  }
                                     
                                  ]]>
                              </mx:Script>
                                      <mx:HBox horizontalGap="0" paddingTop="0" paddingLeft="6">
                                      <mx:Canvas id="e2" height="19"  click="SortByE2(event)"  width="12" mouseChildren="true" mouseOver="customToolTip.createCustomTip(event,ToolTipLinks.E2Link, ToolTipLinks.E2Name,true)"  mouseOut="customToolTip.destroyCustomTip(event)" >
                                          <mx:Text text="E2" textAlign="left"  paddingBottom="0" paddingLeft="0"  paddingRight="0" top="0" left="2" paddingTop="0" verticalCenter="0" horizontalCenter="0"
                                              styleName="{(ModelLocator.getInstance().raceInfo.raceDetails.sortByE2 == 1 &amp;&amp; this.parentDocument.statsRaceSummaryGrid.sortColumnIndex == 3)? 'H4white2' : 'H4gray2'}"  mouseChildren="false"/>
                                      </mx:Canvas>
                                          <mx:Text text="/" textAlign="left"  paddingBottom="0" paddingLeft="0"  paddingRight="0" top="0" paddingTop="4" verticalCenter="0" horizontalCenter="0" styleName="H4gray"  buttonMode="true"  />
                                      <mx:Canvas id="late" height="19"  click="SortByLate(event)" width="17"  mouseChildren="true" mouseOver="customToolTip.createCustomTip(event,ToolTipLinks.lateLink, ToolTipLinks.lateName,true)"  mouseOut="customToolTip.destroyCustomTip(event)" >
                                          <mx:Text text="Late" textAlign="left"   paddingBottom="0" paddingLeft="0" left="0"  top="0" paddingTop="0" verticalCenter="0" horizontalCenter="0"
                                              styleName="{(ModelLocator.getInstance().raceInfo.raceDetails.sortByE2 == 2 &amp;&amp; this.parentDocument.statsRaceSummaryGrid.sortColumnIndex == 3)? 'H4white2' : 'H4gray2'}" mouseChildren="false"/>
                                      </mx:Canvas>
                                      </mx:HBox>
                                      <mx:HRule styleName="VHruleColor" height="1" width="100%" top="21"  />
                                      <mx:VRule styleName="VHruleColor" width="1" height="21"  left="48"  />
                                  </mx:Canvas>
                              </mx:Component>
                          </mx:headerRenderer>
                          <mx:itemRenderer>
                              <mx:Component>
                              <mx:Canvas verticalScrollPolicy="off" horizontalScrollPolicy="off">
                              <mx:Script>
                                  <![CDATA[
                                      import utils.ToolTipLinks;
                                  ]]>
                              </mx:Script>
                                  <mx:Label     text="{(null == data.EarlyPace2Avg)?'':data.EarlyPace2Avg + ' / ' + data.LatePaceAvg}" textAlign="center" styleName="H4white" verticalCenter="0" width="100%"/>
                              </mx:Canvas>
                              </mx:Component>
                          </mx:itemRenderer>
                      </mx:DataGridColumn>
                      <mx:DataGridColumn dataField="SpeedAvg" headerStyleName="statsHeader" headerText="{modelLocator.appModel.getResourceStrng('STATS_SPD')}"  width="20" sortable="true" sortCompareFunction="utils.ValueConverters.sortBySpeed" resizable="false">
                          <mx:headerRenderer>
                              <mx:Component>
                                  <mx:Canvas verticalScrollPolicy="off" horizontalScrollPolicy="off" mouseOver="customToolTip.createCustomTip(event,ToolTipLinks.spdLink, ToolTipLinks.spdName,true)"  mouseOut="customToolTip.destroyCustomTip(event)"
                                      styleName="{this.parentDocument.statsRaceSummaryGrid.sortColumnIndex == 4 ? 'raceSummaryNormalBackground' : 'raceSummaryTransparentBackground'}"
                                      click="sortbyspd(event)">
                                  <mx:Script>
                                      <![CDATA[
                                          import utils.ToolTipLinks;
                                          import utils.customToolTip;
                                          import models.ModelLocator;
                                          import mx.collections.Sort;
                                          import mx.collections.SortField;
                                             
                                          private function sortbyspd(event):void {
                                              ModelLocator.getInstance().raceInfo.raceDetails.spdsort = toggleSort(ModelLocator.getInstance().raceInfo.raceDetails.spdsort);
                                              var sortBySpd:Sort = new Sort();
                                              sortBySpd.fields = [new SortField('SpeedAvg', false, false)];
                                              sortBySpd.compareFunction = utils.ValueConverters.sortBySpeed;
                                              ModelLocator.getInstance().raceInfo.raceDetails.currentViewedRace.statsHorses.sort = sortBySpd;
                                              ModelLocator.getInstance().raceInfo.raceDetails.currentViewedRace.statsHorses.refresh();    
                                          }
                                          private function toggleSort(value:Boolean) :Boolean {
                                              if(value)
                                              value = false
                                              else
                                              value = true;
                                              return value;
                                         }
                                      ]]>
                                  </mx:Script>
                                  <mx:Label     width="100%"  textAlign="center" text="{ModelLocator.getInstance().appModel.getResourceStrng('STATS_SPD')}"  paddingBottom="0"  paddingTop="0" verticalCenter="0" horizontalCenter="1" styleName="{(this.parentDocument.statsRaceSummaryGrid.sortColumnIndex == 4)? 'H4white2' : 'H4gray2'}" />
                                      <mx:HRule styleName="VHruleColor" height="1" width="100%" top="21"  />
                                  </mx:Canvas>
                              </mx:Component>
                          </mx:headerRenderer>
                         
                          <mx:itemRenderer>
                              <mx:Component>
                              <mx:Canvas verticalScrollPolicy="off" horizontalScrollPolicy="off" >
                              <mx:Label text="{data.SpeedAvg}" textAlign="center" verticalCenter="0" width="100%"  styleName="H4white"/>
                              </mx:Canvas>
                              </mx:Component>
                          </mx:itemRenderer>
                      </mx:DataGridColumn>
                  </components:columns>

       

      I need to access each canvas to set the style seperately while sorting.
      Currently style is not set while sorting in Datagridcolumn. I am using Flash4.1

       

      Regards,

      Jayagopal.