how do i change the item selected in a combobox selection based on a selection of a datagrid object?
Just bind the selectedItem property of the combobox to the dataGrid:
<s:ComboBox
id="combo"
dataProvider="{data}"
selectedItem="{dg.selectedItem}" />
<mx:DataGrid
id="dg"
dataProvider="{data}"/>
use the itemClick event on the datagrid to change the selection of the combo box.
You can find similar answer here Itemclick event in datagrid
Related
I have an AdvancedDataGrid with two columns that have item renderers. Those item renderers are rendering link buttons in their respective columns. I want to be able to click on those link buttons without triggering the itemClick event of the AdvancedDataGrid. Any suggestions for how I could accomplish this?
I've never worked with an AdvancedDataGrid but I assume a few principles hold. The first being the behavior of event propagation. The event gets processed by the button before it gets processed by the grid. This means that we can catch and stop the event from ever reaching the DataGrid. Below is a code sample demonstrating how a DataGrid renderer can have a Button without triggering other behavior.
CustomerRenderer...
<fx:Script>
<![CDATA[
protected function watchButtonClickHandler(event:MouseEvent):void
{
//the line below stops the event from
//propagating through the rest of the display
//list
event.stopImmediatePropagation();
//handle button click logic here
}
]]>
</fx:Script>
<s:Group width="100%" id="buttonGroup">
<s:layout>
<s:HorizontalLayout horizontalAlign="center" verticalAlign="middle"
paddingBottom="1" paddingLeft="1"
paddingRight="1" paddingTop="1" />
</s:layout>
<s:Button id="watchButton" width="98" label="{buttonLabel}"
click="watchButtonClickHandler(event)"/>
</s:Group>
....
Hi I am trying to pass the rowindex when I click on a button in a row, the data value returns the correct information but the rowIndex returns nothing.
<mx:AdvancedDataGridColumn headerText="EDIT" showDataTips="false" editable="true">
<mx:itemRenderer>
<fx:Component>
<mx:HBox horizontalAlign="center" verticalAlign="middle">
<s:Button label="Edit" id="editGeo" click="{outerDocument.onClick(data, rowIndex)}"/>
</mx:HBox>
</fx:Component>
</mx:itemRenderer>
</mx:AdvancedDataGridColumn>
thanks !
I'm surprised you're provided code does not throw an error.
You need to access listData.rowIndex. listData should be an instance of the AdvancedDataGridListData class.
<s:Button label="Edit" id="editGeo" click="{outerDocument.onClick(data, listData.rowIndex)}"/>
Since the HBox does not have a listData property, you may have to implement it on your own for the data to be passed in. Something like this should suffice:
[Bindable]
public var listData:BaseListData;
It has been a while since I've been deep into an MX component, so my memory is a bit rusty on the last part.
In addition to the first answer, try not to use listData.rowIndex when your datagrid has the vertical scroll bar, because the rowIndex just shows the index of current visible Rows.
Try to use the current object index in the DataProvider of the datagrid instead.
I want to delete a row of my datagrid when someone click a button part of that row located below Delete Column. I tried many different way one of those were to
<mx:DataGrid id="userGrid" dataProvider="{userGridData}" width="800" height="500" itemClick="userGrid_itemClickHandler(event)" creationComplete="userGrid_creationCompleteHandler(event)">
<mx:columns>
<mx:DataGridColumn headerText="ID" dataField="user_id" />
<mx:DataGridColumn headerText="Email" dataField="user_email"/>
<mx:DataGridColumn headerText="Delete" itemRenderer="ev.renderers.UserGridDelete" id="deleteCol"/>
<mx:DataGridColumn headerText="Edit" itemRenderer="ev.renderers.UserGridEditRender"/>
</mx:columns>
</mx:DataGrid>
The item render ev.renderers.UserGridEditRender has a delete button listing for click event it basically do userGridData.removeItemAt(userGrid.selectedIndex);
(UserGridData = Data provider of grid with id "userGrid")
But whenever I click the button an exception is throw
RangeError: Index '-1' specified is out of bounds.
How about having your item renderer button dispatch an event that has the selected "data" in it.
dispatchEvent( new DataMonkeyEvent(DataMonkeyEvent.DELETE_ROW, this.data) ); //where "this" is the button and the event should bubble.
listen for that event in the outer document and edit your userGridData accordingly... invalidateList() if you are not using in-house extended dataproviders that listen for children changed jive.
Hope that helps. --jeremy
I am trying to bind an ArrayCollection result coming in from the server to my DataGrid
created dynamically in AS.
The result data is not getting Displayed in the Grid.
var dg:DataGrid = new DataGrid();
dg.width=650;
dg.dataProvider=someArrayCollfromServer;
I am adding the dgColumn as runtime based on some data from a XML and it is the same as defined in below static format.
But if I use the same code and create the DataGrid as a Flex Component as below, it works fine.
<mx:DataGrid id="dg" width="100%" height="100%" dataProvider="{someArrayCollfromServer}">
<mx:columns>
<mx:DataGridColumn dataField="Value" headerText="Value"/>
<mx:DataGridColumn dataField="Code" headerText="Code" />
</mx:columns>
</mx:DataGrid>
This works fine. Is there some functionality or implementation different as far as DataGrid is concerned in Flex and AS.
Any point of issue here?
dg.dataProvider=someArrayCollfromServer; just assigns the current value of the variable someArrayCollfromServer (which might be null if it hasn't been populated yet) to the dataProvider. To get data binding, replace that line with:
BindingUtils.bindProperty(dg, "dataProvider", this, "someArrayCollfromServer");
And make sure that someArrayCollfromServer is [Bindable]
I am using flex when i was select combobox item i want to create new form
for eg. when i select 1 it will appear one form when i select 2 it will appear
two.so and so....
Put your Forms inside of a ViewStack container. You can then bind the ViewStack's selectedIndex to the selectedIndex of your ComboBox:
<mx:ComboBox id="comboBox" />
<mx:ViewStack selectedIndex="{comboBox.selectedIndex}">
<mx:Form id="formA">
...
</mx:Form>
<mx:Form id="formB">
...
</mx:Form>
</mx:ViewStack>