[Solved] Matching parent row color in hierarchy

[derek]

I'm using hierarchy to display course information, each row can be expanded to show a nested row of data for the course description. Functionally it looks great. Aesthetically I know the users are going to complain as the main grid rows alternate, but the nested rows are always the same color. They are always the the first color of whatever skin I'm using as there is only one row in each nested grid.

Is there an easy way to make the expanding row background match the color of it's parent row? This would be useful as it would make the data for each course look contained.

<telerik:RadPageView ID="Elective" runat="server">
        <telerik:RadGrid ID="GridElective" runat="server" Skin="WebBlue" AutoGenerateColumns="false" PageSize="20" AllowPaging="True" AllowSorting="true">
            <MasterTableView DataKeyNames="CRN">
                <DetailTables>
                    <telerik:GridTableView DataKeyNames="CRN" ShowHeader="false" BorderWidth="0" AllowPaging="false">
                        <ParentTableRelation>
                            <telerik:GridRelationFields DetailKeyField="CRN" MasterKeyField="CRN" />
                        </ParentTableRelation>
                        <Columns>
                            <telerik:GridBoundColumn HeaderText = "CRN" DataField = "CRN" Visible="false"/>
                            <telerik:GridBoundColumn HeaderText = "Description" DataField = "Description"/>
                        </Columns>
                    </telerik:GridTableView>
                </DetailTables>
                <Columns>
                    <telerik:GridBoundColumn HeaderText = "CRN" DataField = "CRN" Visible="false"/>
                    <telerik:GridBoundColumn HeaderText = "Course" DataField = "Course"/>
                    <telerik:GridBoundColumn HeaderText = "Section" DataField = "Section" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center"/>
                    <telerik:GridBoundColumn HeaderText = "Title" DataField = "Title"/>
                    <telerik:GridHyperLinkColumn HeaderText = "Syllabus" DataNavigateUrlFields="Syllabus" Text="<img src='pdf-icon_sm.png' alt='Download' border='0'/>" Target="_blank" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center"/>
                    <telerik:GridBoundColumn HeaderText = "Session" DataField = "Session" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center"/>
                    <telerik:GridBoundColumn HeaderText = "Professor(s)" DataField = "Professor(s)"/>
                    <telerik:GridBoundColumn HeaderText = "Units" DataField = "Units" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center"/>
                    <telerik:GridBoundColumn HeaderText = "Schedule" DataField = "Schedule"/>
                    <telerik:GridBoundColumn HeaderText = "Specialization" DataField = "Specialization"/>
                </Columns>
            </MasterTableView>
            <SortingSettings SortedBackColor="Azure"/>
            <PagerStyle Mode="NextPrevNumericAndAdvanced" AlwaysVisible="true" ></PagerStyle>
        </telerik:RadGrid>

[Shinu]

Hi Derek,

Try with the following approach and see whether it helps.

CS:

 protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
    {

        if ((e.Item is GridDataItem) && (e.Item.OwnerTableView.Name == "Detail")&&(e.Item.OwnerTableView.ParentItem.ItemType==GridItemType.Item))
        {
            GridDataItem item = (GridDataItem)e.Item;
            item.BackColor = RadGrid1.MasterTableView.ItemStyle.BackColor;
        }
        else if ((e.Item is GridDataItem) && (e.Item.OwnerTableView.Name == "Detail") && (e.Item.OwnerTableView.ParentItem.ItemType == GridItemType.AlternatingItem))
        {
            GridDataItem item = (GridDataItem)e.Item;
            item.BackColor = RadGrid1.MasterTableView.AlternatingItemStyle.BackColor;
        }
    }

note: set the Name property for the detail table as shown below.

 <DetailTables>
         <telerik:GridTableView runat="server"  Name="Detail"   >

Thanks
Shinu

[derek]

Thanks for the reply, but unfortunately it didn't work.

[Shinu]

Hi Derek,

The above given code was working correctly on my end. Have you set the Name property for the Detail table? Also give a try with the above given code in the ItemDataBound event and see whether it is working.

Shinu.

[derek]

Yes, I set the name property, but the method is never being called. I tried adding it into the OnItemCreated property on the grid but it still didn't get called. Where should I be adding the  protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)  code?

I stand corrected, I re-added the code and tried it again, the method IS getting called. However the backgrounds are not changing. Stepping through the code the e.Item.OwnerTable.Name is never "Detail" It's always the name of the MasterTableView, it's never getting down into the sub table. Nothing I've tried has allowed me to access down into that table. Could this be because I'm only using one data table? The sub table is just another column from the same data table that is feeding the main table.

[Dimo]

Hello Derek,

ItemCreated is always called, please double-check the code.

Here is another example, which will give you some guidelines how to achieve the desired appearance:

http://www.telerik.com/community/code-library/aspnet-ajax/grid/how-to-obtain-reference-to-radgrid-detailtables-containing-rows-and-cells-and-customize-their-appearance.aspx

Note that the above code library entry uses RadGrid CSS classes, which don't work anymore for Q1 2009 (GridHeader_Skin and ResizeHeader_Skin). The custom CSS classes don't matter.

The list of old and new RadGrid CSS classes is available at http://www.telerik.com/help/aspnet-ajax/grdcreatingnewskins.html

What you need to do is use the custom .DetailAltRow CSS class to change the appearance of RadGrid items, which belong to detail tables, which directly follow an alternating item from the MasterTableView:

.RadGrid  .DetailAltRow .rgRow
{
       /*same background color as the MasterTable alternating item*/
}


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.