RadGrid Header

[Raju Kumar]

Hi,
  Can you please provide some help regarding  how to change the height of the header of RadGrid. And also how can we change the image of the header.

Thanks.
Raju.

[Dimo]

Hello Raju,

Controlling the height of RadGrid header cells is easy. You can use a couple of different techniques, for example:

1) declarative setting

<MasterTableView>
    <HeaderStyle Height="..." />
</MasterTableView>


2) CSS setting with height style

.RadGrid_Skin  .GridHeader_Skin,
.RadGrid_Skin  .ResizeHeader_Skin
{
    height: .... ;
}


3) CSS setting with padding styles

.RadGrid_Skin  .GridHeader_Skin,
.RadGrid_Skin  .ResizeHeader_Skin
{
    padding-top: .... ;
    padding-bottom: .... ;
}

You should replace Skin with the name of the skin you are using.

I personally recommend using (3) if you want to apply the height to all RadGrids, and (1) if you want to apply the height to only one RadGrid.


As for the header images - these are background images defined in the skin. You can change them by adding a CSS rule to your web application:

.RadGrid_Skin  .GridHeader_Skin,
.RadGrid_Skin  .ResizeHeader_Skin
{
    background: .... ;
}


Let us know if you need further advice.


Best wishes,
Dimo
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Shinu]

Hi Raju,


You can also try the following code snippet.

CS:

 protected void RadGrid1_ItemDataBound(object sender, Telerik.Web.UI.GridItemEventArgs e)

    {
        if (e.Item is GridHeaderItem)
        {
            GridHeaderItem header = (GridHeaderItem)e.Item;
            // to set the height of the Grid Header
            header.Height = Unit.Pixel(20);

            // to add an Image in the Grid Header
            Image img=new Image();
            img.ID = "Image1";
            img.ImageUrl = "~/Image1.gif";
            header["columnUniqueName"].Controls.Add(img);

        }
    }

Thanks
Shinu.

[jgig]

I want to change the height of a RadGrid Header in a skin file. But I am not against the CSS way either.

I am using the Gray skin. When I do this in a skin file it works(making it larger but NEVER smaller):

<telerik:RadGrid Skin="Gray" runat="server">

<MasterTableView>

<HeaderStyle Height="200px" Font-Size="9pt"/>

</MasterTableView>

</

telerik:RadGrid>

When I try the CSS way it never seems to work for me. Any suggestions?

[Yavor]

Hello jgig,

The following article contains additional information on how to alter the skin(s) that you are presently using. I hope this helps.

Greetings,
Yavor
the Telerik team

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

[jgig]

I think I have tried it all now and I can not reduce the height. Can you do a quick sample project using the RadGrid with Gray skin showing how to reduce the  <th> height?

I dont care if you do it in a CSS way or skin. I can make it higher in the skin just fine and I cant find any code to reduce the height.

div.RadGrid_Gray

th

{

color:RED; --------this changes the TH text color

height: 20px;   ----------this does nothing

}

Thanks you!

[jgig]

Never mind, it was the padding I needed to change and not the height. This worked for me.

.RadGrid_Gray

.GridHeader_Gray{

padding-top: 0px;

padding-bottom: 0px;

}

[ibrahim]

should the changes be in my css file ..or the one provided by telerik for this skin?

[miral shah]

protected void RadGrid1_ItemDataBound(object sender, Telerik.Web.UI.GridItemEventArgs e)
{
if (e.Item is GridHeaderItem)
{
GridHeaderItem header = (GridHeaderItem)e.Item;
// to set the height of the Grid Header
header.Height = Unit.Pixel(20);
// to add an Image in the Grid Header
Image img=new Image();
img.ID = "Image1";
img.ImageUrl = "~/Image1.gif";
header["columnUniqueName"].Controls.Add(img);
}
}  Can anyone please let me know how to do above thing in WPF RADGRIDVIEW because radgridview dont have any event like ItemDataBound. I m also using Telerik.windows.control namaspace not Telerik.Web.UI Below is my Code // I m adding Columns dynamically, GridViewDataColumn IsUnRead = new GridViewDataColumn(); IsUnRead.Header = "R"; IsUnRead.UniqueName = "IsUnRead"; IsUnRead.Width = new GridLength(40); this.gvEmail.Columns.Add(IsUnRead); I want to have Image also dynamically by code. Thanks in advance. Your view will be highly appreciated. MIRAL SHAH

[Sebastian]

Hi miral,

Please post your question under the relevant forum category (RadControls for WPF -> RadGridView for WPF). Thus my support colleagues from the relevant Telerik department will reply to it.

Best regards,
Sebastian
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[miral shah]

Thank you sir for informing about appropriate forum. I m newbie to Telerik. :(

[Mani]

hi experts,

i used the telerik Grid in ASP .Net MVC applications.
My question is : How to Show the Image in Grid Header?????

[Dimo]

Hi Mani,

Please specify whether you are using RadGrid for ASP.NET AJAX or the Grid extension for MVC.

Then, explain what exactly are you trying to do. One way to add an image to a RadGrid (ASP.NET AJAX) header cell is to use a template column and add the image in the column's <HeaderTemplate>:

http://demos.telerik.com/aspnet-ajax/grid/examples/generalfeatures/columntypes/defaultcs.aspx

Regards,
Dimo
the Telerik team

[NK]

Hello All
How will i get all the css format code what ever skin i have used in my application?
e.g:i have used Sunset skin in my application.where ever i get all the code ?and modify that existing skin according to me.
Please Help me.....

Thanks in Advance

Nalini Nanda

[Galin]

Hi Nalini,

All CSS and image files are located in ~Program Files\Telerik\RadControls for ASP.NET AJAX Q* 20**\Skins. You can see the base CSS files in this folder and the specific files are inside the inner folders.

For example if you need to make custom Sunset based skin for RadGrid you need the following files:

•   Grid.css    (base css file)
•   Sunset\Grid.Sunset.css  (specific styles for Sunset - colours, borders, backgrounds et.c.)
•   Sunset\Grid\ all image files here (without Sunset.gif, which is used for thumbnail icon)

Additionally, you can find more information at this blog post.

I hope this helps.

Regards,
Galin
the Telerik team