Grid Styling Help

[Michael O'Flaherty]

Hi!

See attached images...

We have two areas that we cannot seem to be able to style.

1. This is a resizable grid and we would like change the white to something more neutral. Is this area available via a CSS style.

2. This is a heirarchy grid. We are able to get at the expand/collapse cell (see code below), but how do we get at the cell below it?

protected void radGridCaseNumbers_ItemCreated(object sender, GridItemEventArgs e)
        {
            if (e.Item is GridDataItem)
            {
                (e.Item as GridDataItem)["ExpandColumn"].BackColor = Color.FromArgb(50, 193, 224, 255);
            }
        }

Thanks for your help!
Michael

[Kostadin]

Hello Michael,

I already answered your support ticket and I am providing the answer here as well if somebody else have a similar issue.

You can fill the with gap by making a new image exactly like header and set it as background of RadGrid with the following CSS rule.

 <style type="text/css">

   div.RadGrid

   {

       background: url('header_vista.gif') repeat-x 100% 0;

   }
</style>

As to your second requirement you could use the following code snippet in order to access the button below and change its BackColor property:

protected void radGridCaseNumbers_ItemCreated(object sender, GridItemEventArgs e)
{
    if (e.Item is GridDataItem)
    {
        (e.Item as GridDataItem)["ExpandColumn"].BackColor = Color.FromArgb(50, 193, 224, 255);
        ((e.Item as GridDataItem)["ExpandColumn"].Controls[0] as Button).BackColor = Color.FromArgb(50, 193, 224, 255);
    }
}

Greetings,
Kostadin
the Telerik team

[Michael O'Flaherty]

Thanks so much for your response!

Regarding #1, what you gave me gets to the background. Is there a way to limit it? You can see what this does to my otherwise beautiful grid (ha!)

div.radGrid
{
    /*background: url('header_vista.gif') repeat-x 100% 0;*/
    background-color: palevioletred !important;
}

Regarding #2, we are closer but as the screenshot indicates, I am not hitting the right cell. Here is my code:

protected void radGridCaseNumbers_ItemCreated(object sender, GridItemEventArgs e)
        {
            if (e.Item is GridDataItem)
            {
                var gridDataItem = (e.Item as GridDataItem)["ExpandColumn"];
                //gridDataItem.CssClass = "radGridHeirarchyParent";
                gridDataItem.BackColor = Color.FromArgb(50, 193, 224, 255);
                (gridDataItem.Controls[0] as Button).BackColor = Color.FromArgb(50, 193, 224, 255);
            }
        }

Thanks again!
Michael

[Kostadin]

Hi Michael,

Actually this is expected because you change the background color of the grid. As I already mention you have to make an image exactly like header and set it as background of RadGrid. For your convenience I prepared a small sample and attached it to this thread. As to your second requirement you could use the following CSS rule:

<style type="text/css">
        div.RadGrid .rgMasterTable td.rgExpandCol
        {
            background-color: aqua;
        }
    </style>

All the best,
Kostadin
the Telerik team