This is a migrated thread and some comments may be shown as answers.

RadGrid Header

14 Answers 987 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Raju Kumar
Top achievements
Rank 1
Raju Kumar asked on 13 May 2008, 11:22 AM
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.

14 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 13 May 2008, 11:41 AM
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
0
Shinu
Top achievements
Rank 2
answered on 13 May 2008, 11:45 AM
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.

0
jgig
Top achievements
Rank 1
answered on 06 Aug 2008, 08:52 PM

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?

0
Yavor
Telerik team
answered on 07 Aug 2008, 05:20 AM
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.
0
jgig
Top achievements
Rank 1
answered on 08 Aug 2008, 08:51 PM

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!

0
jgig
Top achievements
Rank 1
answered on 08 Aug 2008, 08:55 PM
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;

}

0
ibrahim
Top achievements
Rank 1
answered on 18 Mar 2009, 10:49 AM
should the changes be in my css file ..or the one provided by telerik for this skin?
0
miral shah
Top achievements
Rank 2
answered on 06 Oct 2009, 08:43 AM

 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 

 
 







0
Sebastian
Telerik team
answered on 06 Oct 2009, 12:31 PM
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.
0
miral shah
Top achievements
Rank 2
answered on 06 Oct 2009, 01:17 PM
Thank you sir for informing about appropriate forum. I m newbie to Telerik. :(
0
Mani
Top achievements
Rank 1
answered on 09 Aug 2010, 12:47 PM
hi experts,

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

0
Dimo
Telerik team
answered on 10 Aug 2010, 01:47 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
NK
Top achievements
Rank 1
answered on 15 Aug 2012, 04:18 PM
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
0
Galin
Telerik team
answered on 21 Aug 2012, 05:44 AM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Tags
Grid
Asked by
Raju Kumar
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Shinu
Top achievements
Rank 2
jgig
Top achievements
Rank 1
Yavor
Telerik team
ibrahim
Top achievements
Rank 1
miral shah
Top achievements
Rank 2
Sebastian
Telerik team
Mani
Top achievements
Rank 1
NK
Top achievements
Rank 1
Galin
Telerik team
Share this question
or