auto-refresh DataGrid on editItem Changed

royjayd
royjayd used Ask the Experts™
on
hi guys

In my scenario i have 2 text boxes and a table with data (4 columns) .I am using datagrid

screen
column1  column2  column3   column4



Enter text1:                  Enter text2:
             Submit Button

When text1 OR text2 are entered the screen (column1,  column2,  column3 ,  column4)  should automatically get refreshed (by making backend call) without clicking on Submit button. how does flex do that?
I am using <mx:remoteObject> to call  my server side objects.
thanks
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Top Expert 2011
Commented:
Here my example

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
				layout="vertical"
				backgroundColor="white">
	
	<mx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import mx.controls.TextInput;
			import mx.controls.dataGridClasses.DataGridColumn;
			import mx.events.DataGridEvent;
			import mx.events.DataGridEventReason;
			
			[Bindable] private var collection:ArrayCollection = new ArrayCollection([
				{code:1, description:"Item 1"},
				{code:2, description:"Item 2"},
				{code:3, description:"Item 3"},
				{code:4, description:"Item 4"},
				{code:5, description:"Item 5"},
				{code:6, description:"Item 6"},
				{code:7, description:"Item 7"}
			]);

			private function editEndHandler(event:DataGridEvent):void {
				var myEditor:TextInput = TextInput(event.currentTarget.itemEditorInstance);
				var newVal:String = myEditor.text;
				var oldVal:String = event.currentTarget.editedItemRenderer.data[event.dataField]; 
				
				if (event.reason == DataGridEventReason.CANCELLED ||
					event.reason == DataGridEventReason.OTHER) {
					return;
				}
				if (oldVal == newVal){
					event.preventDefault();
				}else{
					ro.getOperation("test").send();
				}
			}
		]]>
	</mx:Script>
	
	<mx:RemoteObject id="ro"/>

	<mx:DataGrid dataProvider="{collection}" 
				 editable="true"
				 itemEditEnd="editEndHandler(event)">
		<mx:columns>
			<mx:DataGridColumn headerText="Code"
							   dataField="code" 
							   editable="true"/>
			<mx:DataGridColumn headerText="Description"
							   dataField="description" 
							   editable="true"/>
		</mx:columns>
	</mx:DataGrid>
</mx:Application>

Open in new window

Author

Commented:
hi
two questions
i dont see the text boxes in your code ? If i change somehting in the textboxes  the datagrid should automatically change.

itemEditEnd in datagrid makes the asynchronous call?

thanks
Top Expert 2011

Commented:
Yes! editEndHandler will make a call
Success in ‘20 With a Profitable Pricing Strategy

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Author

Commented:
ok got it
but what invokes editEndHandler ?  
>>>itemEditEnd="editEndHandler(event)">

thx
Top Expert 2011

Commented:
of cource
itemEditEnd="editEndHandler(event)">

Author

Commented:
<mx:DataGrid dataProvider="{collection}" editable="true" itemEditEnd="editEndHandler(event)">
<mx:columns>
<mx:DataGridColumn headerText="Code"   dataField="code" editable="true"/>
<mx:DataGridColumn headerText="Description" dataField="description"    editable="true"/>
</mx:columns>
</mx:DataGrid>

so when i change the data in 'code' box or 'description' box editEndHandler is automatically called? but how does it call? I dont see a 'click' attribute (or some other attribute) which makes the call to editEndHandler ?

thx

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial