6 Replies Latest reply on Feb 26, 2009 12:26 PM by Phrankie

    DataGrid row padding?

    jfizer Level 1
      Trying to use a DataGrid to display two columns of data. However, there is a lot of space between the rows making this rather unattractive. Any thoughts or ideas?

      <mx:DataGrid x="10" y="10" borderStyle="none" sortableColumns="false" selectable="false" showHeaders="false" fontSize="12" color="#000000" fontWeight="normal" width="392" height="207">
      <mx:dataProvider>
      <mx:Object Label="Manufacturer" Value="General Mills"/>
      <mx:Object Label="Category" Value="Cereal breakfast foods"/>
      <mx:Object Label="Description" Value="Toasted whole grain oat cereal with kid-friendly ring shape"/> <!-- with kid-friendly ring shape -->
      <mx:Object Label="Quantity" Value="425 g Box"/>
      </mx:dataProvider>
      <mx:columns>
      <mx:DataGridColumn dataField="Label" headerText="" textAlign="left" width="115"/>
      <mx:DataGridColumn dataField="Value" headerText="" textAlign="left" wordWrap="true"/>
      </mx:columns>
      </mx:DataGrid>
        • 1. Re: DataGrid row padding?
          ntsiii Level 3
          Did you look for that word ("padding") in the DataGrid docs? Combine that with rowHeight, and I think you will be good to go.

          Tracy
          • 2. DataGrid row padding?
            Phrankie
            quote:

            Originally posted by: ntsiii
            Did you look for that word ("padding") in the DataGrid docs? Combine that with rowHeight, and I think you will be good to go.

            Tracy


            Datagrid rows are excessively tall in a number of my Flex projects. Like jfizer, I want to lessen the distance between row text baselines and the gridline beneath. I assumed that a property like rowHeight or paddingBottom would do the trick, but I have not found a way. Even with paddingBottom set to 0 the distance is too great for my needs. And though promising, negative paddingBottom values affect the header but not the data rows!

            Independent control over header and data areas would be ideal, but I am unable to achieve that. Apparently some sort of inheritance causes my CSS datagrid padding styles to affect both the datagrid rows AND the header. This occurs even when I declare a CSS headerStyle selector with its own distinct padding values.

            For instance:

            negative paddingBottom affects the header but no other rows.
            positive paddingBottom affects both the header AND the data rows.
            paddingTop has no limitation and works reliably with negative values. It always affects the header AND all data rows.

            Perhaps Flex/CSS padding differs from the normal HTML/CSS definition.

            The following CSS works as expected, before experimenting I would have expected the header to be immune to these padding values:

            DataGrid {
            paddingBottom: 10;
            paddingBottom: 10;
            headerStyleName: "mydataGridHeaderStyle";
            }

            /* The follow declaration does NOT style the datagrid’s header padding independently. I expected it would. */

            .mydataGridHeaderStyle {
            paddingBottom:2; /*no effect */
            }

            Given the following declarations the heading responds as expected ... but the non-header datagrid rows ignore paddingBottom.

            DataGrid {
            paddingTop: -4;
            paddingBottom: -5;
            }

            I'm wondering why the datagrid rows refuse to honor negative values, whereas the header complies.

            A little perplexed here.

            Suggestions?

            Phrankie
            • 3. DataGrid row padding?
              Phrankie Level 1
              Forgot to mention, although rowHeight was suggested as a remedy, it is not listed in the property panel (full alphabetical view), nor does it appear to have any impact.

              In my tests a CSS declaration of

              rowHeight: 10;

              has no impact.

              Now, back to padding.

              Further tests show that, when negative, paddingBottom has no effect on other types of text objects. The datagrid cells are inherited from a text object class. So the root of the problem probably exists at another level.

              Phrankie
              • 4. Re: DataGrid row padding?
                Level 7

                "Phrankie" <webforumsuser@macromedia.com> wrote in message
                news:go4tgo$jra$1@forums.macromedia.com...
                >
                quote:

                Originally posted by: ntsiii
                > Did you look for that word ("padding") in the DataGrid docs? Combine that
                > with rowHeight, and I think you will be good to go.
                >
                > Tracy

                >
                > Nor have I found a way to lessen the distance between the text baseline
                > and
                > the gridline directly below, but I sure would like to! The datagrid rows
                > are
                > excessively tall in a number of my projects.
                >
                > Flex/CSS padding doesn't conform entirely to the normal HTML/CSS since of
                > the
                > term. For instance, paddingBottom has a fixed lower display limit, while
                > paddingTop has no limitation.
                >
                > Additionally, some sort of inheritance causes my CSS datagrid padding
                > styles
                > to affect the datagrid rows AND the header ... even when I add a
                > headerStyle
                > with its own distinct padding values.
                >
                > This CSS works as expected, though originally I would have expected that
                > these
                > padding values would not affect the header:
                >
                > DataGrid {
                > paddingBottom: 10;
                > paddingBottom: 10;
                > headerStyleName: "mydataGridHeaderStyle";
                > }
                >
                > /* However the follow declaration does NOT style the datagrid?s header
                > padding
                > independently */
                >
                > .mydataGridHeaderStyle {
                > paddingBottom:2; /*no effect */
                > }
                >
                > Given the following declarations the heading responds as expected ... but
                > the
                > datagrid rows only honor paddingTop.
                >
                > DataGrid {
                > paddingTop: -4;
                > paddingBottom: -5;
                > }
                >
                > Perhaps the datagrid row refuse to honor negative values, whereas the
                > header
                > complies.
                >
                > A little perplexed here.
                >
                > Suggestions?

                That might be another manifestation of this:
                http://flexdiary.blogspot.com/2008/06/using-css-typeselector-with.html

                HTH;

                Amy


                • 5. Re: DataGrid row padding?
                  Richard_Abbott Level 3
                  All,
                  I was having issues with DataGrid row heights being way too big when I had word wrap on, and discovered I needed to use
                  variableRowHeight="true"
                  as a property of the grid as well.
                  Not sure if this has any bearing on the present situation but it might help,
                  Richard
                  • 6. DataGrid row padding?
                    Phrankie Level 1
                    OK, I think I've narrowed down my confusion to a few questions:

                    Can we style datagrid headers and data rows independently?

                    In order to find a solution for controlling row height should I be looking in the DataGridItemRenderer or UITextField classes?

                    Is paddingBottom simply broken with respect to data rows ... or do I need to learn how to properly balance paddingBottom, rowHeight and leading. Interestingly, in my tests, negative leading only affects the header ... as reported with paddingBottom.

                    Negative leading truncates the bottom of the headers text, but it fails to change the distance between the text baseline and the gridline below. I would expect that would leading only change the distance between wrapped lines of text ... but since paddingBottom is wonky I decided to test to see if it provided the effect I'm after.

                    Following up on you input Richard:

                    I see no effect in data rows (or the header row) when wordWrap="true".

                    variableRowHeight must be "true" also???

                    I expected wordWrap="true" would at least affect the header, wrapping the header text when it exceeds the width of the column. I further assumed that leading would affect the distance between wrapped lines of text, but I can't tell because text never wraps, even when it seems that it should: wordWrap="true", long strings of text, narrow columns, text clipped as it exits the right edge of the column ...

                    Phrankie