[Solved] Decrease size of RadGrid

[Mikael]

I like the built-in skins of the Telerik-controls, and I use them as much as I can.
However, sometimes the RadGrids take a little to much space with the built-in skins.

For some UIs I build I would like to make the whole UI a little more compact, such as decreasing the fontsize, decreasing the space between rows, etc.

I know I can do this using either CSS and/or applying styles to the RadGrid, but I wanted to check if anyone has done this work before me, I assume there are a number of things to modify.

So, what are the minimal steps to do in order to make the RadGrid more compact in the UI? (except for the obvious alternative of reducing number of rows/columns)

Thanks!
/Fredrik

[Dimo]

Hello Fredrik,

The easiest and fastest way to achieve a considerably smaller RadGrid is to reduce the top and bottom padding of the data cells. For example the default top and bottom padding for the Hay skin data cells is 4px + 4px (for most of the other skins as well). The following CSS rule will override the embedded skin and decrease the padding by 50% :

tr.GridRow_Hay  td ,
tr.GridAltRow_Hay  td
{
     padding-top: 2px;
     padding-bottom:2px;
}

You can do the same for header cells, group panels, group headers, command item rows, pager items, etc, but the effect will not be that visible, since these items do not repeat. If you change the height of the header item while using scrolling with static headers, you will also need to adjust the background image at the top-right corner of RadGrid.

Please note that decreasing the font-size below 11px or removing vertical padding completely greatly reduces readability, especially for elderly users.

The skins, which are generally considered as compact are:

Default2006  (although it is officially marked as obsolete, it is still an embedded skin)
Office2007
Outlook
WebBlue

You can consider using these without the need to modify them.


Sincerely yours,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Jason]

I tried the method above but the radgrid is not taking the css class for the table.  Is there something special I need to do?
------------------------------------------------------------------------------

<style type="text/css">

.radgrid

{

color: #FF0000;

font-size: xx-small;

padding-top: 0px;

padding-bottom :0px;

}

 

</style>

 

<telerik:RadGrid ID="RadGrid1" runat="server" AllowAutomaticDeletes="True"

AllowAutomaticInserts="True" AllowAutomaticUpdates="True"

DataSourceID="SqlDataSource1" GridLines="None" Font-Size="7"

CssClass="radgrid" Skin="Vista">

<MasterTableView autogeneratecolumns="False" cellspacing="0" commanditemdisplay="Top"

datakeynames="RoleLinkID" datasourceid="SqlDataSource1" CssClass="radgrid" Font-Size="7">
--------------------------------------------------------------------------------------------

[Dimo]

Hi Adisa,

Tables don't have paddings. You should apply the styles to table cells, e.g.

.radgrid table.ragrid  tr  td
{
     padding: 0;
}

or

.radgrid   td
{
     padding: 0  !important;
}



All the best,
Dimo
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.

[Jason]

Thanks a bunch.  At first I couldn't get it to work, I just tried it again and and worked.