3

While converting a mx:AdvanceDataGrid to a s:DataGrid, my variable row heights caused the height of my DataGrid to be calculated incorrectly. I am attempting to show all rows without using a scrollbar.

This image shows the incorrect height (the last row is cut off):

enter image description here

The issue occurs when a row increases in size, to accommodate word wrap for example, causing the row to not be the same size as the typicalItem. When my project was utilizing the mx:AdvanceDataGrid we worked around this issue by using the measureHeightOfItems() method outlined here https://stackoverflow.com/a/1889005 using this code:

private function calculateTableHeight():void
{
    var tableHeightPixelHack:Number = 30;
    var numRows:Number = dataGrid.dataProvider != null ? dataGrid.dataProvider.length : 0;
    tableHeight = dataGrid.measureHeightOfItems(-1, numRows) + tableHeightPixelHack;
}

My question is, how can I achieve the same result in a s:DataGrid as I did using the measureHeightOfItems method on the mx:AdvanceDataGrid?

s:DataGrid Component

<s:DataGrid id="dataGrid"
            width="100%"
            columns="{hostComponent.columns}"
            dataProvider="{hostComponent.data}"
            selectionMode="singleRow"
            sortableColumns="false"
            styleName="goalsDataGrid"
            variableRowHeight="true"
            verticalScrollPolicy="off"
            horizontalScrollPolicy="off"
            doubleClickEnabled="true"
/>

Custom Item Renderer (assigned through code)

<?xml version="1.0" encoding="utf-8"?>
<s:GridItemRenderer   xmlns:fx="http://ns.adobe.com/mxml/2009"
                      xmlns:s="library://ns.adobe.com/flex/spark"
                      xmlns:mx="library://ns.adobe.com/flex/mx"
                      focusEnabled="true">

    <s:Rect top="0" bottom="0" right="0" left="0" z="-1"> 
        <s:fill> 
            <s:SolidColor color="{data.rowColor}"/> 
        </s:fill> 
    </s:Rect>
    <s:Label id="lblData"
             styleName="tableRow"
             text="{label}"
             width="100%"
             height="100%"
             maxDisplayedLines="-1"
             lineBreak="toFit" />        
</s:GridItemRenderer>
2
  • If you want all the rows to be displayed then give 100% height in the datagrid. It will adjust as per the row heights.
    – Sumit
    Jun 11, 2014 at 8:30
  • @Sumit I just double checked, and I notice no differences in the DataGrid while omitting or including height="100%" in my mxml. Thanks for the suggestion.
    – JamesG
    Jun 11, 2014 at 14:57

2 Answers 2

0

Set verticalScrollPolicy="auto" in your DataGrid

2
  • I am attempting to show all rows at once without a scroll bar. I have updated my post to include that info. Thanks,
    – JamesG
    Jun 11, 2014 at 15:00
  • What container you are using for the datagrid. Can you post your container code as well?
    – Sumit
    Jun 12, 2014 at 11:40
0

For Spark DataGrid you can calculate the height of the DataGrid as below:

private function calculateTableHeight():void
    {
        var totalHeight:Number = 0;
        for (var row:int = 0; row < dataGrid.dataProvider.length; row++) {
            var renderer:IGridItemRenderer = dataGrid.grid.getItemRendererAt(row,1);
            if (renderer){
                totalHeight += renderer.height;
            }
        }
        dataGrid.height = totalHeight + dataGrid.columnHeaderGroup.height + 2;
    }

Here is an example app:

<?xml version="1.0"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
           xmlns:s="library://ns.adobe.com/flex/spark"
           updateComplete="sizeDGExactly()"
           width="100%"
           height="100%">
<fx:Script><![CDATA[
    import mx.collections.ArrayCollection;
    import spark.components.gridClasses.IGridItemRenderer;

    [Bindable]
    private var notes:ArrayCollection = new ArrayCollection([
        {who: 'Bikram', note_txt: 'ActionScript 3 has empowered Flash developers with faster code execution and a ton of API enhancements.Last line.'},
        {who: 'Anup', note_txt: 'Unfortunately, it has also led to the need for a much higher level of developer responsibility than ever before. ' +
        'In order to prepare and educate developers on how to deal with some of this new responsibility, \n\nI am writing a series of articles on resource ' +
        'management in AS3, Flex 2, and Flash 9. \n\nThe first of these articles discussed the mechanics of the Garbage Collector in Flash Player 9. ' +
        'This article will focus on the implications some of the new features of AS3 have on resource management, and the potential headaches they could ' +
        'cause you even in simple projects. \n\nThe next article in the series will introduce some of the new tools we have at our disposal to deal with these issues.Last line.'},
        {who: 'Mark', note_txt: 'The biggest change in AS3 that affects resource management is the new display list model. In Flash Player 8 and below, ' +
        'when a display object was removed from the screen (with removeMovie or unloadMovie), it and all of its descendants were immediately removed from ' +
        'memory, and halted all code execution.Last line.'},
        {who: 'George', note_txt: 'It is very important to note that not only will the display object continue to use memory, it will also continue to ' +
        'execute any “idle” code, such as Timers, enterFrames, and listeners outside its scope. A couple of examples may help illustrate this issue:'+
        'You have a game sprite that subscribes to its own enterFrame event. Every frame it moves and carries out some calculations to determine ' +
        'it’s proximity to other game elements. In AS3, even after you remove it from the display list and null all references to it, it will continue ' +
        'to run that code every frame until it is removed by garbage collection. You must remember to explicitly remove the enterFrame listener when the sprite ' +
        'is removed.\n\n'+
        'Consider a MovieClip that follows the mouse by subscribing to the stage’s mouseMove event (which is the only way to achieve this effect in ' +
        'the new event model). Unless you remember to remove the listener, the clip will continue to execute code every time the mouse is moved, even after ' +
        'the clip is “deleted”. By default, the clip will execute forever, as a reference to it exists from the stage for event dispatch (we will look at ' +
        'how to avoid this in the next article).\n\n'+
        'Now imagine the implications of instantiating and removing a bunch of sprites before the GC does a sweep, or if you failed to remove all references. ' +
        'You could inadvertently max out the CPU fairly easily, slowing your application or game to a crawl, or even stalling the users’ computers entirely. ' +
        'There is NO WAY to force the Flash Player to kill a display object and stop it executing. You must do this manually when it is removed from the display. ' +
        'I will examine strategies to manage this task in a future article.\n\n'+
        'Here\’s a simple example (Flash Player 9 required). Click the “create” button to create a new Sprite instance. The sprite instance will start ' +
        'outputting a counter. Click remove and note how the output continues, despite the fact that all references to the sprite have been nulled. You can create ' +
        'multiple instances to see how this issue compounds over the life of an application. Source code is available at the end of this article. Last line.'}
    ]);

    private function sizeDGExactly():void
    {
        if (notesDataGrid)
        {
            var totalHeight:Number = 0;
            for (var row:int = 0; row < notesDataGrid.dataProvider.length; row++) {
                var renderer:IGridItemRenderer = notesDataGrid.grid.getItemRendererAt(row,1);
                if (renderer){
                    totalHeight += renderer.height;
                }
            }
            notesDataGrid.height = totalHeight + notesDataGrid.columnHeaderGroup.height + 2;
        }
    }

    public function onDeleteButtonClick(item:Object):void
    {
        notes.removeItemAt(notes.getItemIndex(item));
        sizeDGExactly();
    }

    ]]></fx:Script>

    <s:Scroller width="100%" height="100%"
                left="10" right="10" top="10" bottom="10"
                horizontalScrollPolicy="off" verticalScrollPolicy="auto">
        <s:VGroup width="100%" height="100%">
            <s:Group width="100%">
                <s:Panel title="Empty Top Panel" width="50%" horizontalCenter="0">
                    <s:Label text="This is just an additional component in the layout." width="100%"/>
                </s:Panel>
            </s:Group >
            <s:HGroup width="100%">

            </s:HGroup>
            <s:HGroup width="100%">

                <s:DataGrid id="notesDataGrid"
                            verticalCenter="0"
                            width="100%"
                            dataProvider="{notes}"
                            sortableColumns="false"
                            variableRowHeight="true">
                    <s:columns>
                        <s:ArrayList>
                            <s:GridColumn width="200"
                                          headerText="Who Noted"
                                          dataField="who"/>
                            <s:GridColumn dataField="note_txt"
                                          headerText="Note">
                                <s:itemRenderer>
                                    <fx:Component>
                                        <s:GridItemRenderer>
                                            <s:Label width="100%" height="100%" text="{data.note_txt}"
                                                     paddingTop="10"
                                                     paddingBottom="10"
                                                     paddingLeft="10"
                                                     paddingRight="10"/>
                                        </s:GridItemRenderer>
                                    </fx:Component>
                                </s:itemRenderer>
                            </s:GridColumn>
                            <s:GridColumn width="70">
                                <s:itemRenderer>
                                    <fx:Component>
                                        <s:GridItemRenderer>
                                            <s:Button width="60" height="20" label="Delete"
                                                      horizontalCenter="0" verticalCenter="0"
                                                     click="outerDocument.onDeleteButtonClick(data)"/>
                                        </s:GridItemRenderer>
                                    </fx:Component>
                                </s:itemRenderer>
                            </s:GridColumn>
                        </s:ArrayList>
                    </s:columns>
                </s:DataGrid>
            </s:HGroup>
            <s:Group width="100%">
                <s:Panel title="Empty Bottom Panel" width="50%" horizontalCenter="0">
                    <s:Label text="This is just an additional component in the layout." width="100%"/>
                </s:Panel>
            </s:Group>
        </s:VGroup>
    </s:Scroller>
</s:Application>

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.