9 Replies Latest reply on Jan 1, 2008 7:24 PM by jono.r

    DataGrid TextInput - detecting change

    jono.r
      I'm reasonably new to Flex and have been stuggling with this for quite a while.
      I have a DataGrid with one of the columns having an itemRenderer = TextInput.
      I want to detect when a user leaves the field (or changes the value) but cannot figure it out. I gather the events for TextInput don't bubble - and with my limited knowledge, i'm not up to overriding this - yet!

      Here's a cut down version of the DataGrid:

      <mx:DataGrid dataProvider="{productList}" left="22" top="37" bottom="69" width="395" id="productGrid">
      <mx:columns>
      <mx:DataGridColumn itemRenderer="mx.controls.TextInput" rendererIsEditor="true" headerText="Qty" dataField="quantity"/>
      <mx:DataGridColumn headerText="Name" dataField="name" />
      </mx:columns>
      </mx:DataGrid>

      TIA
      BTW, I have a workaround which is to make the DataGrid editable and render the non-entry columns a labels, but its not obvious to the user that data can be entered.
        • 1. Re: DataGrid TextInput - detecting change
          atta707 Level 2
          have you tried itemEditBegin and itemEditEnd events on the grid itself?
          • 2. DataGrid TextInput - detecting change
            VarioPegged Level 2
            Here's something else to try as well. A little more verbose version...
            ...
            <mx:DataGridColumn headerText="Qty" dataField="quantity" rendererIsEditor="true">
            <mx:ItemRenderer>
            <mx:Component>
            <mx:TextInput focusOut="outerDocument.doFocusOut(event);" />
            </mx:Component>
            </mx:ItemRenderer>
            </mx:DataGridColumn>
            ...

            Then handle each event in the respective functions the way you want to.

            TS
            • 3. Re: DataGrid TextInput - detecting change
              jono.r Level 1
              Thanks a heap for the suggestion. I'm getting closer but still have a problem.
              The column dataField "quantity" works fine if I make the DataGrid editable, but using the TextInput component as the itemRender, makes "quantity" a little elusive.

              In the code below, I have the TextInput component refreshing the grid on focusOut - this is just for debigging. In my real code I have it calling function to do some calculations. Either way, the quanity goes to zero as soon as I leave the field :-(

              <mx:DataGrid dataProvider="{productList}" dropShadowEnabled="true" shadowDirection="right" shadowDistance="0" left="22" top="37" bottom="69" width="395" id="productGrid">
              <mx:columns>
              <mx:DataGridColumn headerText="Qty" dataField="quantity" rendererIsEditor="true" width="30">
              <mx:itemRenderer>
              <mx:Component>
              <mx:TextInput focusOut="outerDocument.productList.refresh()"/>
              </mx:Component>
              </mx:itemRenderer>
              </mx:DataGridColumn>
              <mx:DataGridColumn textAlign="left" headerText="Name" dataField="name" showDataTips="true" dataTipField="description" width="110" />
              </mx:columns>
              </mx:DataGrid>

              Can you spot what I'm doing wrong?

              • 4. DataGrid TextInput - detecting change
                VarioPegged Level 2
                Are you updating your data provider with the text input values on focusOut? Try this (I'm assuming your data provider is an ArrayCollection):

                public function updateAndCalculate(event:FocusEvent):void
                {
                var row:int = event.currentTarget.listData.rowIndex;
                productList.getItemAt(row).quantity = event.currentTarget.text;
                ...//other calculations
                }

                ...
                <mx:TextInput focusOut="outerDocument.updateAndCalculate(event)" />
                ...

                It would be a good idea to do proper validation on the text input.

                I've updated the previous post of mine to include "outerDocument" in the function call for future reference. An oversight of mine.

                TS
                • 5. Re: DataGrid TextInput - detecting change
                  jono.r Level 1
                  Thanks for all your help TS - much appreciated!

                  Re: "Are you updating your data provider with the text input values on focusOut?"
                  No, I wasn't. I had been assuming that the binding of the dataProvider to the DataGrid and that specifying "quanity" as the component dataField, would see the entered quantity go straight into the dataProvider (I still hope I'm missing something)

                  I'm now using your suggestion of using the rowIndex to explicitly plug the quantity in (it does need to be rowIndex - 1 though)

                  I'll get there, but struggling to get the behaviour consistant.

                  Thanks again for your help,

                  Jonathan

                  • 6. DataGrid TextInput - detecting change
                    VarioPegged Level 2
                    Jonathan,

                    No problem with the help. I just ran a test of the code I provided and it works as expected. I must not be understanding correctly what your specific problem is. BTW, the rowIndex is a zero-based index, so writing rowIndex - 1 will give you a runtime error on the top-most visible row of the datagrid.

                    FWIW, rowIndex is dynamically calculated based on the rows currently visible if your datagrid happens to have scrollbars. So if you scroll down so that row number 2 is the top row, the rowIndex will read 0 for it, and so on, even though one would expect it to have a rowIndex of 1. The datagrid keeps track of all that logic for you though.

                    quote:

                    I had been assuming that the binding of the dataProvider to the DataGrid and that specifying "quanity" as the component dataField, would see the entered quantity go straight into the dataProvider (I still hope I'm missing something)

                    I don't think you're missing something. If you have the inclination, do a test on the dataProvider values as you're changing your input and you'll see that you need to manually update it.

                    Hope it all works out.

                    TS
                    • 7. DataGrid TextInput - detecting change
                      VarioPegged Level 2
                      Jonathan,

                      OK, so I'm possessed now...:) I found an example in the docs that might be useful:
                      http://tinyurl.com/2nxsjl

                      Closer to what you're looking to do? By having the datagrid column "editorDataField" bind to a property on the custom item renderer component, you get around the issue of having to manually update the dataProvider yourself.

                      Six of one, half dozen of the other.

                      TS
                      • 8. Re: DataGrid TextInput - detecting change
                        jono.r Level 1
                        Thanks TS

                        Possession is 9/10ths of the law so you should be OK ;-)

                        I'll have a good look at that example - it sounds like what I'm looking for... just when I've got it working nicely already.

                        Thanks again,

                        Jonathan
                        • 9. Re: DataGrid TextInput - detecting change
                          jono.r Level 1
                          As you say TS, six on one...

                          Using editorDataField probably does it, but to me it looks like you need to have a custom component to use it. I was hoping that editorDataField ="text" would do the trick, but no luck there. Looks like it needs to be a public variable rather than an property or function.