2 Replies Latest reply on Jan 26, 2012 12:22 PM by DonMitchinson

    how to save the edited datagrid using array collection?

    mostpranoy Level 1

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

      <s:View xmlns:fx="http://ns.adobe.com/mxml/2009"

        xmlns:s="library://ns.adobe.com/flex/spark"

        xmlns:mx="library://ns.adobe.com/flex/mx"

        title="demo2">

        <fx:Declarations>

        <!-- Place non-visual elements (e.g., services, value objects) here -->

        </fx:Declarations>

        <fx:Script>

        <![CDATA[               

        import mx.collections.ArrayCollection;

        import mx.events.FlexEvent;

                 

        import spark.components.gridClasses.IGridItemEditor;

        import spark.components.gridClasses.IGridItemRenderer;

        import spark.events.GridItemEditorEvent;

       

        [Bindable]

        private var myDP:ArrayCollection = new ArrayCollection([

        {label1:"Day1 ", label2:" Sub1", label3:"Sub2 ", label4:"Sub3 ", label5:"Sub4 ", label6:"Sub5 ", label7:"Sub6 "},

        {label1:"Day2 ", label2:" Sub1", label3:"Sub2 ", label4:"Sub3 ", label5:"Sub4 ", label6:"Sub5 ", label7:"Sub6 "},

        {label1:"Day3 ", label2:" Sub1", label3:"Sub2 ", label4:"Sub3 ", label5:"Sub4 ", label6:"Sub5 ", label7:"Sub6 "},

        {label1:"Day4 ", label2:" Sub1", label3:"Sub2 ", label4:"Sub3 ", label5:"Sub4 ", label6:"Sub5 ", label7:"Sub6 "},

        {label1:"Day5 ", label2:" Sub1", label3:"Sub2 ", label4:"Sub3 ", label5:"Sub4 ", label6:"Sub5 ", label7:"Sub6 "},

        {label1:"Day6 ", label2:" Sub1", label3:"Sub2 ", label4:"Sub3 ", label5:"Sub4 ", label6:"Sub5 ", label7:"Sub6 "}

           

        ]);      

       

       

       

        protected function myDG_gridItemEditorSessionSaveHandler(event:GridItemEditorEvent):void

        {

        // TODO Auto-generated method stub

       

        }

       

        protected function button1_clickHandler(event:MouseEvent):void

        {

        // TODO Auto-generated method stub

        navigator.popView();

        }

       

        protected function button2_clickHandler(event:MouseEvent):void

        {

        // TODO Auto-generated method stub

       

        myDG.editable=false;

        myDP

       

        }

       

        protected function myDG_exitStateHandler(event:FlexEvent):void

        {

        // TODO Auto-generated method stub

       

        }

       

        ]]>

        </fx:Script>

       

        <s:DataGrid id="myDG" x="10" y="45" width="460" height="240" dataProvider="{myDP}"

        editable="true" exitState="myDG_exitStateHandler(event)" fontSize="11"

        gridItemEditorSessionSave="myDG_gridItemEditorSessionSaveHandler(event)"

        rowHeight="30" variableRowHeight="true" selectionMode="singleCell" >

        <s:columns>

        <s:ArrayList>

        <s:GridColumn dataField="label1" headerText="day" editable="false" />

        <s:GridColumn dataField="label2" headerText="9-10am"/>

        <s:GridColumn dataField="label3" headerText="10-11am"/>

        <s:GridColumn dataField="label4" headerText="11am-12noon"/>

        <s:GridColumn dataField="label5" headerText="1-2pm"/>

        <s:GridColumn dataField="label6" headerText="2-3pm"/>

        <s:GridColumn dataField="label7" headerText="3-4pm"/>  

        </s:ArrayList>

        </s:columns >

        </s:DataGrid>

        <s:Button x="404" y="10" width="53" height="27" label="Back" click="button1_clickHandler(event)"

         fontSize="13"/>

        <s:Button x="24" y="10" width="56" height="27" label="Save" click="button2_clickHandler(event)"

         fontSize="14"/>

      </s:View>

       

       

       

       

      i have this gatagrid view i want to save the edited datagrid back to the array collectionas a click the save button!!!

      please help me!!

        • 1. Re: how to save the edited datagrid using array collection?
          mostpranoy Level 1

          i have this gatagrid view i want to save the edited datagrid back to the array collectionas a click the save button!!!

          please help me!!

          • 2. Re: how to save the edited datagrid using array collection?
            DonMitchinson Level 2

            You need to use two data binding on the dataFields.

            The only way I've done this on a datagrid is to use a custom item renderer for the datagrid  column.

             

            For example if it's just a text field - which it kind of looks like in your example than add a textbox

            as the DataGridColumn item renderer - and make the column itemrendereriseditable value = "true"

            Adding an @ sign before the bindable data field makes it a two way binding

             

            so .. from your example

             

            <s:GridColumn dataField="label2" headerText="9-10am"/>
            

             

            becomes ..

             

            <s:GridColumn dataField="label2" headerText="9-10am" rendererIsEditable="true">
                <s:itemRenderer>
                    <fx:Component>
                        <s:GridItemRenderer>
                            <s:HGroup left="5" top="2" horizontalAlign="center" verticalAlign="middle">
                                <s:TextInput width="50" text="@{data.label2}" textAlign="center" />
                            </s:HGroup>
                        </s:GridItemRenderer>                                        
                    </fx:Component>
                </s:itemRenderer>
            </s:GridColumn>