DataGrid Spark with an unexpected addtionnal row

Question

I made a DataGrid with a custom GridItemRenderer. Look here. I add one GridColumn then 2 items in the DataProvider with the addItem function, I specify the rowHeight but there is one unexpected little row at the end of the column. And i really don't know why, if someone have an idea.. I tried modifying the RequestedRowCount property too, but without success. I also looked in debug mode, there is only two items in the list.

My DataGrid :

        <s:DataGrid id="datagridGPTGauche"
                width="130"
                skinClass="fr.eram.skins.CustomDataGridSkin"
                textAlign="center"
                dataProvider="{dataProviderGridGPTGauche}"
                initialize="onInitializeDatagridGPTGauche(event)"
                editable="false"
                rowHeight="26"
                resizableColumns="false"
                selectionMode="none"
                sortableColumns="false" 
                requestedRowCount="2"
                > 

Thanks !

Answer 1

You have not specified a Height on your DataGrid definition and I think you are getting confused about how a DataGrid displays its data.

By default the height of the DataGrid, if you are using a rowHeight=26, will be just enough space to show the column header row, 2 rows of data, and a little bit of the 3rd row of data.

With the following Application definition:

<?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">
<fx:Declarations>
    <s:ArrayCollection id="myPeople">
        <fx:Object Name="Heidi Lister" Age="10" DOB="1967-06-27"/>
        <fx:Object Name="John Donald" Age="20" DOB="1980-04-21"/>
    </s:ArrayCollection>
</fx:Declarations>

<s:DataGrid id="datagridGPTGauche"
            textAlign="center"
            width="500"
            dataProvider="{myPeople}"
            editable="false"
            rowHeight="26"
            resizableColumns="false"
            selectionMode="none"
            sortableColumns="false"/>
</s:Application>

We can see the output in IE as follow:

If we increased the height of the DataGrid, to say 150, we can actually see that the DataGrid creates "blank" rows even when no data is present and always creates a partial row if the height is not great enough to show a full row:

Your options are:

• Dynamically set the height of the DataGrid based on the number of rows of data to exclude blank / empty rows.
• Make the height exactly fit full rows (no partial ones) and live with the fact it shows empty rows.
• Use AdvancedDataGrid instead.