Basic custom styling the grid

[Shane P]

Hi there,
I have just upgraded to the new 2009 Q1 and I like it. I am working with the default theme as it is pretty close to what I need.

I do have a couple of styling problems I was hoping someone could help me out with.

How do I remove the rgCommandRow border and the inner gradient colour?

I want to either remove the grids outter border or change its colour how do I do this?

I have tried .RadGrid_Default .rgCommandRow
{
    border:none;
}

Do I need to add a custom css class to it?


Any help would be great!

Thank you

[Princy]

Hello Shane,

You can try adding the !important keyword to the styles inorder to override the preset styles in the skin. Check out the code below to set the style for Command Row :
css:

 <style type="text/css">
  .GridCommandRow_Default td
   {
    border:none !important;
   }
 </style>

Thanks
Princy.

[Shane P]

Thanks Princy,

That didnt do anything however.....am I meant to be using !important? I thought that wasnt best practise?

 

Thanks

Shane

[Steve Y]

For the new Q1 2009 grid css, you should look at the following definitions for the command row. One of the issues I can see is that it seems that the command row border is controlled by the main div border for the top and the sides of the command row. The border between the commandrow and the grid header is controlled by the css for the command row. So if you check out the following css, you'll see that I have removed the background image of the command row and colored it red. I've set the border between the command row and the header row to be #688caf. The other css is there to complete the styling types for the command row.

Also. I have added div. in front of each element  (e.g. div.RadGrid_Default .rgCommandRow). If you add the div. it adds more weight to the styling so it will override the telerik provided styling ( which just uses .RadGrid_Default .rgCommandRow) without having to use !important.

I hope this helps,

Regards, Steve

div.RadGrid_Default .rgCommandRow
{
    background-image:none;
    background-color:red;
}

div.RadGrid_Default .rgCommandRow td
{
    border-bottom:1px solid #688caf;
}

div.RadGrid_Default .rgCommandRow td td
{

}

div.RadGrid_Default .rgCommandRow a
{
    color:#000;
    text-decoration:none;
}

[Shane P]

Hi Steve,

I have tried

div.RadGrid_Default

 

.rgCommandRow

 

{

 

background-image:none;

 

 

background-color:transparent;

 

 

border:none;

 

}

 

div.RadGrid_Default

 

.rgCommandRow td

 

{

 

border:none;

 

 

border-bottom:1px solid #688caf;

 

}

 

div.RadGrid_Default

 

.rgCommandRow td td

 

{

 

}

 

div.RadGrid_Default

 

.rgCommandRow a

 

{

 

color:#000;

 

 

text-decoration:none;

 

}

which removes the top gradient background colour however it doesnt remove the border and the background colour is not transparent it is the same colour as the alternative row.


Should there be something else I am changing?

[Steve Y]

Well. It's as I mentioned in my post. The border for the command row is not controlled by the command row. The command row sits inside a div which contains the whole grid and it has a border. Look at the the following css to see how it's done. (btw - the colors are not for the default grid, they are from one of mine that I've changed...)

div.RadGrid_Default
{
    background:#FFFFFF none repeat scroll 0 0;
    border:1px solid #3B5A82;
    color:#27413E;
}

So. This puts a border around the whole grid. The command row sits at the top inside this div. The top and side borders of the command row are actually the top and side borders of the grid. The bottom border of the command row is really the divider between itself and the header row. Hence when you changed the command row bottom border, you saw it change in your grid, but when you tried to set the borders of the command row to none, it made no difference because, well, except for the bottom border, they are already set to none, and the borders you see are from the main grid div top and sides.

Notice also that the whole grid has a background color. In my case it's #ffffff (white). Perhaps on the default grid, it's set to the same color as you see for the alternate row. If so, then it's bleeding through I guess.

The bottom line is that you may have to be creative in order to get the top and sides of the command row to be a different border color than that of the rest of the grid. And in order to get the background color of the command row to be something you want , you may have to set it to be a specific color rather than transparent.

I hope this helps and hasn't confused you! I've only been playing with the new grid css these last two days and I've managed to get mine to look the same as I had in the old Q3 2008 release after about 4 hours of trial and error.

Regards, Steve

[Dimo]

Hi all,

In all RadGrid skins, the appearance of the command row is influenced by the following:

1) the border of the RadGrid control
2) the border of the table cell, which wraps the command row content
3) the border of the table, which wraps the command row content. This table is inside the table cell from point (2)
4) the background image and/or color set to the command row itself

Depending on the skin, some, all or none of the above may be defined. Talking about the Default skin, here is how to remove everything, except (1)

<%@ 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">

div.RadGrid_Default .rgCommandRow
{
    background:none transparent;
}

div.RadGrid_Default tr.rgCommandRow td,
div.RadGrid_Default tr.rgCommandRow table
{
    border:0;
}

</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />

<telerik:RadGrid
    ID="RadGrid1"
    runat="server"
    OnNeedDataSource="RadGrid_NeedDataSource">
    <MasterTableView CommandItemDisplay="TopAndBottom" />
</telerik:RadGrid>

</form>
</body>
</html>

 

Kind regards,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.