Hide Expamd Collapse Image in sub group

[newbie]

I have two levels of grouping in my grid.
I am trying to hide the expand and collapse images. I tried the code as shown here.
With this solution I was able to hide the expand collapse image for the first level but I was unable to do so for the sub group.

My grid looks something like:

GROUP HEADER 1
 + GROUP HEADER 2
 XXXXXXXXXXXXXXXXXXX
 XXXXXXXXXXXXXXXXXXX

 

+ GROUP HEADER 2
 XXXXXXXXXXXXXXXXXXX
 XXXXXXXXXXXXXXXXXXX
GROUP HEADER 1
 + GROUP HEADER 2
 XXXXXXXXXXXXXXXXXXX
 XXXXXXXXXXXXXXXXXXX

Please let me know what I need to modify.

Also, I need to change the background style only for the Group header 1. How can i achieve this as well.

Thanks.

[newbie]

An update to the earlier post.
I used this code and was able to hide the expand collapse image for the nested group as well.

protected void RadGridCalendar_PreRender(object sender, EventArgs e)
    {
        foreach (GridGroupHeaderItem headerItem in RadGridCalendar.MasterTableView.GetItems(GridItemType.GroupHeader))
        {
            //for Type Header
            if (headerItem.GroupIndex == "0")
            {
                (headerItem.Controls[0].Controls[0] as GridImageButton).Visible = false;
            }
            else // date header
            {
                (headerItem.Controls[1].Controls[0] as GridImageButton).Visible = false;
            }
        }

    }

However, I was not able to change the background color for the first group header.

I tried changing the background color using this code:

protected void RadGridCalendar_ItemDataBound(object sender, GridItemEventArgs e)
{
   if (e.Item is GridGroupHeaderItem)
   {
       GridGroupHeaderItem item = (GridGroupHeaderItem)e.Item;

        item.ForeColor = Color.Crimson;
        item.Font.Bold = true;
        item.Font.Size = 14;
        item.BackColor = Color.LightGray;
    }

}

I was able to change the font to Bold but no other properties are getting applied. I understand they are getting overwritten by some oher styles in grid css maybe. However, when i run the developer tools and trace the style it shows me that the current style applied is the inline style (with the properties that I have specified above). But i don't see those applied on my page.

Any ideas?

[Princy]

Hello Newbie,

You can easily change the background color of GroupHeader by addiing the following CSS in your page.

CSS:

   <style type="text/css">
        .rgGroupHeader
        {
            background-color: Red !important;
        }
    </style>

Thanks,
Princy.

[newbie]

Hi Princy.
I was unable to change the background using this technique.

Here is my Grid css.  Please suggest.

/* Telerik RadGrid Telerik / embedded skin */

.RadGrid_MLightning
{
    background: #F9F9F9;
}

.RadGrid_MLightning,
.RadGrid_MLightning table,
.GridFilterMenu_MLightning table
{
    font: normal 9pt Tahoma;

}

.MasterTable_MLightning
{
    border: 0px !important;
    border-collapse: separate !important;
    color: #000;

    /*-moz-user-select: none;*/ /*disables text selecting in Firefox to combat unpleasant visual appearance*/
}



.MasterTable_MLightning td
{
    padding:0px 0px 7px 0px;
    background:#ffffff;
    border-right :0px;
}

.MasterTable_MLightning th
{
    background:#ffffff;
    text-align: left;
}

.RadGrid_MLightning td,
.RadGrid_MLightning td a
{
    color: #000;
}



th.GridHeader_MLightning, th.ResizeHeader_MLightning
{
    background: #003e7e repeat-x 0 100%;
    border-right: solid 1px #FFFFFF;
    border-bottom: solid 1px #003e7e;
    border-top: solid 1px #003e7e;
    height: 20px;
    color: #ffffff;
    font-family:Tahoma;
    font-size:10pt;
}

th.GridHeader_MLightning,
th.ResizeHeader_MLightning
{
    padding:3px;
}

.GridHeader_MLightning a
{
    color: #ffffff;
    text-decoration: none;
}

td.GridHeader_MLightning input
{
    float: left;
    border: solid 1px #666;
    background: #fafafa;
    font: bold 11px Verdana, Arial, Sans-serif;
    color: #989cb0;
    height: 20px;
    vertical-align:middle;
}

.GridFilterRow_MLightning td
{
    border-left: 1px solid #f9f9f9;
    background-color: #8FBCD1;
    empty-cells: hide;
    text-align:center;
    height: 16px;
    padding:0px 0px 0px 0px;
}

.GridRow_MLightning td,
.GridAltRow_MLightning td,
.SelectedRow_MLightning td,
.ActiveRow_MLightning td,
.GridEditRow_MLightning td
{
    padding-top:2px;
    padding-bottom:2px;
}
.GridRow_MLightning
{
    background: #ffffff;
}

.GridRow_MLightning td
{
    white-space: normal;
    text-align: center;
    color: #898a8c;
    font-family: Tahoma;
    font-size: 8pt;
    padding: 10px 0px 10px 0px;
    border: solid 1px #C4C4C4;

}

.GridRow_MLightning td div
{
    text-align: left;
    padding-left: 5px;
}

.GridRow_MLightning td a
{
    color: #73abc9;
    font-family:Tahoma;
    font-size:8pt;
}


.GridAltRow_MLightning
{
    background: #ffffff;
}
.GridAltRow_MLightning td
{
    white-space:normal;
    text-align: center;
    color:#898a8c;
    font-family:Tahoma;
    font-size:8pt;
    padding: 10px 0px 10px 0px;
    border: solid 1px #C4C4C4;
}

.GridAltRow_MLightning td a
{
    color: #73abc9;
    font-family:Tahoma;
    font-size:8pt;
}

.GridAltRow_MLightning td div
{
    text-align: left;
    padding-left: 6px;
}

.SelectedRow_MLightning
{
    background: #707070 url( '../../App_Themes/UTC/Grid/selectedRow.gif' ) repeat-x 50% bottom;
}
.SelectedRow_MLightning td
{
    border-top: solid 1px #eaeaea;
    border-left: none;
    border-bottom: solid 1px #83c60b;
    padding-left:4px;
}

.GridEditRow_MLightning
{
    background-color: #ffffe1;
}
.GridEditRow_MLightning input
{
    font-size: 11px;
}

.ActiveRow_MLightning
{
    background: #edf2d9;
}
.ActiveRow_MLightning td,
.GridEditRow_MLightning td
{
    border-top: solid 1px #eaeaea;
    border-left: solid 1px #eaeaea;
    border-bottom: solid 1px #fefefe;
}

.GridRowOver_MLightning
{
    background:none #fff;
}

.GridPager_MLightning
{
    background: #898a8c;
    color: #ffffff;

}
.GridPager_MLightning td
{
    /*border: solid 1px #fff;*/
    border: 1px solid #c7c7c7;
    border-right: 0;
    color: #999;
    height: 14px;
    padding-top: 1px;
    padding-bottom: 1px;
    font-family: Tahoma;
    font-size: 8pt;
    background: #898a8c;
}
.GridPager_MLightning td div
{
    padding-left:0px;
    color: #ffffff;
}

.GridPager_MLightning td a
{
    padding-left:1px;
    color: #ffffff;
}

.GridPager_MLightning td a:hover,
.GridFooter_MLightning td a:hover
{
    color: #333;
}

.PagerLeft_MLightning *,
.PagerRight_MLightning *,
.PagerCenter_MLightning *
{
    vertical-align:middle;
}

.PagerLeft_MLightning,
.PagerRight_MLightning,
.sliderPagerLabel_MLightning
{
    line-height:17px;
    padding-top:2px;
}

.PagerLeft_MLightning
{
    float:left;
}
.PagerRight_MLightning,
.sliderPagerLabel_MLightning
{
    float:right;
    padding-right:4px;
}
.GridPager_MLightning .radslider
{
    float:left;
}
.GridPager_MLightning img
{
    border:0;
}

.GridPager_MLightning .radInput_MLightning
{
    vertical-align:middle;
}

.PagerCenter_MLightning
{
    display:block;
    text-align:center;
}

.GridFooter_MLightning
{
    background: #6dabaa;
    height: 16px;
    color: #666;
    line-height: 10px;
}
.GridFooter_MLightning td
{
    border: solid 2px #6dabaa;
    border-top: 1px solid #6dabaa;
    border-left: 7px solid #6dabaa;
    border-right: 7px solid #6dabaa;
}
.GridFooter_MLightning td a
{
    color: #666;
}

tr.GroupHeader_MLightning
{
    background: white;
    height: 22px;
}
tr.GroupHeader_MLightning td
{
    border-left:1px solid #fff;
    border-right:0;
    border-bottom: solid 1px #c2c2c2;
    padding-top: 7px;
}

.GroupHeader_MLightning td div div{top:-0.5em;}
* html .GroupHeader_MLightning td div div{top:0.4em;}
*+html .GroupHeader_MLightning td div div{top:0.4em;}
.GroupHeader_MLightning td div div div{top:0;}



.GroupPanel_MLightning
{
    background-color: #e8e8e8;
    width: 100%;
    border-collapse: collapse;
    border-bottom: 1px solid #b1b1b1;
}

.GroupPanel_MLightning td
{
    padding: 2px 4px;
}

.GroupPanelItems_MLightning
{
    background: #efefef;
    color: #999999;
    border: solid 1px white;
    border-right: solid 1px #c6c6c6;
    border-bottom: solid 1px #c6c6c6;
    white-space:  nowrap;
    font-size: 10px;
}

.TopReorderIndicator_MLightning
{
    background: url('../../App_Themes/UTC/Grid/MoveDown.gif') no-repeat;
}

.BottomReorderIndicator_MLightning
{
    background: url('../../App_Themes/UTC/Grid/MoveUp.gif') no-repeat;
}

.GridFilterMenu_MLightning
{
    cursor:default;

}

.GridFilterMenu_MLightning .GridFilterMenuSelectColumn_MLightning,
.GridFilterMenu_MLightning .GridFilterMenuTextColumn_MLightning
{
    padding:3px 4px;
}

.GridFilterMenu_MLightning .GridFilterMenuSelectColumn_MLightning
{
    background:#f9f9f9;
    text-align:center;
}

.GridFilterMenu_MLightning .GridFilterMenuTextColumn_MLightning
{
    background: #FFFFFF;
    color: #333;
}

.GridFilterMenu_MLightning .GridFilterMenuHover_MLightning
{
    background:#c1f320;
}

/*AJAX Loading*/

.GridLoadingTemplate_MLightning
{
    background:#fff !important;
    font:normal 24px/54px arial,sans-serif;
    color:#b5ea0e;
}

/*loading*/

.LoadingPanel_MLightning {
    background: url( 'Grid/loading.gif' ) center center no-repeat #fff;
}

/* rtl support */

.RadGridRTL_MLightning th,
.RadGridRTL_MLightning td
{
    text-align:center;
}

.RadGridRTL_MLightning .PagerLeft_MLightning,
.RadGridRTL_MLightning .GridPager_MLightning .radslider
{
    float:left;
}
.RadGridRTL_MLightning .PagerRight_MLightning,
.RadGridRTL_MLightning .sliderPagerLabel_MLightning
{
    float:left;
}
.GridCommandRow_MLightning
{
    background: #a7a7a9;
    color: #ffffff;
}

.GridCommandRow_MLightning td
{
    background: #a7a7a9;
    border: solid 1px #c7c7c7;
    color: #ffffff;
    height: 16px;
    padding-top: 1px;
    padding-bottom: 1px;
    font-family: Tahoma;
    font-size: 9pt;
    text-align:right;
}

.GridCommandRow_MLightning td a
{
    /*color: #73abc9;*/
    text-align:right;
}

[Dimo]

Hello,

The group header row background is not applied for 2 reasons:

1. There is a background style defined for table cells. This is not a good practice with RadGrid and leads to negative side effects as the one currently observed. Please set backgrounds only to rows (except the header cells, which can have background styles defined).

.MasterTable_MLightning  td     
{        
    padding:0px 0px 7px 0px;     
    background:#ffffff;     
    border-right :0px;     
}


2. The used RadGrid version is old and the group header CSS class is not rgGroupHeader, but GroupHeader_SkinName. Currently you have a white background defined for group headers in the skin.


In order to apply background style only to first level group headers, please use

protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
{
    if (e.Item is GridGroupHeaderItem && (e.Item as GridGroupHeaderItem).GroupIndex.IndexOf("_") == -1)
    {
        e.Item.BackColor = System.Drawing.Color.Red;
    }
}

Regards,
Dimo
the Telerik team

[newbie]

Hi Dimo,

Thanks for your response on that.
I was able to change the background color. However, I wanted to change the font-size and I was unable to do that. Can you suggest a way of changing the font-size as well.

Also, Is it possible to have the second level group header to be indented?