7 Replies Latest reply on Sep 4, 2009 11:15 AM by NandoLins

    Cancel edition in a Datagrid Column

    NandoLins

      What i´m wishing to do is very simple, i just want to cancel an edition in a DataGrid column,

      Loosing focus of the textbox confirms the edition, i wanted to place 2 buttons above the edition text box, cancel and confirm, but it seems to be impossible...

      any idea?

       

      thanks in advance!!

        • 1. Re: Cancel edition in a Datagrid Column
          Andrew Rosewarn Level 3

          HI There

           

          Use a custom itemRenderer.  You can add logic to the itemRenderer to update the dataGrids data or not depending on the button clicks

           

          Andrew

          1 person found this helpful
          • 2. Re: Cancel edition in a Datagrid Column
            NandoLins Level 1

            i´ve tried that, but that is not enough space to place the buttons,

            my idea was to expand the row´s height, but i didn´t find a way to do that.

            • 3. Re: Cancel edition in a Datagrid Column
              Andrew Rosewarn Level 3

              If your item renderer looked like this

               

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

              <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="182" height="72" >

              <mx:TextInput x="10" y="10" text="{data.someText}" />

              <mx:Button x="10" y="40" label="Button"/>

              <mx:Button x="83" y="40" label="Button"/>

              </mx:Canvas>

               

              with a with and height then that will enlarge the dataGrid rows to fit.

               

              Application

               

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

              <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:local="*">

              <mx:Script>

              <![CDATA[

              import mx.collections.ArrayCollection;

               

              [Bindable]

              private var ac:ArrayCollection = new ArrayCollection([

              {someText : 'Line 1'},

              {someText : 'Line 2'}

              ]);

              ]]>

              </mx:Script>

               

              <mx:DataGrid x="71" y="90" dataProvider="{ac}">

              <mx:columns>

              <mx:DataGridColumn headerText="Column 1" dataField="someText" itemRenderer="Comp1" width="182"/>

              <mx:DataGridColumn headerText="Column 2" dataField="col2"/>

              <mx:DataGridColumn headerText="Column 3" dataField="col3"/>

              </mx:columns>

              </mx:DataGrid>

              </mx:Application>

               

              This works for me

               

              Andrew

              1 person found this helpful
              • 4. Re: Cancel edition in a Datagrid Column
                Andrew Rosewarn Level 3

                Yea that seems to work fine for me so in full, with editing features

                 

                Custom Comp

                 

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

                <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="182" height="72>

                <mx:Script>

                <![CDATA[

                private function handleOk():void {

                this.data.someText = textInput.text

                }

                 

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

                super.data = value;

                textInput.text = data.someText

                }

                 

                private function cancel():void {

                textInput.text = data.someText;

                }

                ]]>

                </mx:Script>

                 

                <mx:TextInput id="textInput" x="10" y="10" />

                <mx:Button x="10" y="40" label="Update" click="handleOk()"/>

                <mx:Button x="85" y="40" label="Cancel" click="cancel()"/>

                 

                </mx:Canvas>

                 

                 

                Application

                 

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

                <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:local="*">

                <mx:Script>

                <![CDATA[

                import mx.collections.ArrayCollection;

                 

                [Bindable]

                private var ac:ArrayCollection = new ArrayCollection([

                {someText : 'Line 1'},

                {someText : 'Line 2'},

                {someText : 'Line 3'},

                {someText : 'Line 4'},

                {someText : 'Line 5'},

                {someText : 'Line 6'},

                {someText : 'Line 7'},

                {someText : 'Line 8'},

                {someText : 'Line 9'},

                {someText : 'Line 10'}

                ]);

                ]]>

                </mx:Script>

                 

                <mx:DataGrid x="71" y="90" dataProvider="{ac}">

                <mx:columns>

                <mx:DataGridColumn headerText="Column 1" dataField="someText" itemRenderer="Comp1" width="182"/>

                <mx:DataGridColumn headerText="Column 2" dataField="col2"/>

                <mx:DataGridColumn headerText="Column 3" dataField="col3"/>

                </mx:columns>

                </mx:DataGrid>

                </mx:Application>

                 

                Hope this helps

                 

                Andrew

                • 5. Re: Cancel edition in a Datagrid Column
                  NandoLins Level 1

                  sure this help,

                  but my idea was to show the buttons only in edition mode, does not make sense to have them while not editing,

                  so here comes the problem, i can put the buttons in the editor renderer but seems that i have to pre-allocate the space that they are going to use, there is no way to expand the cell when editing, and then go back to previous state when finishing it.

                  • 6. Re: Cancel edition in a Datagrid Column
                    Andrew Rosewarn Level 3

                    OK

                     

                    so you could keep the renderer I gave a sample of but create 2 states.  Once with just the text box and one with the buttons in.  When the user clicks in the textbox you can capture the focus and switch to the state with the buttons in.  Then when they update switch back.

                     

                    Andrew

                    • 7. Re: Cancel edition in a Datagrid Column
                      NandoLins Level 1

                      I solved part of my problem,

                      using the component as a editorRenderer, so the datagrid is displayed normally, and when you click in the cell, the text turns into a text box and displays the cancel and edit button.

                      2 problems:

                       

                      1 - The buttons had to be small enough to fit the cell, cause i could not expand it.

                      2 - when i click the update or cancel button it doesn´t stop the edit mode, then i have to click somewhere else, so the component loose focus and then saves or cancel the editing, i´m trying to find a way to manage this but i couldn´t too.