6 Replies Latest reply on May 24, 2007 6:47 AM by MacAnthony

    DataGrid with Row numbers

    MacAnthony Level 1
      I would like to be able to have a column of line numbers for my datagrid, but I need the numbers to only be a row count and not associated with the row. What I mean is, the datagrid will be sortable so I don't want the row numbers to sort along with the other data. Is this possible? Or would a custom component need to be made?
        • 1. Re: DataGrid with Row numbers
          JabbyPandaUA Level 3

          AFAIK is it not possible to a column in a Datagrid that does not obey sorting rules...

          You can display next to Datagrid another List with row index only displayed.
          • 2. Re: DataGrid with Row numbers
            MacAnthony Level 1
            that sounds like an option but then how do you keep the other list scrolling along with the datagrid list?
            • 3. Re: DataGrid with Row numbers
              JabbyPandaUA Level 3
              bind selectedIndex of mx:List control to selectedIndex of mx:DataGrid control

              <mx:List is="ids" selectedIndex="{dataGrid.selectedIndex}" />
              <mx:Datagrid is="dataGrid" />
              • 4. DataGrid with Row numbers
                BLXWebMaster Level 1
                Come On. Anything is possible. How do you get the ability to specify that a message is an answer? :-)

                Although not easy, with help I was able to get the functionality you are looking for. Basically a row number indicator that stays static if the columns are sorted.

                In your DataGrid you specify the column you want to display itemRenderer = rowNum.

                Create a Component called rowNum.mxml.

                rowNum.mxml

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

                <mx:Label xmlns:mx=" http://www.adobe.com/2006/mxml">
                <mx:Script>
                <![CDATA[
                import mx.controls.DataGrid;
                import mx.controls.dataGridClasses.DataGridListData;

                override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
                {
                super.updateDisplayList( unscaledWidth, unscaledHeight );
                var dgListData:DataGridListData = listData as DataGridListData;
                var dataGrid:DataGrid = dgListData.owner as DataGrid;
                this.text = String(listData.rowIndex + dataGrid.verticalScrollPosition);


                callLater(foo);
                }

                private function foo():void{
                invalidateDisplayList();
                }

                ]]>

                </mx:Script>

                </mx:Label>

                Should work like a charm.

                Allen

                • 5. Re: DataGrid with Row numbers
                  JabbyPandaUA Level 3
                  Dear Allen,

                  You are right, by using custom item renderer and relying on listData.rowIndex property and dataGrid.verticalScrollPosition property we can construct a datagridColumn that displays row indexes that are independent from sorting rules set in our DataGrid.


                  Listen to Allen, he is a star :)

                  Here is my slightly modified code for itemRenderer based on Allen's idea.

                  I only added a check if listData variable is not equal to NULL, it was giving me some runtime errors in Flash player

                  -----------------------
                  package {
                  import mx.controls.Label;
                  import mx.controls.DataGrid;
                  import mx.controls.dataGridClasses.*;
                  import flash.display.Graphics;

                  public class rowNum extends Label {

                  override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
                  {
                  super.updateDisplayList(unscaledWidth, unscaledHeight);

                  var g:Graphics = graphics;
                  g.clear();
                  if (listData != null ) {
                  super.updateDisplayList( unscaledWidth, unscaledHeight );
                  var dgListData:DataGridListData = listData as DataGridListData;
                  var dataGrid:DataGrid = dgListData.owner as DataGrid;
                  this.text = String(listData.rowIndex + dataGrid.verticalScrollPosition);
                  }
                  }
                  }
                  }

                  Assigning this item renderer to dataGrid:
                  -----------------------

                  <mx:DataGrid id="myGrid">
                  <mx:columns>
                  <mx:DataGridColumn headerText="test" itemRenderer="rowNum"/>
                  <mx:DataGridColumn headerText="First Name" dataField="firstName"/>
                  </mx:columns>
                  </mx:DataGrid>
                  • 6. Re: DataGrid with Row numbers
                    MacAnthony Level 1
                    Sorry, I didn't mark it as an answer until it looked like I wasn't gonna be getting any more responses. That and the fact that JP did give a solution. I guess I'm impatient :)

                    If I could undo it, I would, but there doesn't seem to be a way.