GridView Row and Cell formatting. (Padding, Margin, Border).

[Bohdan]

During implementation different own styles, I've noticed some confusing moments, and I could find the explanation in docs.

Working with Padding Border and Margin expected structure was as it is described in a picture. Row element Content contains Cell element.

1)[RowBorders]
After format implementation Cells cover Row border.

        private void RadGridView1_CellFormatting(object sender, CellFormattingEventArgs e)
        {
            e.CellElement.DrawFill = true;
            e.CellElement.BackColor = Color.Orange;
            e.CellElement.NumberOfColors = 1;

            e.CellElement.BorderColor = Color.Yellow;
            e.CellElement.BorderWidth = 3;
            e.CellElement.DrawBorder = true;
            e.CellElement.BorderBoxStyle = Telerik.WinControls.BorderBoxStyle.SingleBorder;
            e.CellElement.BorderGradientStyle = Telerik.WinControls.GradientStyles.Solid;
        }

        private void RadGridView1_RowFormatting(object sender, RowFormattingEventArgs e)
        {
            e.RowElement.DrawFill = true;
            e.RowElement.BackColor = Color.GreenYellow;
            e.RowElement.NumberOfColors = 1;

            e.RowElement.BorderColor = Color.Aqua;
            e.RowElement.BorderWidth = 3;
            e.RowElement.DrawBorder = true;
            e.RowElement.BorderBoxStyle = Telerik.WinControls.BorderBoxStyle.SingleBorder;
            e.RowElement.BorderGradientStyle = Telerik.WinControls.GradientStyles.Solid;
        }

2)[Row Padding]
In case of adding padding to the row, cells were not surrounded by some row spaces, but only size of row and it's cells were increased.

e.RowElement.Padding = new Padding(20,20,20,20);

3)[Row and Cell Margin]
Setting Margin to the row or cell, adds margin to the group of rows or cells. (there is no margin between rows and cells)

e.RowElement.Margin = new Padding(20,20,20,20);
e.CellElement.Margin = new Padding(10, 10, 10, 10);

3.1) [Cell Margin Right side]
As you can see from the previous picture margin wasn't added to the group of cells on the right side.

4) Is there any docs about BorderThickness using, because only way of changing of changing Thickness of each border i see as BorderTopWidth, BorderBottomWidth, BorderLeftWidth, BorderRightWidth.

I would appreciate if you share docs where I can understand the concept of this implementations.
Thank You!

[Dinko | Tech Support Engineer]

Hi Bohdan,

Thank you for reaching out to us.

We don’t have a universal layout mechanism or set guidelines on how to write layouts—it’s generally up to the developer’s judgment based on the situation.

Our layouts are mostly custom, so whenever we implement MeasureOverride or ArrangeOverride, it’s up to the developer creating the layout to handle the elements' padding and margin. The first image provided illustrates how things ideally should behave, but in practice, grid rows, for instance, don’t follow this behavior on purpose. Adding left padding to DataRows would misalign HeaderCells with DataCells, creating a confusing layout.

In short, there’s no need to fully understand our layout mechanics. Each custom layout element should be tested individually, with its code checked to see how the box mechanism operates. However, in our panel elements (like StackLayoutPanel, StackLayoutElement, WrapLayout, etc.), child padding and margin should work as expected.

If you have specific questions on achieving a particular design or element arrangement, please share them and we will think about how to implement them and give you some guidance. Keep in mind that different themes have different settings. This means that if a custom approach works in our theme, it may not work in other themes.

Regards,
Dinko | Tech Support Engineer
Progress Telerik

[Bohdan]

Hi Dinko,

Thank You for answering.
Could you help with cell Margin issue (point 3.1)?
Making some style changes via formatting event I've noticed that right Margin is not applied to the cell.

        private void RadGridView1_ViewCellFormatting(object sender, CellFormattingEventArgs e)
        {
            if (e.ColumnIndex % 3 == 0)
            {
                e.CellElement.Margin = new Padding(5);
            }

            e.CellElement.DrawFill = true;
            e.CellElement.BackColor = Color.Green;
            e.CellElement.NumberOfColors = 1;

            e.CellElement.DrawBorder = true;
            e.CellElement.BorderColor = Color.Black;
            e.CellElement.BorderWidth = 1;
            e.CellElement.BorderBoxStyle = Telerik.WinControls.BorderBoxStyle.SingleBorder;
            e.CellElement.BorderGradientStyle = Telerik.WinControls.GradientStyles.Solid;
        }

As i understood Left margin makes shifting (next screen is from RadControlSpy element selection):
The workaround is trying track this shifting and add additional Left Margin to the second column. But it will not fix the issue with the last column.

Thank you!

[Dinko | Tech Support Engineer]

Upon testing your approach, using the Margin property won't get the required result. The cell size is measured internally. Adding a margin will move the cell. To achieve your requirement, you will need to reduce the available size of the cell. To do that you can create custom cells as demonstrated in the Creating custom cells help article. Then you can override the ArrangeOverride() method and reduce the Width. This way when setting the Margin property, will look as expected. For your convenience, I have created a custom project to demonstrate how you can create a custom header cell. You can do that same approach for the data cells in the same column.