reduce cell padding in multi-level grouped grid.

[ToltingColtAcres]

I am attempting to reduce the amount of cell padding in my multi-level grouped grid (2 levels w/ subtotals and totals).

I have successfully reduced the top and botton cell padding on the GridHeaderItem, GridGroupHeaderItem, and GridDataItem.

However, for the life of me I cannot figure out how to change the cell padding in the GridGroupFooterItem.

The same mechanism I tried for the other items hasn't worked.

 

protected void RadGrid_Summary_ColumnCreated(object sender, GridColumnCreatedEventArgs e)
  {
   if (e.Column is GridGroupSplitterColumn c)
   {
    c.HeaderStyle.Width = Unit.Pixel(10);
    c.HeaderStyle.Font.Size = FontUnit.Point(1);
    c.FooterStyle.Width = Unit.Pixel(10);
    c.FooterStyle.Font.Size = FontUnit.Point(1);
    c.ItemStyle.Width = Unit.Pixel(10);
    c.ItemStyle.Font.Size = FontUnit.Point(1);
    c.Resizable = false;
   }
  }

  protected void RadGrid_Summary_ItemCreated(object sender, GridItemEventArgs e)
  {
   if (e.Item is GridGroupHeaderItem headerItem)
   {
    headerItem.CssClass = "GridMinClass";
    if (headerItem.Cells.Count > 1 && headerItem.Cells[1].Controls.Count > 0 && headerItem.Cells[1].Controls[0] is Button headerButton1)
    {
     headerButton1.Visible = false;
     headerButton1.Height = Unit.Pixel(0);
    }
    if (headerItem.Cells.Count > 0 && headerItem.Cells[0].Controls.Count > 0 && headerItem.Cells[0].Controls[0] is Button headerButton2)
    {
     headerButton2.Visible = false;
     headerButton2.Height = Unit.Pixel(0);
    }
   }
   if (e.Item is GridGroupFooterItem footerItem)
   {
    footerItem.CssClass = "GridMinClass";
   }
   if (e.Item is GridDataItem dataItem)
   {
    dataItem.CssClass = "GridMinClass";
   }
  }


gridmin.css:

.GridMinClass {
 padding: 0;
 padding-left: 0;
 padding-right: 0;
 padding-top: 0;
 padding-bottom: 0;
}

[Attila Antal]

Hi Michael,

I highly recommend using CSS as you may not be able to change everything using .NET framework. 

Firstly, inspect the HTML elements you want to change using the browser's developer tools. You can follow the suggestions in the first two points of the Improve Your Debugging Skills with Chrome DevTools blog post explaining how to inspect the generated HTML and check the applied styles for various elements. 

Once you know the styles you need to override, you can use the same style selector and add "html body " in front of it to make it more specific, "stronger". More on CSS specificity you can find here: 

• Specifics on CSS Specificity;
• CSS Specificity: Things You Should Know;
• Specificity - CSS | MSDN;

To learn more about CSS styling and using the Browser's developer tools, you may find the following videos useful: 

• How to Use the Chrome Inspector to Edit Your Website CSS - contains a Video
• Get Started With Viewing And Changing CSS
• Chrome Developer Tools Tutorial - Inspect and Test CSS 2019 - video
• Chrome DevTools for CSS - Better CSS Coding & CSS Debugging with Developer Tools - video
• Testing CSS Styles with Chrome Inspector Tool - video

 

Kind regards,
Attila Antal
Progress Telerik

[ToltingColtAcres]

I did spend some time with viewing the CSS... 

For some reason, the calculated height on the element comes in at 33, whereas all the others come in at 17.

if I "uncheck" the calculated height, the extra padding disappears.

I cannot determine how this ends up getting calculated on these rows but none of the others. The css classes seem to be similar to the detail lines, which have proper spacing.

 

[Attila Antal]

Hi Michael,

Copy the example from the Three level Hierarchy article to a new page, then add the following CSS styles. Once done expand the Grid and check the results.

html body .RadGrid .rgHeader,
html body .RadGrid .rgRow td,
html body .RadGrid .rgAltRow td, 
html body .RadGrid .t-button {
    padding: 0;
}

    html body .RadGrid thead tr,
    html body .RadGrid .rgRow,
    html body .RadGrid .rgAltRow {
    height: unset;
}

 

You will end up with something like this:

This is all done using CSS. Everything about styling, inspecting, and debugging the styles is covered in the articles I shared in my previous post.

Kind regards,
Attila Antal
Progress Telerik