17 Replies Latest reply on Nov 8, 2011 8:01 AM by iamcootis

    Using an item renderer as an item editor

    iamcootis Level 1

      I am trying to use an item renderer as an item editor in my AdvancedDataGrid. Every cell in the grid is a textInput or a checkbox.

       

      One problem I've noticed and it also happens on the example on this page: http://livedocs.adobe.com/flex/3/html/help.html?content=celleditor_8.html

      http://is that when you tab across the items, the cursor does not move with you. Has anyone had this problem before? 

       

      Thanks for your help.

        • 1. Re: Using an item renderer as an item editor
          Flex harUI Adobe Employee

          There is an omission from that example.  It isn’t coded to support keyboard navigation.  An editor needs to implement IFocusManagerComponent and code up the setFocus() method to pass focus to the focusable control.  More like:

           

          <?xml version="1.0"?>
          <!-- itemRenderers\dataGrid\myComponents\MyContactEditable.mxml -->
          <mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"  implements=”mx.managers.IFocusManagerComponent”>
          
             <mx:Script>
                  <![CDATA[
                      // Define a property for returning the new value to the cell.
                      [Bindable]
                      public var newContact:String;
          
                      override public function setFocus():void
                      {
                            contactTI.setFocus();
                      }
                  \]\]\>
              </mx:Script>
          
              <mx:Label id="title" text="{data.label1}"></mx:Label>
              <mx:Label id="contactLabel" text="Last Contacted By:"></mx:Label>
              <mx:TextInput id="contactTI"
                  editable="true"
                  text="{data.Contact}"
                  change="newContact=contactTI.text;"></mx:TextInput>
          </mx:VBox>
          
          

           

          • 2. Re: Using an item renderer as an item editor
            iamcootis Level 1

            Thanks this works, but another problem I am facing is that I want to be able to give certain cells focus when an event occurs. For instance, these AdvancedDataGrids are kept inside of Accordion objects and when the user opens and accordion, I want the first cell in the accordion to have focus. Given that I have access to an AdvancedDataGrid where id = adg, How can I give focus to the first cell or the last cell in the first row?

            • 3. Re: Using an item renderer as an item editor
              Flex harUI Adobe Employee

              You would set editedItemPosition.

              • 4. Re: Using an item renderer as an item editor
                iamcootis Level 1

                Thanks..all this is working, but I've come across a new problem and I can't seem to figure it out.

                 

                When I created a new row in my dataGrid and I use the mouse to give one of the new cells focus, I get a null point exception on the mouseDownHandler() function in AdvancedDataGridBase. It's saying the editedItemPosition is null. I have no idea why it is coming up null. I've tried to overwrite this function and check for null and if it's null give it a value, but that doesn't hold. Is there something I need to do after adding a new row that will keep this from being null?

                 

                Also I have overwritten the endEdit() function in AdbasedDataBaseGridBase to always return true. The event that it was firing seemed to do nothing and was always throwing a null pointer exception. Let me know if you'd like to see any code.

                 

                Thanks

                • 5. Re: Using an item renderer as an item editor
                  Flex harUI Adobe Employee

                  If focus gets shifted to something that isn’t determined to be in the renderer, the editor will be dismissed and editedItemPosition will get set to null.  Maybe post the code of the itemEditor

                  • 6. Re: Using an item renderer as an item editor
                    iamcootis Level 1

                    I think I've narrowed it down to when this happens. If the user is tabbing through the items in the grid and then they hit tab in the last item in the grid the focus moves out of the grid. When trying to click back onto a cell in the grid it is null. Here is one of the itemRenderers we are using. The others are similar just using checkbox and combobox.

                     

                    What is a way to work-around the null editedItemPosition?

                     

                    Thanks.

                     

                    <?xml version="1.0" encoding="utf-8"?>

                    <s:MXAdvancedDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"

                             xmlns:s="library://ns.adobe.com/flex/spark"

                             xmlns:mx="library://ns.adobe.com/flex/mx"

                             implements="mx.controls.listClasses.IDropInListItemRenderer, mx.managers.IFocusManagerComponent"

                             >      

                       

                        <fx:Script>

                            <![CDATA[           

                                import com.common.NNCommonTools;

                                import com.ui.views.components.NNBaseDataGrid;

                               

                                import mx.controls.Alert;

                                import mx.controls.dataGridClasses.DataGridListData;

                                import mx.controls.listClasses.BaseListData;

                                import mx.events.FlexEvent;

                               

                                import skins.BorderlessTextInput;

                               

                                protected var _listData:DataGridListData;           

                               

                                [Bindable] protected var _dispText:String;

                                [Bindable] private var _fontStyleName:String;

                                [Bindable] public var newText:String;

                                           

                                override public function set data(value:Object):void{

                                    if(value && _listData){

                                        super.data = value;

                                        _dispText = data[_listData.dataField];

                                        _fontStyleName = data._isNew ? "italic11ptArial" : "normal10ptDroidSans";

                                    }

                                }

                                           

                                // Interface functions for IDropInListItemRenderer, _listData contains the

                                // column information of the current renderer

                                override public function get listData():BaseListData {

                                    return _listData;

                                }

                                override public function set listData(value:BaseListData):void {

                                    _listData = DataGridListData(value);

                                    invalidateProperties();

                                }  

                               

                                protected function valueCommitHandler(event:FlexEvent):void {

                                    var dg:NNBaseDataGrid = NNCommonTools.findParentDataGrid(this);

                                    if (dg == null || dg.selectedItem == null) {

                                        return;

                                    }

                                    var value:String = _txtInput.text;

                                    if ((_dispText == null && value == "") || (_dispText == value)) {

                                        return;

                                    }

                                    var datafld:String = _listData.dataField;

                                    _dispText = value;

                                    NNCommonTools.updateDataProvider(this,datafld,value);

                                }

                               

                                override public function setFocus():void{

                                    _txtInput.setFocus();

                                }

                               

                            ]]>

                        </fx:Script>

                        <s:HGroup width="100%" height="100%" paddingLeft="4" paddingRight="4">       

                            <s:TextInput id="_txtInput" text="{_dispText}" width="100%"

                                   valueCommit="valueCommitHandler(event)" 

                                   change="newText=_txtInput.text;"

                                   skinClass="skins.BorderlessTextInput" styleName="{_fontStyleName}" />

                        </s:HGroup>   

                    </s:MXAdvancedDataGridItemRenderer>

                    • 7. Re: Using an item renderer as an item editor
                      Flex harUI Adobe Employee

                      I don’t see any reference to editedItemPosition.  What is the full call stack from the exception?

                      • 8. Re: Using an item renderer as an item editor
                        iamcootis Level 1

                        TypeError: Error #1009: Cannot access a property or method of a null object reference.

                            at mx.controls::AdvancedDataGridBaseEx/mouseDownHandler()[E:\dev\4.x\frameworks\projects\dat avisualization\src\mx\controls\AdvancedDataGridBaseEx.as:7088]

                            at mx.controls::AdvancedDataGrid/mouseDownHandler()[E:\dev\4.x\frameworks\projects\datavisua lization\src\mx\controls\AdvancedDataGrid.as:8622]

                        • 9. Re: Using an item renderer as an item editor
                          Flex harUI Adobe Employee

                          Do you have custom ITEM_EDIT_END handling?  It looks like itemEditorInstance is not getting set to null when you tab or click out of the ADG.

                          • 10. Re: Using an item renderer as an item editor
                            iamcootis Level 1

                            I have overridden protected function endEdit(reason:String) to always return true. It was causing the problem of the values inside my itemRenders to go blank when I would tab through the cells.

                            • 11. Re: Using an item renderer as an item editor
                              Flex harUI Adobe Employee

                              Are you calling super.endEdit()?

                              • 12. Re: Using an item renderer as an item editor
                                iamcootis Level 1

                                No. I am bypassing it altogether because of the problems it was causing.

                                • 13. Re: Using an item renderer as an item editor
                                  Flex harUI Adobe Employee

                                  It might be causing this problem.  The recommended way to deal with saving out the edited value is to handle the ITEM_EDIT_END event.

                                  • 14. Re: Using an item renderer as an item editor
                                    iamcootis Level 1

                                    Perhaps I'm not setting up something correctly on the itemRenderer or the ADG column?

                                     

                                    When the ITEM_EDIT_END is dispatched it goes to (private function itemEditorItemEditEndHandler(event);

                                     

                                    Inside here it tries to create this Object but it always come back as null: var newData:Object = itemEditorInstance[_columns[event.columnIndex].editorDataField];

                                     

                                    I think might be what is setting my cell to null. I'm not sure how to fix it.

                                    • 15. Re: Using an item renderer as an item editor
                                      Flex harUI Adobe Employee

                                      It looks like the renderer is trying to update a property called newText.  Is editorDataField on the column set to “newText”?

                                      • 16. Re: Using an item renderer as an item editor
                                        iamcootis Level 1

                                        Hey, thanks a lot. It's finally working like it's supposed to. editorDataField was supposed to be getting set dynamically, but for some reason it was not.

                                         

                                        Thanks

                                        • 17. Re: Using an item renderer as an item editor
                                          iamcootis Level 1

                                          Hi, I am having some more trouble with this itemEditorInstance. I have a bunch of groups that contain AdvancedDataGrids. The groups are referenced in an ArrayCollection so I can easily remove and add them.

                                           

                                          In one instance when I delete a group, it is removed and then I can easily click a button and rebuild the group and the datagrids it contains.

                                           

                                          In another instance, I can delete a group, click on a diagram view which will change the viewstate, click back onto the original viewstate and click a button to rebuild the group and the datagrids, but now my AdvancedDataGridBase throws a null pointer in makeRowsAndColumns(). the itemEditorInstance.parent is null.

                                           

                                          Any idea what would make this null? And why the code doesn't even come into this area unless I change viewstates and then return?

                                           

                                          Here is my stack on the null pointer:

                                           

                                          Main Thread (Suspended: TypeError: Error #1009: Cannot access a property or method of a null object reference.)
                                          mx.controls::AdvancedDataGridBaseEx/makeRowsAndColumns
                                          mx.controls::AdvancedDataGrid/makeRowsAndColumns
                                          mx.controls.listClasses::AdvancedListBase/makeRowsAndColumnsWithExtraRows
                                          mx.controls.listClasses::AdvancedListBase/updateDisplayList
                                          mx.controls::AdvancedDataGridBaseEx/updateDisplayList
                                          mx.controls::AdvancedDataGrid/updateDisplayList
                                          mx.controls.listClasses::AdvancedListBase/validateDisplayList
                                          mx.managers::LayoutManager/validateDisplayList
                                          mx.managers::LayoutManager/doPhasedInstantiation
                                          mx.managers::LayoutManager/validateNow
                                          mx.core::UIComponent/commitCurrentState
                                          mx.core::UIComponent/commitProperties
                                          spark.components.supportClasses::GroupBase/commitProperties
                                          spark.components::Group/commitProperties
                                          mx.core::UIComponent/validateProperties
                                          mx.managers::LayoutManager/validateProperties
                                          mx.managers::LayoutManager/doPhasedInstantiation
                                          mx.managers::LayoutManager/doPhasedInstantiationCallback