12 Replies Latest reply on Jun 19, 2009 11:17 AM by leybniz

    Moving the rows in a DataGrid using another Control

    hkpadobe Level 1

      Hello,

       

      I have a datagrid with data that I need to prioritize. This needs to be done by being able to highlight any row in the datagrid, then by clicking on a separate control  containing up & down and totop & tobottom arrows, will set the Priority by moving the highlighted row up or down in the datagrid. Can anyone consider a possible solution as I have not encountered any posts with this type of requirement and believe the coding will be far beyond my basic knowledge of Flex.

       

      Thanks

       

      J

        • 1. Re: Moving the rows in a DataGrid using another Control
          leybniz Level 4

          <?xml version="1.0" encoding="utf-8"?>
          <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" preinitialize="init()">

          <mx:Script>
          <![CDATA[
           
            import mx.collections.*;
           
            [Bindable]
            protected var items:ArrayCollection =
             new ArrayCollection(
             [
              {label:'item 1', priority:4},
              {label:'item 2', priority:3},
              {label:'item 3', priority:2},
              {label:'item 4', priority:1}
             ]);
            
            protected function init():void {
            
             var sort:Sort = new Sort();
             sort.fields = [new SortField('priority', true, true, true)];
             items.sort = sort; 
            }
           
            protected function moveUp():void {
             if (!grid.selectedItem) return;
            
             // search for replacement
             for each (var o:* in items)
              if (o.priority == grid.selectedItem.priority + 1) {
               o.priority--;
               grid.selectedItem.priority++;
              }
            
             items.refresh();
            }
           
          ]]>
          </mx:Script>

          <mx:DataGrid id="grid" dataProvider="{items}" sortableColumns="false">
          <mx:columns>
            <mx:DataGridColumn dataField="label" />
            <mx:DataGridColumn dataField="priority" />
          </mx:columns>
          </mx:DataGrid>

          <mx:Button label="Up" click="moveUp()" />

           

          </mx:Application>

           

          If you feel this message answers your question or helps, please mark it respectively

          • 2. Re: Moving the rows in a DataGrid using another Control
            hkpadobe Level 1

            Hi Alex,

             

            This is great Thanks for your quick reply. I will have a case where let's say item 3 needs to be moved to the top. Using the UP arrow this will take 2 clicks. How would I be able to use another arrow just for moving the selected rows to the top with one click? I guess for moving rows down using Down arrows the logic is reversed? Once the rows have been re-ordered how can I get the info of what row is in what order, so as to show the user the final order the rows have been left in?

             

            Thanks again,

             

            J

            • 3. Re: Moving the rows in a DataGrid using another Control
              leybniz Level 4

                protected function moveTop():void {
                 if (!grid.selectedItem) return;
                
                 grid.selectedItem.priority = items[0].priority;
                
                 // downgrade affected items
                 for (var i:int = 0; i < grid.selectedIndex; i++)
                   items[i].priority--;
                
                 items.refresh();
                }

               

              <mx:Button label="Top" click="moveTop()" />

               

              If you feel this message answers your question or helps, please mark it respectively

              • 4. Re: Moving the rows in a DataGrid using another Control
                leybniz Level 4

                for getting the final order you'll have to carry 'priority' data with your items, or it would be better to rename it to more obvious name like 'order' | 'position'

                you can sort the list by that criteria any time you want

                • 5. Re: Moving the rows in a DataGrid using another Control
                  hkpadobe Level 1

                  Hi Alex,

                   

                  I see. I will not be having a Priority column in the datagrid. Hence need to know how to capture the data from the datagrid after the rows have been moved. The assumption will be that the final 1st row will have Priority 1, 2nd row Priority 2 etc...

                   

                  Thanks,

                   

                  Hemal

                  • 6. Re: Moving the rows in a DataGrid using another Control
                    leybniz Level 4

                    you don't have to capture anything out of datagrid, all items inside items collection already in proper final order,

                    as to priorities you could easily do your way, just implicitly re-assign priorities after you feel they are done, like this:

                     

                    for (var i:int=0; i < items.length; i++) {

                         items[i].priority = i; // if you want to start priorities with 1 add + 1

                    }

                     

                    and you'll have the final list then

                    • 7. Re: Moving the rows in a DataGrid using another Control
                      hkpadobe Level 1

                      Fantastic, Alex.

                       

                      Thanks,

                       

                      Hemal

                      • 8. Re: Moving the rows in a DataGrid using another Control
                        leybniz Level 4

                        Thank you for asking

                        please mark most helpful messages you feel and mark this thread as answered, thanks in advance

                        • 9. Re: Moving the rows in a DataGrid using another Control
                          hkpadobe Level 1

                          Hi Alex,

                           

                          I have got the MoveTop and MoveDown functions working. I am having problems with the MoveBottom function. Any ideas?

                           

                          Thanks

                           

                          Hemal

                           

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

                          <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" preinitialize="init()"> <mx:Script>  <![CDATA[

                            import mx.utils.ArrayUtil;

                             

                            import mx.collections.*;

                             

                           

                            protected var items:ArrayCollection =

                             new ArrayCollection(

                             [

                              ,

                              ,

                              ,

                               

                             ]);

                              

                            protected function init():void {

                              

                             var sort:Sort = new Sort();

                             sort.fields = ;

                             items.sort = sort;

                            }

                             

                            protected function moveUp():void {

                             if (!grid.selectedItem) return;

                              

                             // search for replacement

                             for each (var o:* in items)

                              if (o.priority == grid.selectedItem.priority + 1) {

                               o.priority--;

                               grid.selectedItem.priority++;

                              }

                              

                             items.refresh();

                            }

                             

                            protected function moveTop():void {

                             if (!grid.selectedItem) return;

                              

                             grid.selectedItem.priority = items[0].priority;

                              

                             // downgrade affected items

                             for (var i:int = 0; i < grid.selectedIndex; i++)

                               items+.priority--;

                              

                             items.refresh();

                            }

                           

                          protected function moveDown():void {

                             if (!grid.selectedItem) return;

                              

                             // search for replacement

                             for each (var o:* in items)

                              if (o.priority == grid.selectedItem.priority - 1) {

                               o.priority++;

                               grid.selectedItem.priority--;

                              }

                              

                             items.refresh();

                            }

                             

                          protected function moveBottom():void {

                             if (!grid.selectedItem) return;

                              

                             grid.selectedItem.priority = items[0].priority;

                              

                             // downgrade affected items

                             for (var i:int = 0; i < grid.selectedIndex; i--)

                               items.priority+;

                              

                             items.refresh();

                            }

                           

                          ]]>

                          </mx:Script>

                          <mx:DataGrid id="grid" dataProvider="" sortableColumns="false"> 

                          <mx:columns>

                            <mx:DataGridColumn dataField="label" />

                            <mx:DataGridColumn dataField="priority" visible="false"/> 

                          </mx:columns>

                          </mx:DataGrid>

                           

                          <mx:Button label="Up" click="moveUp()" />

                          <mx:Button label="Top" click="moveTop()" />

                          <mx:Button label="Bottom" click="moveBottom()" />

                          <mx:Button label="Down" click="moveDown()" />

                           

                          </mx:Application

                          • 10. Re: Moving the rows in a DataGrid using another Control
                            leybniz Level 4

                            Sure!

                             

                            <?xml version="1.0" encoding="utf-8"?>
                            <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" preinitialize="init()">

                            <mx:Script>
                            <![CDATA[

                              import mx.collections.*;
                             

                              [Bindable]
                              protected var items:ArrayCollection =
                               new ArrayCollection(
                               [
                                {label:'item 1', priority:4},
                                {label:'item 2', priority:3},
                                {label:'item 3', priority:2},
                                {label:'item 4', priority:1}
                               ]);
                              
                              protected function init():void {
                              
                               var sort:Sort = new Sort();
                               sort.fields = [new SortField('priority', true, true, true)];
                               items.sort = sort; 
                              }
                             
                              protected function moveUp():void {
                               if (!grid.selectedItem) return;
                              
                               // search for replacement
                               for each (var o:* in items)
                                if (o.priority == grid.selectedItem.priority + 1) {
                                 o.priority--;
                                 grid.selectedItem.priority++;
                                 break;
                                }
                              
                               items.refresh();
                              }
                             
                              protected function moveTop():void {
                               if (!grid.selectedItem) return;
                              
                               // search for replacement      
                               grid.selectedItem.priority = items[0].priority;
                              
                               // downgrade affected items
                               for (var i:int = 0; i < grid.selectedIndex; i++)
                                 items[i].priority--;
                              
                               items.refresh();
                              
                              }
                             
                              protected function moveDown():void {

                                  if (!grid.selectedItem) return;

                               // search for replacement
                               for each (var o:* in items)
                                   if (o.priority == grid.selectedItem.priority - 1) {
                                     o.priority++;
                                     grid.selectedItem.priority--;
                                     break;
                                } 

                               items.refresh();
                              } 
                             
                              protected function moveBottom():void {

                                  if (!grid.selectedItem) return;

                                  grid.selectedItem.priority = items[items.length - 1].priority;

                                  // upgrade affected items
                                  for (var i:int = grid.selectedIndex + 1; i < items.length; i++)
                                    items[i].priority++;
                                 
                                  items.refresh();
                              }

                             

                            ]]>
                            </mx:Script>

                            <mx:DataGrid id="grid" dataProvider="{items}" sortableColumns="false">
                            <mx:columns>
                              <mx:DataGridColumn dataField="label" />
                              <mx:DataGridColumn dataField="priority" />
                            </mx:columns>
                            </mx:DataGrid>

                            <mx:HBox>
                            <mx:Button label="Top" click="moveTop()" />
                            <mx:Button label="Bottom" click="moveBottom()" />
                            </mx:HBox>

                            <mx:HBox>
                            <mx:Button label="Up" click="moveUp()" />
                            <mx:Button label="Down" click="moveDown()" />
                            </mx:HBox>


                            </mx:Application>

                            • 11. Re: Moving the rows in a DataGrid using another Control
                              hkpadobe Level 1

                              Thanks Alex. I have been trying to reply to the posts in the Flex forum to say they have been helpful and mark the discussion as answered, but not been able to.

                              • 12. Re: Moving the rows in a DataGrid using another Control
                                leybniz Level 4

                                no problem, do it later, just don't forget to do it at all

                                have a nice coding