7 Replies Latest reply on Apr 14, 2008 8:32 AM by bitwyse

    Item Renderer in a Datagrid

    bitwyse Level 1
      I'm struggling with how to make a check mark ( image ) show up or not based on the value of some data in each datagrid line item. I'm using an item renderer but I'm missing something. Any help would be greatly appreciated.

      thanks,

      STeveR

        • 1. Re: Item Renderer in a Datagrid
          bitwyse Level 1
          Anyone?

          How to get an item renderer to access data from the parent???
          • 2. Re: Item Renderer in a Datagrid
            Gaurav J Adobe Employee
            you should be able to access object called data inside the updateDisplayList method of your custom item renderer.

            Here is an example from Peter DeHaan's blog

            http://blog.flexexamples.com/2007/08/20/formatting-a-flex-datagrid-control-using-a-custom- item-renderer/
            • 3. Re: Item Renderer in a Datagrid
              bitwyse Level 1
              Thanks for the link Guarav,

              However, I would like to use this item renderer as a component for multiple datagrids thus the data field will change. I can't just use data.fieldName. Isn't there a way to determine where it's being called from something like a labelFunction ?
              • 4. Re: Item Renderer in a Datagrid
                peterskeeter Level 1
                Is this the sort of thing your after...

                override public function set data(value:Object):void {
                var dg:DataGrid = (listData) ? DataGrid(listData.owner) : null;
                var column:DataGridColumn = (dg) ? dg.columns[listData.columnIndex] as DataGridColumn : null;
                col_index = listData.columnIndex;
                var str:String = String(column.dataField);
                this.BTN_***_mark.label = value[DataGridListData(listData).dataField];
                }


                i use this in my itemrenderer because I'm creating dynamic columns in my datagrid, and this itemrenderer is used across multiple columns in my DG so i have to look it up on the fly and see the name of the column its coming from so I can get the data into this itemrenderer....
                • 5. Re: Item Renderer in a Datagrid
                  bitwyse Level 1
                  Hey Peter,

                  Thanks for the reply. It looks like it might be what I'm looking for. A couple questions. . .
                  What is listData and where is it defined? Also can you explain this line?
                  this.BTN_***_mark.label = value[DataGridListData(listData).dataField];

                  Maybe it would help to see the entire renderer, if you don't mind . . .
                  • 6. Re: Item Renderer in a Datagrid
                    peterskeeter Level 1
                    The following is my entire itemrenderer...please excuse any bad style as this is a WIProgress..
                    Its probably easier to quote the adobe docs on listdata...If a component implements the IDropInListItemRenderer interface, you can use its listData property to obtain information about the data passed to the component when you use the component in an item renderer or item editor..I made sure the component implements the interface as you can see in the code at the top of component. Then add the couple of required functions regarding listdata, then you can access the listdata in your own functions in the renderer, like i do in set data function.

                    this.BTN_***_mark.label = value[DataGridListData(listData).dataField];

                    this line assigns the value from my datagrid to the renderers button label. (this renderer is a button that the user can press) so i want the buttons label to show the value coming in from the datagrid. So listdata is just a way to
                    explicitly get the column name where the current data is being sourced from in your datagrid.As the grid is being rendered, it renders row by row. In each row it goes thru your columns . SO initially it for row 1 it would begin rendering firstname, surname, mark, average...etc etc. If i put an alert in on
                    value[DataGridListData(listData).dataField
                    I would see these column names popping up as they are getting rendered in the DGrid.
                    Hope this helps...




                    <!-- <?xml version="1.0" encoding="utf-8"?>-->
                    <mx:VBox xmlns:mx=" http://www.adobe.com/2006/mxml" creationComplete="init()" width="74" height="30" horizontalAlign="center" verticalAlign="middle" implements="mx.core.IFactory,mx.controls.listClasses.IDropInListItemRenderer">
                    <mx:Metadata>


                    </mx:Metadata>
                    <mx:Script>
                    <![CDATA[
                    import mx.managers.PopUpManager;
                    import mx.controls.DataGrid;
                    import mx.utils.ArrayUtil;
                    import mx.collections.ArrayCollection;
                    import mx.collections.IViewCursor;
                    import mx.controls.Alert;
                    import mx.events.*;
                    import mx.controls.dataGridClasses.DataGridListData;
                    import mx.controls.listClasses.BaseListData;
                    import mx.controls.dataGridClasses.DataGridColumn;
                    import mx.containers.TitleWindow;
                    private var panel:AssessmentMarkPopup = new AssessmentMarkPopup();
                    var the_val = 0;
                    var col_index:int;
                    //------------------------------------------------------------------------------
                    private var _listData:BaseListData;
                    public function get listData() : BaseListData
                    {
                    return _listData;
                    }
                    public function set listData( value:BaseListData ) : void
                    {
                    _listData = value;
                    }
                    //------------------------------------------------------------------------------
                    private function showLoginForm():void {
                    var pop:AssessmentMarkPopup = AssessmentMarkPopup(PopUpManager.createPopUp(this,AssessmentMarkPopup,true));
                    pop.addEventListener("closepopup",onClose);
                    pop.TXT_***_mark.text = this.BTN_***_mark.label;
                    var row:int = this.parentApplication.DG_class_students.selectedIndex;
                    pop.student_name = this.parentApplication.DG_class_students.selectedItem.firstname + " " + this.parentApplication.DG_class_students.selectedItem.lastname;
                    }

                    private function onClose(e:MyClosePopupEvent):void{
                    this.BTN_***_mark.label = e.data.mark;
                    }

                    public function newInstance():*
                    {
                    return new MarkEntry();
                    }

                    public override function get data():Object
                    {
                    return super.data;
                    }
                    //------------------------------------------------------------------------------
                    override public function set data(value:Object):void {
                    var dg:DataGrid = (listData) ? DataGrid(listData.owner) : null;
                    var column:DataGridColumn = (dg) ? dg.columns[listData.columnIndex] as DataGridColumn : null;
                    col_index = listData.columnIndex;
                    var str:String = String(column.dataField);
                    this.BTN_***_mark.label = value[DataGridListData(listData).dataField];
                    }
                    //------------------------------------------------------------------------------
                    ]]>
                    </mx:Script>
                    <mx:Button click="showLoginForm()" id="BTN_***_mark" width="52"/>
                    </mx:VBox>
                    • 7. Re: Item Renderer in a Datagrid
                      bitwyse Level 1
                      Thanks Peter for the great explanation.

                      I'm going to give this a whirl this week. I'll update the forum as I progress.