Grid Styling Help

4 posts, 1 answers
  1. Michael O'Flaherty
    Michael O'Flaherty avatar
    67 posts
    Member since:
    Jun 2010

    Posted 12 Mar 2013 Link to this post

    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
  2. Kostadin
    Admin
    Kostadin avatar
    1713 posts

    Posted 15 Mar 2013 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Michael O'Flaherty
    Michael O'Flaherty avatar
    67 posts
    Member since:
    Jun 2010

    Posted 15 Mar 2013 Link to this post

    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
  5. Answer
    Kostadin
    Admin
    Kostadin avatar
    1713 posts

    Posted 18 Mar 2013 Link to this post

    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.
Back to Top