2 Replies Latest reply on Oct 5, 2010 7:46 AM by George I Flex

    Datagrid, selection setting a maximum

    djh88ukwb Level 1

      Hello all.

       

      Is it at all possible to set a maximum to the number of selections a user can make when using the allowMultipleSelection of a datagrid?

       

      Here is my 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" minWidth="955" minHeight="600">
          <fx:Declarations>
              <!-- Place non-visual elements (e.g., services, value objects) here -->
          </fx:Declarations>
         
          <fx:Script>
              <![CDATA[
                  import mx.collections.ArrayCollection;
                  import mx.events.ListEvent;
                  import mx.collections.ArrayCollection;
                  import mx.controls.Alert;
                  import mx.events.FlexEvent;
                  import mx.events.ItemClickEvent;
                  import mx.events.ListEvent;
                  import mx.managers.PopUpManager;
                  import mx.rpc.events.FaultEvent;
                  import mx.rpc.events.ResultEvent;
                 
                  import spark.events.IndexChangeEvent;
                  import spark.events.TextOperationEvent;
                 
                  [Bindable] public var i:int=0;
                  [Bindable] public var za:int=0;
                  [Bindable] public var secondArray:Array;

                  [Bindable] private var ac:ArrayCollection=new ArrayCollection([
                      {ID: "1", Name: "John", Score:"25", Rating:"3", sel: false},
                      {ID: "2", Name: "Joe", Score:"45", Rating:"5", sel: false},
                      {ID: "3", Name: "Bob", Score:"27", Rating:"2", sel: false},
                      {ID: "4", Name: "Dave", Score:"37", Rating:"4", sel: false},
                      {ID: "5", Name: "Tom", Score:"21", Rating:"3", sel: false},
                      {ID: "6", Name: "Dan", Score:"39", Rating:"2", sel: false},
                      {ID: "7", Name: "Jack", Score:"47", Rating:"5", sel: false},
                      {ID: "8", Name: "Jill", Score:"35", Rating:"2", sel: false}])



              ]]>
          </fx:Script>
         
          <fx:Binding source="dg.selectedItems" destination="secondArray" />
         
          <mx:DataGrid id="dg" dataProvider="{ac}" x="10" y="10" width="596" height="356" allowMultipleSelection="true">
              <mx:columns>
                  <mx:DataGridColumn headerText="Name" dataField="Name"/>
                  <mx:DataGridColumn headerText="Score" dataField="Score" width="50"/>
                  <mx:DataGridColumn headerText="Rating" dataField="Rating" width="100"/>
              </mx:columns>
          </mx:DataGrid>
         
          <mx:DataGrid x="10" y="374" width="596" dataProvider="{secondArray}" height="142">
              <mx:columns>
                  <mx:DataGridColumn headerText="Name" dataField="Name"/>
                  <mx:DataGridColumn headerText="Score" dataField="Score"/>
                  <mx:DataGridColumn headerText="Rating" dataField="Rating"/>
              </mx:columns>
          </mx:DataGrid>

      </s:Application>

       

      What i have it doing is as follows - you can select a number of records from the top datagrid and they get bound to the second datagrid, so i can then use the selected records later on in the application i am creating.

       

      What i want thou is to limit the number of records that the secondArray will hold to 4.

       

      So in all, i want to limit the number of records loaded into the secondArray to 4.

       

      If anyone could help that would be great thanks

        • 1. Re: Datagrid, selection setting a maximum
          Flex harUI Adobe Employee

          What user experience do you want?  Last 4 clicked, or can't click anything

          after four?

          • 2. Re: Datagrid, selection setting a maximum
            George I Flex

            Hi,

             

            Look below. Unfortunatelly there is no Changing event that you can cancel of the DataGrid, so the only thing to do is to remove last element once it reaches over 4 in length.

             

            <?xml version="1.0" encoding="utf-8"?>
            <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" minWidth="955" minHeight="600">
                <mx:Script>
                    <![CDATA[
                        import mx.events.ListEvent;
                       
                        protected function list1_changeHandler(event:ListEvent):void {
                            if (list.selectedItems.length > 4)
                            {
                                var arr:Array = list.selectedItems;
                                //Remove the first added item
                                //arr.pop();
                                //Remove the last added item (disable adding new ones)
                                arr.shift();
                                list.selectedItems = arr;
                            }
                        }

             

                    ]]>
                </mx:Script>
                <mx:List id="list" allowMultipleSelection="true" change="list1_changeHandler(event)" width="100" x="100">
                        <mx:dataProvider>
                            <mx:ArrayCollection>
                                <mx:Object label="Abc 1" data="abc 1" />
                                <mx:Object label="Abc 2" data="abc 2" />
                                <mx:Object label="Abc 3" data="abc 3" />
                                <mx:Object label="Abc 4" data="abc 4" />
                                <mx:Object label="Abc 5" data="abc 5" />
                                <mx:Object label="Abc 6" data="abc 6" />
                                <mx:Object label="Abc 7" data="abc 7" />
                                <mx:Object label="Abc 8" data="abc 8" />
                            </mx:ArrayCollection>
                        </mx:dataProvider>
                    </mx:List>
            </mx:Application>