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

Row Height revisited

11 Answers 478 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Bob
Top achievements
Rank 1
Bob asked on 16 Dec 2008, 08:35 PM
OK, After reading around for a bit, I can use
<AlternatingItemStyle BackColor="#CCFFCC" Height="1px" 
Font-Size="XX-Small" ForeColor="#339933" /> 
 
<ItemStyle Height="50px" /> 




 

To set the height of my rows.
However, they are still way too tall for my needs.

It looks as though the text / checkboxes are being padded both top and bottom.
Is there any way to force the rows so they will be shorter?

By the way, the height=50 is just there as a test to see if it works on every other row.  I'll make them both the same once I find a way to make them short.

11 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 17 Dec 2008, 08:44 AM
Hi Bob,

Here is an example with RadGrid rows being high 50px and 1px. When setting too small heights for table cells, you should be aware that if the content inside is taller, table cells always expand, unless you place a container with overflow:hidden style inside.


<%@ Page Language="C#" %> 
<%@ Import Namespace="System.Data" %> 
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
 
<script runat="server"
 
protected void RadGrid_NeedDataSource(object sender, GridNeedDataSourceEventArgs e) 
    DataTable dt = new DataTable(); 
    DataRow dr; 
    int colsNum = 4
    int rowsNum = 10
    string colName = "Column"
 
    for (int j = 1; j <= colsNum; j++) 
    { 
        dt.Columns.Add(String.Format("{0}{1}", colName, j)); 
    } 
 
    for (int i = 1; i <= rowsNum; i++) 
    { 
        dr = dt.NewRow(); 
 
        for (int k = 1; k <= colsNum; k++) 
        { 
            dr[String.Format("{0}{1}", colName, k)] = String.Format("{0}{1} Row{2}", colName, k, i); 
        } 
        dt.Rows.Add(dr); 
    } 
 
    (sender as RadGrid).DataSource = dt
 
</script> 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml"
<head runat="server"
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
<title>RadControls for ASP.NET AJAX</title> 
<style type="text/css"
 
.RadGrid tr.Row50 
    background:yellow; 
 
.RadGrid .Row50 td 
    padding-top:0; 
    padding-bottom:0; 
    height:50px; 
    vertical-align:middle; 
 
.RadGrid tr.Row1 
    background:blue; 
 
.RadGrid .Row1 td 
    padding-top:0; 
    padding-bottom:0; 
    height:1px; 
    font:1px/1px sans-serif; 
 
</style> 
</head> 
<body> 
<form id="form1" runat="server"
<asp:ScriptManager ID="ScriptManager1" runat="server" /> 
 
<telerik:RadGrid 
    ID="RadGrid1" 
    runat="server" 
    OnNeedDataSource="RadGrid_NeedDataSource"
    <MasterTableView> 
        <ItemStyle CssClass="Row50" /> 
        <AlternatingItemStyle CssClass="Row1" /> 
    </MasterTableView> 
</telerik:RadGrid> 
 
</form> 
</body> 
</html> 
 



Best wishes,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Augusto Cosatti
Top achievements
Rank 1
answered on 30 Sep 2009, 06:39 AM
Hello.

The solution provided works fine but it doesn't allow the text to be wrapped when the text is larger than the column width. I simply removed the "height" property in the td style and left the "padding-top" and "padding-bottom" to 0px. It does the job as expected.

Thanks for you help
Augusto
0
Augusto Cosatti
Top achievements
Rank 1
answered on 30 Sep 2009, 07:01 AM
Hello.

I have a problem when I'm moving the row style definition from the ASP page (<style> section) to the CSS file (referenced from a master page).

The style is not applied to the grid rows.
Is there a difference in the style declaration when it's declared in the ASP page and in a CSS file ?

Do you have an idea ?

Thanks
Regards
Augusto
0
Dimo
Telerik team
answered on 30 Sep 2009, 01:22 PM
Hi Augusto,

There is no difference where the CSS styles are defined, given that the specificity of the CSS selectors is high enough to override the embedded skin (and it is high enough, otherwise the styles would not work on the page either).

Please check whether the CSS file is registered on the page and whether all the CSS code inside is valid.

If you need further assistance, please send us a simple runnable project in a formal support ticket.

Best wishes,
Dimo
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
Augusto Cosatti
Top achievements
Rank 1
answered on 30 Sep 2009, 01:39 PM
Hi Dimo.

Actually if I put the declaration of the CSS file in the master page, it does not work. But the CSS file is recognized because the application works fine.

Here is the link reference:

<

 

link href="../Style/Style.css" type="text/css" rel="stylesheet" />

 


I have to repeat the above line in the child page within the content placeholder.

What do you think ?

Regards
Augusto
0
Dimo
Telerik team
answered on 30 Sep 2009, 01:54 PM
Hello Augusto,

Is the CSS file registered on the page, when you have a <link> tag only in the MasterPage? If yes, then the problem is probably caused by low CSS specificity.

Please send us a simple runnable project, so that we can see what happens exactly and explain.

Best wishes,
Dimo
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
Augusto Cosatti
Top achievements
Rank 1
answered on 30 Sep 2009, 01:57 PM
Dimo,

Unfortunately the project is a big project and I can't send it to you.
I will prepare a small project with the same architecture (master/child) and I will send it to you.

Thanks and regards
Augusto
0
Augusto Cosatti
Top achievements
Rank 1
answered on 07 Oct 2009, 11:03 AM
Hi Dimo.

I have prepared a sample project but I can't attach the zip file. How can I send you the file ?

Thanks
Regards
Augusto
0
Sebastian
Telerik team
answered on 07 Oct 2009, 11:06 AM
Hello Augusto,

You can start regular support ticket from your account and submit the project in it. Thus we will examine it locally and will get around to you with our findings.

Kind regards,
Dimo,
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
Albert
Top achievements
Rank 1
answered on 30 Aug 2010, 04:53 PM
Hello, I'm experiencing the same problem. If the css style is defined on the page level, it is applied, but doesn't get applied if it's defined in outside css file. Could you please post the solution?
Thank you.
0
Dimo
Telerik team
answered on 31 Aug 2010, 11:36 AM
Hello Albert,

The solution is to use higher CSS specificity. As this is an important CSS knowledge, I recommend you to read

http://blogs.telerik.com/dimodimov/posts/08-06-17/how_to_override_styles_in_a_radcontrol_for_asp_net_ajax_embedded_skin.aspx

For example:

div.RadGrid tr.Row50
{
    background:yellow;
}
 
div.RadGrid tr.Row50 td
{
    padding-top:0;
    padding-bottom:0;
    height:50px;
    vertical-align:middle;
}
 
div.RadGrid tr.Row1
{
    background:blue;
}
 
div.RadGrid tr.Row1 td
{
    padding-top:0;
    padding-bottom:0;
    height:1px;
    font:1px/1px sans-serif;
}


Kind 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
Tags
Grid
Asked by
Bob
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Augusto Cosatti
Top achievements
Rank 1
Sebastian
Telerik team
Albert
Top achievements
Rank 1
Share this question
or