4 Replies Latest reply on Jan 29, 2007 1:24 PM by cardinalsupport

    How  to Change ItemRenderer for DataGrid Column based on value in that column?

    cardinalsupport Level 1
      Hi there! I am trying to create a DataGrid that has a Register Button component when the value in that column is "Open" and then a Label saying Full when the value of that column is "Full". But Im having a hell of a time figuring it out.

      Here is my MXML with 2 different inline components setup for the 2 different item renderers:

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute">

      <mx:Component id="RegFull">
      <mx:VBox horizontalAlign="center" verticalAlign="middle">
      <mx:Label id="FullText" text="Full"/>
      </mx:VBox>
      </mx:Component>

      <mx:Component id="RegButton">
      <mx:VBox horizontalAlign="center" verticalAlign="middle">
      <mx:Button label="Register"/>
      </mx:VBox>
      </mx:Component>

      <mx:DataGrid id="scGrid" width="100%" height="100%" rowCount="4">

      <mx:dataProvider>
      <mx:Object label="Status" data="Open"/>
      <mx:Object label="Status" data="Full"/>
      <mx:Object label="Status" data="Open"/>
      <mx:Object label="Status" data="Full"/>
      <mx:Object label="Status" data="Open"/>
      <mx:Object label="Status" data="Full"/>
      </mx:dataProvider>

      <mx:columns>
      <mx:DataGridColumn id="RegCol" headerText="Reg" dataField="data"/>
      </mx:columns>

      </mx:DataGrid>
      </mx:Application>

      How do i make it dynamically use the right ItemRenderer based on the value of the field? THANKS FOR ANY HELP PROVIDED!

      best
      stephen
        • 1. Re: How  to Change ItemRenderer for DataGrid Column based on value in that column?
          ur_dtrain Level 1
          Try:
          <mx:DataGridColumn id="RegCol" headerText="Reg" itemRenderer="{data.data=='Open'?RegButton:RegFull;}" dataField="data"/>

          And if that doesn't work for you, then add a script block within you component that shows the appropriate element:

          <mx:Component id="RegButton">
          <mx:VBox horizontalAlign="center" verticalAlign="middle">
          <mx:Script>
          <![CDATA[
          if(data.data == "Open"){
          FullText.visible = false;
          }else{
          registerBtn.visible=false;
          }
          ]]>
          </mx:Script>
          <mx:Label id="FullText" text="Full"/>
          <mx:Button id="registerBtn" label="Register"/>
          </mx:VBox>
          </mx:Component>
          • 2. Re: How  to Change ItemRenderer for DataGrid Column based on value in that column?
            cardinalsupport Level 1
            hi darin thanks for taking the time to post. I went ahead and tried the inline option to output the itemRenderer:

            <mx:DataGridColumn id="RegCol" headerText="Reg" itemRenderer="{data.data=='Open'?RegButton:RegFull;}" dataField="data"/>

            But got a syntax error saying "expecting rightparen before semicolon" so i removed the semi colon and it seemed to save but for some reason doesnt seem to work?

            Then if i try to setup the component with the script it doesnt like the script block inside the component tags?
            I think the inline option sounds simple and should work I would t hink but not sure the syntax is correct, can you take a look for me , would be much appreciated!

            best
            stephen
            • 3. Re: How  to Change ItemRenderer for DataGrid Column based on value in that column?
              peterent Level 2
              You cannot have more than 1 renderer per column. There are a couple of ways to do this. One way would be to use states. One state for each possible value in the data. Since you either want a Button (data == "open") or a Label (data == "Full") using states wouldn't be a bad choice.

              You could also use a Canvas instead of a VBox. Make both a Label and a Button with horizontalCenter="0" verticalCenter="0" so they are on top of each other. Make them visible based on the data's value:

              <mx:Component>
              <mx:Canvas>
              <mx:Button label="Register" horizontalCenter="0" verticalCenter="0" visible="{data. dataField == 'Open'}" />
              <mx:Label label="Full" horizontalCenter="0" verticalCenter="0" visible="{data. dataField == 'Full'}" />
              </mx:Canvas>
              </mx:Component>

              where dataField is the value of the dataField property on the DataGridColumn for this renderer.

              • 4. Re: How  to Change ItemRenderer for DataGrid Column based on value in that column?
                cardinalsupport Level 1
                Thanks so much Peter! This worked perfectly. :) Nice to have this support forum with people who actually respond from Adobe, makes me more confident in the development of Flex.