Databases
StackOverflow2013
Postsdbo
POFlex: Simulating a click on a button inside an item renderer of a data grid
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POFlex: Simulating a click on a button inside an item renderer of a data grid
    primarykey
    data
    text
    <p>I'm using a <strong>data grid with an item renderer</strong> that creates a toggle button. <strong>The idea is to have a list of items and only allow one to be selected and pre-select one at start.</strong></p> <p>I've got the single button selection working, meaning that when I click on on toggle button, the others are deselected.</p> <p>My problem is to create a way of pre-selecting an element of the data grid or simulate a click on a row and selecting the corresponding toggle button.</p> <p>If I use the datagrid.selectedIndex the result is a selection but the toggle button doesn't get selected.</p> <p>Here is the code example</p> <p>In this example <strong>I am using the array value "selected" to define selected button</strong>, not my favourite solution but the one that worked first.</p> <p>The array collection:</p> <pre><code>public static const ValuesList : ArrayCollection = new ArrayCollection( [ {ID:0, Name:"One", selected:false}, {ID:1, Name:"Two", selected:false}, {ID:2, Name:"Three", selected:false}, {ID:3, Name:"Four", selected:false} ] ); </code></pre> <p>The data grid:</p> <pre><code>&lt;s:DataGrid id="dataGrid" dataProvider={ValuesList} &gt; &lt;s:columns&gt; &lt;s:ArrayList&gt; &lt;s:GridColumn id="GridCol0" /&gt; &lt;s:GridColumn id="GridCol1" /&gt; &lt;s:GridColumn id="GridCol2" itemRenderer = "detail_ItemRenderer" /&gt; &lt;/s:ArrayList&gt; &lt;/s:columns&gt; &lt;/s:DataGrid&gt; </code></pre> <p>The column item renderer:</p> <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt; &lt;s:GridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" clipAndEnableScrolling="true"&gt; &lt;fx:Script&gt; &lt;![CDATA[ import mx.events.FlexEvent; /** * Creatioon complete event handler to set toggle button content value. * */ protected function MyToggleButton_creationCompleteHandler(event:FlexEvent) : void { MyListToggleButton.label = data.Name; MyToggleButton.selected = data.selected; } /** * One of the only function that are called on item interaction. * */ override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void { super.updateDisplayList(unscaledWidth,unscaledHeight); MyToggleButton.selected = data.selected; } ]]&gt; &lt;/fx:Script&gt; &lt;s:ToggleButton id="MyToggleButton" width="100%" height="100%" creationComplete="MyToggleButton_creationCompleteHandler(event)" /&gt; &lt;/s:GridItemRenderer&gt; </code></pre> <p>SOLUTION:</p> <p>Using the data array to pass information into the Toggle button. Setting one value to "true" will display the selected element.</p> <p>To insure data integrity I advise to set the selected index of the grid to the corresponding index of the value set to "true":</p> <pre><code>public function SetSelectedIndexByName() : int { for (var i : int=0; i &lt; dataGrid.dataProvider.length ; i++) { if (dataGrid.dataProvider[i].toString().toUpperCase() == "TRUE") { return i; } } return -1; } </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USPimenta
    1. USPimenta
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COI don't see the code in there that handles the toggling. Without knowing how you are doing that part, it's difficult to give you a good answer.
      singulars
      1. POFlex: Simulating a click on a button inside an item renderer of a data grid
      1. USAmy Blankenship
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload