Dropdownlist itemrenderer within datagrid

hi
just wondering if anyone has any advice or good examples for the following, I'm finding it a little tough to find a good example on the net
i've got a datagrid, and one column with an item renderer that has a dropdown list
i want of course to be able to reflect the choice in this dropdown list back into my data provider ie. the original array collection
i cant seem to be able to catch any events from the item renderer ?
also need to be able to select the right drop down item when the grid loads up
would appreciate any pointers !
cheers
Stephen

Spark DataGrid or MX DataGrid?

Similar Messages

DropDownList ItemRenderer within Flex Datagrid Not Refreshing

I have a datagrid which contains a Spark dropdownlist that needs to obtain dynamic data.
The datagrid uses a separate dataProvider.
When I use a static ArrayCollection within my ItemRenderer, it works (please see listing 1).
However, when I use Swiz to mediate a 'list complete' event to load the ArrayCollection, the dropdownlist does not show the new data (please see listing 2).
Using the debugger, I inspected the dropdownlist ItemRenderer and have confirmed the new data is being loaded into the ArrayCollection.
The new data is not shown in the UI control. I have tried invalidateProperties() + validateNow() and dispatching events on both the control and the renderer (this), but nothing seems to make the new data appear in the control on the datagrid.
Please help !!!
Listing 1: Datagrid and static ArrayCollection (this works)
<mx:DataGrid x="10" y="25" width="98%" id="dgInventory" paddingLeft="25" paddingRight="25" paddingTop="25" paddingBottom="25"
                     editable="true"
                     itemClick="dgInventory_itemClickHandler(event)" dataProvider="{acInventory}"
                     creationComplete="dgInventory_creationCompleteHandler(event)"
                     height="580">
            <mx:columns>
                <mx:DataGridColumn headerText="Item" dataField="itemName" itemRenderer="components.ItemRendererItem"
                                   rendererIsEditor="true" editorDataField="selection" editable="true"/>
                <mx:DataGridColumn headerText="Quantity Required" dataField="quantityReq" itemRenderer="components.ItemRendererQuantityRequired"
                                   rendererIsEditor="true" editorDataField="selection" editable="true"/>
            </mx:columns>
</mx:DataGrid>
<fx:Script>
    <![CDATA[
        import mx.collections.ArrayCollection;
        import spark.events.IndexChangeEvent;
        public var selection:int;
        [Bindable]
        protected var acItem:ArrayCollection = new ArrayCollection(
            [   { itemName: "Item1"},
                { itemName: "Item2"},
                { itemName: "Item3"},
        protected function dropdownlist1_changeHandler(e:IndexChangeEvent):void
            selection = e.newIndex;
    ]]>
</fx:Script>
<s:DropDownList id="ddlItem" prompt="Select Item" dataProvider="{acItem}" labelField="itemName"
                selectedIndex="{int(dataGridListData.label)}"
                change="dropdownlist1_changeHandler(event)"
                width="80%" top="5" bottom="5" left="5" right="5"/>
Listing 2: Dynamic ArrayCollection (does not work):
<?xml version="1.0" encoding="utf-8"?>
<s:MXDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                          xmlns:s="library://ns.adobe.com/flex/spark"
                          xmlns:mx="library://ns.adobe.com/flex/mx"
                          focusEnabled="true">
    <fx:Script>
        <![CDATA[
            import event.ItemEvent;
            import mx.collections.ArrayCollection;
            import mx.events.FlexEvent;
            import spark.events.IndexChangeEvent;
            public var selection:int;
            [Bindable]
            protected var acItem:ArrayCollection = new ArrayCollection();
            protected function dropdownlist1_changeHandler(e:IndexChangeEvent):void
                selection = e.newIndex;
            protected function ddlItem_creationCompleteHandler(event:FlexEvent):void
                var eve : ItemEvent = new ItemEvent( ItemEvent.LIST_ITEM_REQUESTED );
                dispatchEvent( eve );
            [Mediate( event="ItemEvent.LIST_ITEM_COMPLETE", properties="acItem" )]
            public function refreshness( _acItem : ArrayCollection ):void
                acItem.removeAll();
                var len:int = _acItem.length;
                if (len > 0)
                    for (var i:int=0; i < len; i++)
                        var newItem:Object = new Object;
                        newItem["itemName"] = _acItem[i].itemName;
                        acItem.addItem(newItem);
                this.invalidateProperties();
                this.validateNow();
                //dispatchEvent(new FlexEvent(FlexEvent.DATA_CHANGE));
        ]]>
    </fx:Script>
    <s:DropDownList id="ddlItem" prompt="Select Item" dataProvider="{acItem}" labelField="itemName"
                    selectedIndex="{int(dataGridListData.label)}"
                    creationComplete="ddlItem_creationCompleteHandler(event)"
                    change="dropdownlist1_changeHandler(event)"
                    width="80%" top="5" bottom="5" left="5" right="5"/>
</s:MXDataGridItemRenderer>

After re-reading Peter Ent's ItemRenderer series, this turned out to be quite simple.
I extended DataGrid to have the ArrayCollection property I needed, then added this to my renderer:
[Bindable]
            protected var acItem:ArrayCollection = new ArrayCollection();
            override public function set data( value:Object ) : void
                super.data = value;
                acItem = (listData.owner as MyDataGrid).itemList; // get the data from the renderer's container (by extending it to add a property, if necessary)

Proper URL for LinkButton in itemRenderer within datagrid

I am having problems figuring out the best way to open a URL
using the LinkButton function within an itemRenderer under a
DataGridColumn. I use a HTTPService to call a PHP script to pull
data from a MySQL database. The datagrid fills in properly and all
the data is being displayed. The link button works in that it will
open a new browser (if I put in a fake URL without my required
data).
Below is an example of my column with the link button and the
URL I'm tring to open.
<mx:DataGridColumn headerText="Script ID"
dataField="scriptid">
<mx:itemRenderer>
<mx:Component>
<mx:LinkButton label="{data.scriptid}"
click="navigateToURL(new URLRequest('
http://remoteurl/index.php?file=ext&id='data.scriptid),
'_blank')"/>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
The error that I get is this:
The reference to entity "id" must end with the ';' delimiter.
It's like Flex Builder thinks that the "id" in the URL is a
parameter for the control? I tried enclosing the data.scriptid
within the single quotes. I also tried putting curly brackets {}
around data.scriptid as well.
Any assistance would be appreciated.
Thanks,
Chris

Spark DataGrid or MX DataGrid?

Using a DropDownList in a DataGrid, both with dynamically loaded content

I just bought FlashBuilder 4.5 and even though I have been using ActionScript for years, I am having the hardest time to solve a seemingly simple task:
I have a database table with names of employees:
id
name
departmentid
1
Janet Jackson
2
2
Frank Zappa
2
3
John Travolta
1
in another table I have the departments
id
Department
1
Acting Department
2
Music Department
What I want is a DataGrid with a DropDownList itemRenderer for the Department so that I can selected the Department by name and not by id. This should be a no-brainer (and with HTML and PHP I have done that hundreds of times), but with Flex I can not figure out how to do this. This is what I have done so far:
Created the DataGrid, generated the database service and dragged it to the datagrid to bind the data. Works.
Then I created an itemRenderer for departmentid
In the department itemRenderer I dragged a DropDownList element, created a database service for the departments and dragged it onto that to get the databinding.
So far, so good. When I start it, I have a populated datagrid with a DropDownList that shows all available departments when I click on it.
What I need, of course, is that the Department DropDownList now shows the Department of the Employee row. When I change the Department in the DropDownList, it should update the Employee Database table.
I literally spend now days on trying to figure this out and can't find anything on the Internet that would help me. If you could give me some advise or even show me how the code needs to look, it would be GREATLY appreciated.
I am pasting here also the code:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                  xmlns:s="library://ns.adobe.com/flex/spark"
                  xmlns:mx="library://ns.adobe.com/flex/mx"
                  xmlns:employeeservice="services.employeeservice.*"
                  width="982" height="380" minWidth="955" minHeight="600">
     <fx:Script>
          <![CDATA[
               import mx.controls.Alert;
               import mx.events.FlexEvent;
               protected function dataGrid_creationCompleteHandler(event:FlexEvent):void
                    getAllEmployeeResult.token = employeeService.getAllEmployee();
          ]]>
     </fx:Script>
     <fx:Declarations>
          <s:CallResponder id="getAllEmployeeResult"/>
          <employeeservice:EmployeeService id="employeeService"
                                                   fault="Alert.show(event.fault.faultString + '\n' + event.fault.faultDetail)"
                                                   showBusyCursor="true"/>
          
     </fx:Declarations>
     <s:DataGrid id="dataGrid" x="52" y="67" width="455"
                    creationComplete="dataGrid_creationCompleteHandler(event)" editable="true"
                    requestedRowCount="4">
          <s:columns>
               <s:ArrayList>
                    <s:GridColumn dataField="id" headerText="id"></s:GridColumn>
                    <s:GridColumn dataField="firstname" headerText="firstname"></s:GridColumn>
                    <s:GridColumn dataField="lastname" headerText="lastname"></s:GridColumn>
                    <s:GridColumn dataField="departmentid" editable="false" headerText="departmentid"
                                     itemRenderer="components.DepartmentDropDownList"></s:GridColumn>
               </s:ArrayList>
          </s:columns>
          <s:typicalItem>
               <fx:Object id="id1" departmentid="departmentid1" firstname="firstname1"
                            lastname="lastname1"></fx:Object>
          </s:typicalItem>
          <s:AsyncListView list="{getAllEmployeeResult.lastResult}"/>
     </s:DataGrid>
</s:Application>
Here the code of the itemRenderer:
<?xml version="1.0" encoding="utf-8"?>
<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"
                         xmlns:departmentservice="services.departmentservice.*"
                         width="172" height="34" clipAndEnableScrolling="true">
     <fx:Script>
          <![CDATA[
               import mx.controls.Alert;
               import mx.events.FlexEvent;
               override public function prepare(hasBeenRecycled:Boolean):void {
                    lblData.text = data[column.dataField]
               protected function dropDownList_creationCompleteHandler(event:FlexEvent):void
                    getAllDepartmentResult.token = departmentService.getAllDepartment();
          ]]>
     </fx:Script>
     <fx:Declarations>
          <s:CallResponder id="getAllDepartmentResult"/>
          <departmentservice:DepartmentService id="departmentService"
                                                        fault="Alert.show(event.fault.faultString + '\n' + event.fault.faultDetail)"
                                                        showBusyCursor="true"/>
     </fx:Declarations>
     <s:Label id="lblData" top="9" left="7"/>
     <s:DropDownList id="dropDownList" x="34" y="5" width="128"
                         creationComplete="dropDownList_creationCompleteHandler(event)"
                         labelField="department">
          <s:AsyncListView list="{getAllDepartmentResult.lastResult}"/>
     </s:DropDownList>
</s:GridItemRenderer>

I just bought FlashBuilder 4.5 and even though I have been using ActionScript for years, I am having the hardest time to solve a seemingly simple task:
I have a database table with names of employees:
id
name
departmentid
1
Janet Jackson
2
2
Frank Zappa
2
3
John Travolta
1
in another table I have the departments
id
Department
1
Acting Department
2
Music Department
What I want is a DataGrid with a DropDownList itemRenderer for the Department so that I can selected the Department by name and not by id. This should be a no-brainer (and with HTML and PHP I have done that hundreds of times), but with Flex I can not figure out how to do this. This is what I have done so far:
Created the DataGrid, generated the database service and dragged it to the datagrid to bind the data. Works.
Then I created an itemRenderer for departmentid
In the department itemRenderer I dragged a DropDownList element, created a database service for the departments and dragged it onto that to get the databinding.
So far, so good. When I start it, I have a populated datagrid with a DropDownList that shows all available departments when I click on it.
What I need, of course, is that the Department DropDownList now shows the Department of the Employee row. When I change the Department in the DropDownList, it should update the Employee Database table.
I literally spend now days on trying to figure this out and can't find anything on the Internet that would help me. If you could give me some advise or even show me how the code needs to look, it would be GREATLY appreciated.
I am pasting here also the code:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                  xmlns:s="library://ns.adobe.com/flex/spark"
                  xmlns:mx="library://ns.adobe.com/flex/mx"
                  xmlns:employeeservice="services.employeeservice.*"
                  width="982" height="380" minWidth="955" minHeight="600">
     <fx:Script>
          <![CDATA[
               import mx.controls.Alert;
               import mx.events.FlexEvent;
               protected function dataGrid_creationCompleteHandler(event:FlexEvent):void
                    getAllEmployeeResult.token = employeeService.getAllEmployee();
          ]]>
     </fx:Script>
     <fx:Declarations>
          <s:CallResponder id="getAllEmployeeResult"/>
          <employeeservice:EmployeeService id="employeeService"
                                                   fault="Alert.show(event.fault.faultString + '\n' + event.fault.faultDetail)"
                                                   showBusyCursor="true"/>
          
     </fx:Declarations>
     <s:DataGrid id="dataGrid" x="52" y="67" width="455"
                    creationComplete="dataGrid_creationCompleteHandler(event)" editable="true"
                    requestedRowCount="4">
          <s:columns>
               <s:ArrayList>
                    <s:GridColumn dataField="id" headerText="id"></s:GridColumn>
                    <s:GridColumn dataField="firstname" headerText="firstname"></s:GridColumn>
                    <s:GridColumn dataField="lastname" headerText="lastname"></s:GridColumn>
                    <s:GridColumn dataField="departmentid" editable="false" headerText="departmentid"
                                     itemRenderer="components.DepartmentDropDownList"></s:GridColumn>
               </s:ArrayList>
          </s:columns>
          <s:typicalItem>
               <fx:Object id="id1" departmentid="departmentid1" firstname="firstname1"
                            lastname="lastname1"></fx:Object>
          </s:typicalItem>
          <s:AsyncListView list="{getAllEmployeeResult.lastResult}"/>
     </s:DataGrid>
</s:Application>
Here the code of the itemRenderer:
<?xml version="1.0" encoding="utf-8"?>
<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"
                         xmlns:departmentservice="services.departmentservice.*"
                         width="172" height="34" clipAndEnableScrolling="true">
     <fx:Script>
          <![CDATA[
               import mx.controls.Alert;
               import mx.events.FlexEvent;
               override public function prepare(hasBeenRecycled:Boolean):void {
                    lblData.text = data[column.dataField]
               protected function dropDownList_creationCompleteHandler(event:FlexEvent):void
                    getAllDepartmentResult.token = departmentService.getAllDepartment();
          ]]>
     </fx:Script>
     <fx:Declarations>
          <s:CallResponder id="getAllDepartmentResult"/>
          <departmentservice:DepartmentService id="departmentService"
                                                        fault="Alert.show(event.fault.faultString + '\n' + event.fault.faultDetail)"
                                                        showBusyCursor="true"/>
     </fx:Declarations>
     <s:Label id="lblData" top="9" left="7"/>
     <s:DropDownList id="dropDownList" x="34" y="5" width="128"
                         creationComplete="dropDownList_creationCompleteHandler(event)"
                         labelField="department">
          <s:AsyncListView list="{getAllDepartmentResult.lastResult}"/>
     </s:DropDownList>
</s:GridItemRenderer>

ItemRenderer and DataGrid Problem

Hi guys.
I'm on creating a small app that simply pulls information
from an XML file, displays it in a DataGrid then allows the user to
filter and search it. First things first though; I'll explain what
I have so far then detail my problem.
I get the XML file via HTTPService then place the results in
a Bindable ArrayCollection. When the Datagrid's source is set to
that ArrayCollection it works fine. What I am initially trying to
do is use an itemRenderer in one of the columns that displays lines
of text depending on the values of the current row.
For example, the structure of my XML file is (roughly):
<content>
<name>Name1</name>
<description>Description Goes Here</description>
<audience1>yes</audience1>
<audience2>no</audience2>
<audience3>yes</audience3>
</content>
So what I am trying to do is group the audiences that each
piece of "content" has a yes value to. So under the "Audiences"
column in the datagrid, the above content would say
"Audience1
Audience3"
as it has a yes value in between audience 1 and 3. I've tried
writing very basic code within the itemRenderer whereby I override
the public function set data and do some checks there but it never
seems to work right. I've tried using Arrays within that to store
the current audiences but I clearly haven't got the right format
for that.
There must be a more efficient way of doing this. I'm fairly
new to both Flex and AS3 (been using AS2 quite a while now) but I
have a feeling there would be some way to store each row's audience
list in an array/object/model so I can refer to it later (I'm
intending to filter these results by audience type later so I think
I will HAVE to do it this way eventually). I've read quite a few
tutorials and guides but I honestly don't know where to look
anymore, none of them seem to cover this specific problem.
I hope this makes sense to you guys and any guidance you
could give me would be greatly appreciated.
Cheers

LabelFunction produces a display-only column.
To filter, you will need to use the underlying data.
Another solution to consider is to create a custom item
class. Loop over the xmllist and build instances of the class,
populating the properties from the xml.
have a property who's value is calculated based on the
audience properties values. Since it is a "real" data property in
each item, you can filter on it directly.
Tracy

Changing State within Datagrid Not Working

I have a datagrid with one column containing a linkbutton
with the following code:
<mx:DataGridColumn headerText="Text" textAlign="center"
width="70">
<mx:itemRenderer>
<mx:Component>
<mx:LinkButton label="{data.number}"
click="currentState='differentstate'"/>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
The issue is when the link is clicked an error appears saying
the state is undefined. The state is defined and works when
referenced with a linkbutton outside the datagrid.
Is the code to change the state different when within an
itemrenderer?
Thanks.

Thanks for the suggestion babo_ya.
I tried that - and the positive is - it no longer throws an
error...but for some reason it still doesn't show it. In fact, I
applied a transition to the state - one on initiation and another
when closing - i added a button outside the datagrid to see how the
effect would appear. When I click the linkbutton inside the
datagrid it appears to apply only the closing transition: from
'differentstate' to '*'. What could I be missing?
Anyone's help would be much appreciated.
Thanks again.

Using a custom itemrenderer in datagrid to update value in the same row but different column/cell

Here's what I have so far. I have one datagrid (dg1) with enable drag and another datagrid (dg2) with dropenabled. Column3 (col3) of dg2 also has a custom intemrenderer that's just a hslider.
When an item from dg1 is dropped on dg2, a custom popup appears that asks you to use the slider in the popup to set a stress level. Click ok and dg2 is populated with dg1's item as well as the value you selected from the popup window. I was also setting a sliderTemp variable that was bound to the itemrender slider to set it but that's obviously causing issues as well where all the itemrenderer sliders will change to the latest value and I don't want that.
What is needed from this setup is when you click ok from the popup window, the value you choose from the slider goes into dg2 (that's working) AND the intemrenderer slider needs to be set to that value as well. Then, if you used the intemrenderer slider you can change the numeric value in the adjacent column (col2).   I just dont know how to hook up the itemrenderer slider to correspond with that numeric value (thatds be in col2 on that row);
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" minWidth="955" minHeight="600"
                    xmlns:viewStackEffects="org.efflex.mx.viewStackEffects.*" backgroundColor="#FFFFFF" creationComplete="init(event)"
                    xmlns:components="components.*" xmlns:local="*">
     <mx:Script>
          <![CDATA[
               import mx.binding.utils.ChangeWatcher;
               import mx.collections.ArrayCollection;
               import mx.controls.Alert;
               import mx.controls.TextInput;
               import mx.core.DragSource;
               import mx.core.IUIComponent;
               import mx.events.CloseEvent;
               import mx.events.DataGridEvent;
               import mx.events.DragEvent;
               import mx.events.FlexEvent;
               import mx.events.ListEvent;
               import mx.events.SliderEvent;
               import mx.events.SliderEventClickTarget;
               import mx.managers.DragManager;
               import mx.managers.PopUpManager;
               import mx.utils.ObjectUtil;
               [Bindable]private var myDP1:ArrayCollection;
               [Bindable]private var myDP2:ArrayCollection;
               [Bindable]public var temp:String;
               [Bindable]public var slideTemp:Number;
               private var win:Dialog;
               protected function init(event:FlexEvent):void{
                    myDP1 = new ArrayCollection([{col1:'Separation from friends and family due to deployment'},{col1:'Combat'},{col1:'Divorce'},{col1:'Marriage'},
                         {col1:'Loss of job'},{col1:'Death of a comrade'},{col1:'Retirement'},{col1:'Pregnancey'},
                         {col1:'Becoming a parent'},{col1:'Injury from an attack'},{col1:'Death of a loved one'},{col1:'Marital separation'},
                         {col1:'Unwanted sexual experience'},{col1:'Other personal injury or illness'}])
                    myDP2 = new ArrayCollection()
               protected function button1_clickHandler(event:MouseEvent):void
                    event.preventDefault();
                    if(txt.text != "")
                         Alert.yesLabel = "ok";
                         Alert.show("", "Enter Stress Level", 3, this,txtClickHandler);
               private function image_dragEnter(evt:DragEvent):void {
                    var obj:IUIComponent = IUIComponent(evt.currentTarget);
                    DragManager.acceptDragDrop(obj);
               private function image_dragDrop(evt:DragEvent):void {
                    var item:Object = dg2.selectedItem;
                    var idx:int = myDP2.getItemIndex(item);
                    myDP2.removeItemAt(idx);
               protected function dg1_changeHandler(event:ListEvent):void
                    temp=event.itemRenderer.data.col1;
               protected function dg2_dragDropHandler(event:DragEvent):void
                    event.preventDefault();
                    dg2.hideDropFeedback(event as DragEvent)
                    var win:Dialog = PopUpManager.createPopUp(this, Dialog, true) as Dialog;
                    win.btn.addEventListener(MouseEvent.CLICK, addIt);
                    PopUpManager.centerPopUp(win);
                    win.mySlide.addEventListener(Event.CHANGE, slideIt);
               private function txtClickHandler(event:CloseEvent):void {
                    trace("alert");
                    if (event.detail==Alert.YES){
                         myDP2.addItem({label:temp});
               private function addIt(event:MouseEvent):void{
                    myDP2.addItem({col1:temp, col2:slideTemp})
               private function slideIt(event:SliderEvent):void{
                    slideTemp = event.target.value;
          ]]>
     </mx:Script>
               <mx:Panel x="10" y="10" width="906" height="481" layout="absolute">
                    <mx:Image x="812" y="367" source="assets/woofie.png" width="64" height="64" dragDrop="image_dragDrop(event);" dragEnter="image_dragEnter(event);"/>
                    <mx:DataGrid x="14" y="81" width="307" height="251" dragEnabled="true" id="dg1" dataProvider="{myDP1}" wordWrap="true" variableRowHeight="true" change="dg1_changeHandler(event)">
                         <mx:columns>
                              <mx:DataGridColumn headerText="Examples of Life Events" dataField="col1"/>
                         </mx:columns>
                    </mx:DataGrid>
                    <mx:DataGrid x="329" y="81" height="351" width="475" dragEnabled="true" dropEnabled="true" id="dg2"
                                    wordWrap="true" variableRowHeight="true" dataProvider="{myDP2}" editable="true"
                                    dragDrop="dg2_dragDropHandler(event)" rowHeight="50" verticalGridLines="false" horizontalGridLines="true" >
                         <mx:columns>
                              <mx:DataGridColumn headerText="Stressor" dataField="col1" width="300" wordWrap="true" editable="false">
                              </mx:DataGridColumn>
                              <mx:DataGridColumn headerText="Stress Level" dataField="col2" width="82" editable="false"/>
                              <mx:DataGridColumn headerText="Indicator" dataField="col3" width="175" paddingLeft="0" paddingRight="0" wordWrap="true" editable="false">
                                   <mx:itemRenderer>
                                        <mx:Component>
                                             <components:Compslide/>
                                        </mx:Component>
                                   </mx:itemRenderer>
                              </mx:DataGridColumn>
                         </mx:columns>
                    </mx:DataGrid>
                    <mx:Text x="14" y="10" text="The first category of underlying stressors is called Life Events. The list includes both positive and negative changes that individuals experience. Both can be stressful. For example, becoming a parent is usually viewed as a positive thing, but it also involves many new responsibilities that can cause stress. " width="581" height="73" fontSize="12"/>
                    <mx:TextInput x="10" y="380" width="311" id="txt"/>
                    <mx:Text x="10" y="335" text="Add events to your list that are not represented in the example list. Type and click "Add to List"
" width="311" height="51" fontSize="12"/>
                    <mx:Button x="234" y="410" label="Add to List" click="button1_clickHandler(event)"/>
               </mx:Panel>
</mx:Application>

how do i go about doing that? do i put a change event function in the itemrenderer? and how would i eventually reference data.col2?

WPF Finding Selected ComboBox Item Within DataGrid

Hi all... I'm having an issue trying to access the selected item value in a ComboBox within a DataGridTemplateColumn.
Through another question/answer I have got the ComboBox displaying the names as it should but the next step I'm having issues with is to be able to loop through each row in the DataGrid and determine the selected value of the ComboBox in that row as
well as some other items and run some other code based on those values.
Any help would be appreciated.
Thanks,
Greg
<Grid>
<DataGrid x:Name="gvDefaultCWWSchedule" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="10,109,10,214" AutoGenerateColumns="False" Grid.Row="0"
AllowDrop="True" IsReadOnly="False" SelectionMode="Single" Background="Beige" CanUserAddRows="False">
<DataGrid.Columns>
<DataGridTemplateColumn Width="150">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<ComboBox Name="ddlUsers"
ItemsSource="{Binding Path=Users}"
DisplayMemberPath="{Binding Name, Mode=TwoWay}"
SelectedValuePath="{Binding Uid, Mode=TwoWay}"
SelectedIndex="{Binding Uid, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
SelectionChanged="ComboBox_SelectionChanged"
>
<ComboBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Name}" />
</StackPanel>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTextColumn Binding="{Binding WeekNumber}" />
</DataGrid.Columns>
</DataGrid>
<Button Content="Button" HorizontalAlignment="Left" Margin="729,32,0,0" VerticalAlignment="Top" Width="75" Click="Button_Click"/>
</Grid>
public partial class Test : Window
public Test()
InitializeComponent();
BindDefaultCWWSchedule();
private void BindDefaultCWWSchedule()
// THIS IS COMING FROM MY DB
List<CurrentUser> UsersFinal = new List<CurrentUser>();
UsersFinal.Add(new CurrentUser { Uid = 1, Name = "JOHN" });
UsersFinal.Add(new CurrentUser { Uid = 2, Name = "BILL" });
UsersFinal.Add(new CurrentUser { Uid = 3, Name = "MARY" });
ObservableCollection<CWWDefaultScheduleWeek> DefaultSchedules = new ObservableCollection<CWWDefaultScheduleWeek>();
DefaultSchedules.Add(new CWWDefaultScheduleWeek { Users = UsersFinal, WeekNumber = 1, SelectedUser = null });
DefaultSchedules.Add(new CWWDefaultScheduleWeek { Users = UsersFinal, WeekNumber = 2, SelectedUser = null });
DefaultSchedules.Add(new CWWDefaultScheduleWeek { Users = UsersFinal, WeekNumber = 3, SelectedUser = null });
DefaultSchedules.Add(new CWWDefaultScheduleWeek { Users = UsersFinal, WeekNumber = 4, SelectedUser = null });
gvDefaultCWWSchedule.ItemsSource = DefaultSchedules;
private void Button_Click(object sender, RoutedEventArgs e)
var rows = gvDefaultCWWSchedule.ItemsSource;
ObservableCollection<CWWDefaultScheduleWeek> CWWSchedAssignments = new ObservableCollection<CWWDefaultScheduleWeek>();
foreach (var row in rows)
CWWDefaultScheduleWeek r = (CWWDefaultScheduleWeek)row;
// FOR EACH ROW HERE I'M WANTING TO CREATE A LIST OF ITEMS AND RUN FURTHER CODE BASED ON IT... ISSUE IS FINDING THE ACTUAL SELECTED USER ON EACH ROW...
CWWSchedAssignments.Add(new CWWDefaultScheduleWeek
Users = r.Users,
SelectedUser = r.SelectedUser,
WeekNumber = r.WeekNumber
private void ComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
gvDefaultCWWSchedule.CommitEdit();
public class CWWDefaultScheduleWeek
public IEnumerable<CurrentUser> Users { get; set; }
public CurrentUser SelectedUser { get; set; }
public int WeekNumber { get; set; }
public class CurrentUser
public int Uid { get; set; }
public string Name { get; set; }

In a way, wpf is similar to web.
More so than windows forms anyhow.
XAML is mark up and flows like html.
You have padding and margin which are rather familiar concepts.
Whereas windows forms is absolute positioning and... well totally different from markup.
You might find this sample interesting as a sort of mvvm taster.
https://gallery.technet.microsoft.com/WPF-Dialler-simulator-d782db17
and event handling equivalents
http://social.technet.microsoft.com/wiki/contents/articles/30564.wpf-uneventful-mvvm.aspx
Note
With a combo you bind the selecteditem to a propfull and then you can put a method call in the setter. That will then be invoked when the user changes selection.
Good luck and welcome to wpf development.
It's a great technology.
Hope that helps.
Recent Technet articles: Property List Editing;
Dynamic XAML

Dynamic setting of itemRenderer in datagrid

Can we dynamically set the itemrenderer in a datagrid
depending upon some value in data?

HI,
how about to display different controls in a rows for that column? Can it be done?
Thanks,,
-jenue

Itemrenderer in datagrid

i've the following datagrid code:
<mx:DataGrid id="empdg"
dataProvider="{employeeService.lastResult.employees.employee}"
width="40%" editable="true"
itemClick="addRow(event)">
<mx:columns>
<mx:DataGridColumn headerText="Reportees" editable="false" itemRenderer="components.empname" width="40"/>
</mx:columns>
</mx:DataGrid>
the components.empname code is follows:
<s:MXDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
autoDrawBackground="true">
<mx:HBox>
<mx:Image source="http://abc.com/add.png"/>
</mx:HBox>
</s:MXDataGridItemRenderer>
addrow method (in the datagrid) adds a new row when clicked on the column. i would like to change the image source in the above code dynamically to point to "delete.png" with the first column in the first row still pointing to add.png but first column in the second row pointing to delete.png (and so on). As of now when ever new row gets added, it comes with add.png in the first column of the new row...i want to replace this with delete.png.
something like this:
+
Can somebody help?
Thank you
Bo

Hello RootSounds,
Good to hear from you again. Well yes, your understanding is correct.
How do i do that?
Bo

ItemRenderer for DataGrid

Here's a nice problem
Please test the code below.
As you will see, it works fine! The scores (7) are presented neatly. That's because in the itemRenderer for column 2, I bind the text property to
data.item2.score.
BUT
In my application, I DON'T KNOW WHAT THIS PROPERTY WILL BE because the dataProvider is generated dynamically. The names of the properties are generated dynamically using a prefix ("item") and a suffix which is an id from the database. So the dataProvider could hold the props 'item325' and 'item23' and so on...
What I want to do is to store the name of the property in the labelField of the column (as I did in the example). The itemRenderer should now get its data using that labelField.
In my ItemRenderer which says now 'text="{data.item2.score}"' should be 'text="{data[referenceToLabelField].score}"'
Any Ideas?
thx;
d
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">
    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            [Bindable]
            private var dp:ArrayCollection = new ArrayCollection();
            private function init():void
                var a:Array = new Array();
                for (var i:int = 0; i < 10; i++)
                    a.push({pupil: "Pupil " + i, item2: {score: 7}});
                dp.source = a;
        ]]>
    </mx:Script>
    <mx:DataGrid dataProvider="{dp}">
        <mx:columns>
            <mx:DataGridColumn headerText="Column 1" dataField="pupil" width="200"/>
            <mx:DataGridColumn headerText="Column 2" dataField="item2" width="200">
                <mx:itemRenderer>
                    <mx:Component>
                        <mx:Label text="{data.item2.score}" width="10"/>
                    </mx:Component>
                </mx:itemRenderer>
            </mx:DataGridColumn>
        </mx:columns>
    </mx:DataGrid>
</mx:Application>

The project I'm working on is a school test generator. I created a test generator. Let's say I create a test named "Final exam". In this test I link a student group and I add as much testItems as I want. Let's say I make 2 testItems named "Written result" and "Attendance during schoolyear". Now, my application will generate scores for each student and for each item.
We'll generate a dataGrid as:
                    Written result          Attendance during schoolyear
Pupil 1               7                                   5
Pupil 2               6                                   9
Pupil 3               8                                   2
In this simple example, my dataProvider could look like this:
{pupil: "Pupil 1", score1: 7, score2: 5},
{pupil: "Pupil 2", score1: 6, score2: 9},
{pupil: "Pupil 3", score1: 8, score2: 2}
Setting the labelField to 'score1' and 'score2' will work.
So far, so good! My problem however is that the scores are not just figures but Objects! Why? Because my system makes it possible to VIEW the scores in diffrent ways, such as figures, smileys, checkboxes etc. The diffrent columns in my grid will each have a diffrent itemRenderer. The itemRenderers will take properties from their dataObject to render the output. My dataProvider looks like:
{pupil: "Pupil 1", score1: {score: 7, foo: 'whatever'}, score2: {score: 5, foo: 'whatever'}},
{pupil: "Pupil 2", score1: {score: 6, foo: 'whatever'}, score2: {score: 9, foo: 'whatever'}},
{pupil: "Pupil 3", score1: {score: 8, foo: 'whatever'}, score2: {score: 2, foo: 'whatever'}}
Setting the labelField to 'score1' and 'score2' won't work!
The data property for the itemRenderer of column 2 should be
     {score: 7, foo: 'whatever'}
instead of
     {pupil: "Pupil 1", score1: {score: 7, foo: 'whatever'}, score2: {score: 5, foo: 'whatever'}}
Does that make things clearer?
Thx,
d

Move focus from one to another itemRenderer inside DataGrid itemRenderer

I have a mx: DataGrid with 4 columns that have a itemRenderer with the following settings:
- Mx:DataGrid:
<code>
<mx:DataGrid id="itensPedidoCompraList"
      width="100%"
height="120"
dataProvider="{ model.pedidoCompra.itens }"
editable="true"
itemEditEnd="itensPedidoCompraList_itemEditEndHandler(event)">
</code>
- Mx:DataGridColumn:
<code>
<mx:DataGridColumn headerText="{resourceManager.getString('cadastroPedidoCompra', 'ident.PercentualDesconto') }"
                   width="60"
                   textAlign="right"
                   rendererIsEditor="true"
                                      editorDataField="data">
      <mx:itemRenderer>
                 <fx:Component>
                       <mx:Canvas>
                                 <input:NumberInput width="55"                                                                number="@{ data.percentualDesconto }"/>
                       </mx:Canvas>
            </fx:Component>
      </mx:itemRenderer>
</mx:DataGridColumn>
</code>
The user clicks on the line of the grid and click on the column to edit.
After him change or add value, ENTER key and have to move the focus to another column in the same line.
The way I'm doing, is moving to the column below.
What is the best way to do to move to the right column?
thank you

Try adding a capture phase event listener to DataGrid for keyDown and changing the key from ENTER to TAB

Datagrid within Datagrid - Rows not resizing to fit content

Hi,
I have a datagrid with a custom item renderer that renders another data grid... so one column will render datagrids within the outer datagrid. The problem is that the row does not size to fit the inner datagrid. I can't set the rowHeight on the outer datagrid because the inner datagrids have dynamic data and i don't know how many rows they will have. Also, after the datagrid is rendered, more rows may be added to any number of inner datagrids at a later time... and I need the rows holding them to resize accordingly. Setting variableRowHeight=true on the outer grid doesn't seem to help either.
Any ideas on how to do this?
Thanks!

Hi, Alex, thanks for the info. It turns out, I was wrong. The way it looked made me think it was a row-resizing problem, but it turns out that the rows were resizing fine... it was the outer datagrid itself that was not resizing properly. Apparently it has to do with the combination of variableRowHeight and rowCount. The jira issue may look familiar to you.
http://bugs.adobe.com/jira/browse/SDK-13507
Anyway, I got this from the jira comments and works pretty good...
height="{theGrid.measureHeightOfItems(-1, theGrid.dataProvider.length + 1)}"
I also have to call similar code when the data provider of the inner grids add/remove items.
Thanks!

Fire itemrenderer in datagrid

Hi All,
I am adding a row in my datagrid dynamically using an external button but couple columns contain a combo box as itemrenderer.
The first item (index 0) in my comboBox have option "---select---".
How can I set this first index for both comboBox item renderers after I add the new row?
Thanks

Hello RootSounds,
Good to hear from you again. Well yes, your understanding is correct.
How do i do that?
Bo

Using itemRenderer in dataGrid?

I wish to restrict user input, to match database type, in a
dataGrid.
I have used an itemRenderer with the 'restrict' property set:
<mx:itemRenderer>
<mx:Component>
<mx:TextInput restrict="0-9."/>
</mx:Component>
</mx:itemRenderer>
to restrict user input to numeric input only.
This does not work. But, if I use the 'restrict' property on
a
textInput outside the dataGrid it does.
What am I doing wrong?

how do i go about doing that? do i put a change event function in the itemrenderer? and how would i eventually reference data.col2?

Dropdownlist itemrenderer within datagrid

Similar Messages

Maybe you are looking for