7 Replies Latest reply on Jan 20, 2010 8:19 AM by CrazyMerlin

    Advice: Best way to do this?

    CrazyMerlin

      I have a data grid with some basic user data in it and the last column contains a checkbox as item renderer.

      Let's say there are 10 rows, and I deselect the checkbox for each row. At that point I need to disable a certain button.

       

      What is the best practice method for this?

       

      Also, the data sets that I will be populating the grid with, via PHP/XML can return thousands of rows. What is a safe number of rows for the data grid, so I can set some pagination method?

       

      Thanks for any help.

        • 1. Re: Advice: Best way to do this?
          archemedia Level 4

          I suppose your dataProvider of the dataGrid is an ArrayCollection. In that case, you should write a function which executes when clicking the checkBox of your last column. This function checks the source of your ArrayCollection, which is an Array. Look at the 'every' function in the Array Class. This function checks every element in your Array until false is returned.

           

          ...Executes a test function on each item in the array until an item is reached that returns false for the specified function. You use this method to determine whether all items in an array meet a criterion, such as having values less than a particular number...

           

           

          Let me know if you can't figure it out yourself, so I can make an example.

           

          I don't know the limit of dataGrid rows but it is best practice anyhow to use pagination once you have a bunch of records! You can use the filterFunction property of the ArrayCollection to achieve this quickly!

           

          d

          • 2. Re: Advice: Best way to do this?
            Sebastien V. Level 3

            I would make the checkbox item renderer dispatch a custom event that bubbles when its checked status changes, and listen to it in the view where the datagrid is.

            You can then activate/disable a certain button depending on the number of checked items in the datagrid.

             

            For the row number, depending on the pagination and its complexity, the best way to know is probably to test with large numbers of rows and see what happens. I've used dataGrids with a thousand elements without problems, but this probably depends on the treatments you wish to implement.

            1 person found this helpful
            • 3. Re: Advice: Best way to do this?
              CrazyMerlin Level 1

              That makes perfect sense.

               

              Thanks.

              • 4. Re: Advice: Best way to do this?
                CrazyMerlin Level 1

                I cannot get this to function.

                How do I add a listener to the itemRenderer?

                 

                I tried:

                grdProspectData.addEventListener(DataGridEvent.ITEM_EDIT_END, this.itemCheck);

                 

                but that never gets fired.

                 

                Thanks

                • 5. Re: Advice: Best way to do this?
                  Sebastien V. Level 3

                  You can override the CheckBox class, dispatch a custom event on the click or change event, and listen to this event on the datagrid, or the right column.

                  Just make sure that the event bubbles, so that when dispatch by the itemRenderer it will eventually bubble up to the datagrid column and the datagrid.

                  Also don't forget to stop its propagation once catched with event.stopImmediatePropagation().

                  • 6. Re: Advice: Best way to do this?
                    archemedia Level 4

                    Here's a little example, I used a button as ItemRenderer but you can use whatever you want.

                    You added a listener for the itemEditEnd event but that don't get fired if you click on an object in your itemRenderer.

                    Make sure your event bubbles, as the previous post mentioned:

                     

                    <?xml version="1.0" encoding="utf-8"?>
                    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="init()">
                        <mx:Script>
                            <![CDATA[
                                import mx.collections.ArrayCollection;
                               
                                [Bindable]
                                private var dp:ArrayCollection;
                               
                                private function init():void
                                {
                                    var arr:Array = ["one", "two", "three"];
                                    dp = new ArrayCollection();
                                    dp.source = arr;
                                    dg.addEventListener("myEvent", handleDGClick);
                                }
                               
                                private function handleDGClick(evt:Event):void
                                {
                                    output.text = "Clicked!";
                                }
                            ]]>
                        </mx:Script>
                        <mx:DataGrid id="dg" x="10" y="10" dataProvider="{dp}" variableRowHeight="true">
                            <mx:columns>
                                <mx:DataGridColumn headerText="Column 1">
                                    <mx:itemRenderer>
                                        <mx:Component>
                                                <mx:Button label="Click me" click="dispatchEvent(new Event('myEvent', true))"/>
                                        </mx:Component>
                                    </mx:itemRenderer>
                                </mx:DataGridColumn>
                                <mx:DataGridColumn headerText="Column 2" dataField="data"/>
                            </mx:columns>
                        </mx:DataGrid>
                        <mx:Label id="output"/>
                    </mx:Application>

                    1 person found this helpful
                    • 7. Re: Advice: Best way to do this?
                      CrazyMerlin Level 1

                      Thanks, I will give that a try.