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

Grid Styling Help

3 Answers 60 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Michael O'Flaherty
Top achievements
Rank 2
Michael O'Flaherty asked on 12 Mar 2013, 05:59 PM
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

3 Answers, 1 is accepted

Sort by
0
Kostadin
Telerik team
answered on 15 Mar 2013, 09:53 AM
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
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.
0
Michael O'Flaherty
Top achievements
Rank 2
answered on 15 Mar 2013, 01:03 PM
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
0
Accepted
Kostadin
Telerik team
answered on 18 Mar 2013, 11:42 AM
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
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
Michael O'Flaherty
Top achievements
Rank 2
Answers by
Kostadin
Telerik team
Michael O'Flaherty
Top achievements
Rank 2
Share this question
or