CODEWITHSUNDEEP
actionscript-3apache-flexdatagridflex4.6
H4wak
H4wak

Reputation: 3

DataGrid Spark with an unexpected addtionnal row

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 !

Upvotes: 0

Views: 59

Answers (1)

drevans
drevans

Reputation: 58

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: Extra Line Showing in IE

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:

DataGrid - Height = 150

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.

Upvotes: 0

Related Questions