6 Replies Latest reply on Mar 19, 2007 4:57 PM by ntsiii

    Multi-Use Item Renderer for DataGrid Column

    Josh Johnson Level 1
      I have a dataGrid where the first column of the grid displays an icon for the 'type' of item in the row. I created a custom itemRenderer component which I reference in its own namespace, and everything works great. Since this is a pretty common concept, I'd thought that I'd be able to re-use that itemRenderer throughout the application, but everytime I try to call the itemRenderer in another dataGrid, I get 2 errors saying "the inlineComponent could not be found" and then because of that "Access of undefined property".

      It doesn't make sense for an itemRenderer to be only good for one use, so I'm obviously missing some fundamental issue. Can someone enlighten me?
        • 1. Re: Multi-Use Item Renderer for DataGrid Column
          ntsiii Level 3
          How are you specifying the itemRenderer? Post the mxml.
          Tracy
          • 2. Re: Multi-Use Item Renderer for DataGrid Column
            Josh Johnson Level 1
            Here's an example of one of the component renderers. It reads in the type of the item, and then displays an icon to match that type.

            <?xml version="1.0" encoding="utf-8"?>
            <mx:HBox xmlns:mx=" http://www.adobe.com/2006/mxml"
            verticalAlign="middle" horizontalAlign="center">
            <mx:Script source="LoadIconClasses.as" />
            <mx:Script>
            <![CDATA[
            override public function set data(value:Object):void {
            if(value != null){
            super.data = value;
            var policyType:String = value.type;
            switch(policyType) {
            case 'Patch':
            img.source = patchPolicy16;
            break;
            case 'Software':
            img.source = softwarePolicy16;
            break;
            case 'Audit':
            img.source = auditPolicy16;
            break;
            //default:
            //trace("Out of range");
            }
            }
            }
            ]]>
            </mx:Script>
            <mx:Image id="img" />
            </mx:HBox>
            • 3. Re: Multi-Use Item Renderer for DataGrid Column
              Josh Johnson Level 1
              It then gets called by a dataGrid like so...

              <mx:DataGrid width="100%" height="100%" dataProvider="{policies}">
              <mx:columns>
              <mx:DataGridColumn headerText="" dataField="type" width="30">
              <mx:itemRenderer>
              <mx:Component>
              <ir:PolicyGridIcon />
              </mx:Component>
              </mx:itemRenderer>
              </mx:DataGridColumn>
              <mx:DataGridColumn headerText="Name" dataField="name" />
              </mx:columns>
              </mx:DataGrid>
              • 4. Re: Multi-Use Item Renderer for DataGrid Column
                Josh Johnson Level 1
                Tracy, did this mxml help clarify the problem?
                • 5. Re: Multi-Use Item Renderer for DataGrid Column
                  ntsiii Level 3
                  Yes, in order to access the column information, you must extend an ItemRenderer, like listItemRenderer, ot TeeItemRenderer. Maybe you can implement and interface like IDropInItemRemderer.

                  Those classes give you access to the, I think , listData object from which you can get the column, the dataField specification, etc.

                  I don't think I have a simple example.. Wait a minute, I saw an example posted on flexcoders. I'll see if I can find it and post it.

                  Tracy
                  • 6. Re: Multi-Use Item Renderer for DataGrid Column
                    ntsiii Level 3
                    Hah, found it. It is an mxml example, and implements IDropInListItemRenderer. It for an image renderer, but you will be able to see what to do.
                    Tracy
                    <?xml version="1.0" encoding="utf-8"?>
                    <mx:VBox xmlns:mx=" http://www.adobe.com/2006/mxml"
                    horizontalAlign="center" verticalAlign="middle"
                    width="16" height="16"
                    implements="mx.controls.listClasses.IDropInListItemRenderer" >
                    <mx:Script><![CDATA[
                    import mx.controls.listClasses.IDropInListItemRenderer;
                    import mx.controls.listClasses.BaseListData;
                    import mx.controls.dataGridClasses.DataGridListData;
                    import mx.controls.DataGrid;

                    [Bindable]
                    private var source:String;
                    private var _listData:BaseListData;

                    public function get listData():BaseListData
                    {
                    return _listData;
                    }

                    public function set listData(value:BaseListData):void

                    {
                    _listData = value;
                    invalidateProperties();
                    }

                    override protected function commitProperties():void
                    {
                    super.commitProperties();

                    if (_listData is DataGridListData)
                    {
                    var dgld:DataGridListData = _listData as DataGridListData;
                    source = data[DataGrid(dgld.owner).columns[dgld.columnIndex].dataField];
                    }
                    }


                    ]]></mx:Script>

                    <mx:Image source="{source}"/>

                    </mx:VBox>