1 Reply Latest reply on Sep 17, 2009 5:25 AM by nikos101

    How do you style individual cells in a data grid?

    nickmiddleweek

      Hello,

       

      I'm using a Data Grid to show this data...

       

      <mx:dataProvider>
           <mx:Array>
                <mx:Object
                     product="A4 Scan"
                     client="€100"
                     brand="€90"
                     job="€90"/>
                <mx:Object
                     product="A5 Proof"
                     client="€200"
                     brand="€200"
                     job="€200"/>
           </mx:Array>
      </mx:dataProvider>

       

       

      The items I've highlighted above, I would like to render in BOLD in the DG. How can I achieve this?

       

      So basically, I want some cells in plain text and some bold...

       

      Do I use CSS for this? Or an itemRenderer and set an extra property of the Object being renderered?

       

       


      Thanks,

      Nick

        • 1. Re: How do you style individual cells in a data grid?
          nikos101 Level 2

          You are correct css is the way to go: the following exmaple is the best I've come up with. It changes the colour as the user types based on if the text agrees with the regex. The setStyle('backgroundColor',0xff8b7c); is what you need to change acoording to your own logic. The green code gets round a bug where styles get passed to the cell directly below upon data rerfesh

           

                 <mx:AdvancedDataGridColumn id="buyAmount" backgroundColor="{CommonFunctions.LIGHT_BLUE}" sortCompareFunction="sortNumeric" showDataTips="true" headerText="Buy amount" width="80">
                          <mx:itemRenderer>
                              <mx:Component>
                                  <mx:VBox paddingLeft="4" paddingRight="4" horizontalScrollPolicy="off" verticalAlign="middle">
                                      <mx:Script>
                                          <![CDATA[
                                              import mx.formatters.CurrencyFormatter;

           

                                              override public function set data(value:Object):void
                                              {
                                                  super.data=value;
                                                  if (value != null)
                                                  {
                                                      var cf:CurrencyFormatter=new CurrencyFormatter();
                                                      cf.currencySymbol='';
                                                      //cf.precision=2;
                                                      cf.useNegativeSign=true;
                                                      ti.text=cf.format(data.buyAmount);
                                                  }
                                              }
                                          ]]>
                                      </mx:Script>

           

                                      <mx:TextInput id="ti" width="100%" backgroundColor="#ffffff" textAlign="right" borderStyle="inset" restrict=".0-9" maxChars="11">

           

                                          <mx:valueCommit>
                                              <![CDATA[
                                              if(ti.text.search(new RegExp(/.*\..*\./)) != -1){
                                              ti.
          setStyle('backgroundColor',0xff8b7c);
                                              }
                                              else{
                                              ti.setStyle('backgroundColor',0xffffff);
                                              }
                                              ]]>
                                          </mx:valueCommit>

           

                                          <mx:change>
                                              <![CDATA[
                                              if(ti.text.search(new RegExp(/.*\..*\./)) != -1){
                                              ti.setStyle('backgroundColor',0xff8b7c);
                                              this.data.isModifiedClientSide = 0;
                                              }
                                              else{
                                              ti.setStyle('backgroundColor',0xffffff);
                                              this.data.buyAmount = ti.text.replace(/[,]/g, "");
                                              this.data.isModifiedClientSide = 1;
                                              }
                                              ]]>
                                          </mx:change>
                                      </mx:TextInput>
                                  </mx:VBox>
                              </mx:Component>
                          </mx:itemRenderer>

           

                      </mx:AdvancedDataGridColumn>

           

           

          if this post help you, please mark it so