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

Grid hierarchy color around detail tables

11 Answers 390 Views

Grid

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

11 Answers, 1 is accepted

answered on 02 Dec 2008, 04:53 AM

Hi Laura,

Try the following code snippet to set the background color for the detail table Caption.

css:

    
            <head runat="server"> 
        
                <title>Untitled Page</title> 
        
                <style type="text/css" > 
        
                      .DetailTable_Default caption 
        
                        { 
        
                         color: blue; 
        
                         background-color:red; 
        
                        } 
        
                </style> 
        
            </head>

Thanks
Shinu.

answered on 02 Dec 2008, 03:59 PM

Thank you as always for your help. I tried to add this, and even added one for the mastertableview, but it does not use my styles. Here is the code I added:

    
             <link rel="Stylesheet" href="..\..\styles.css" /> 
        
                <style type="text/css"> 
        
                    .MasterTable_Default caption 
        
                        { 
        
                         color: red; 
        
                         background-color: Blue !important; 
        
                         font-size: larger; 
        
                        }    
        
                    .DetailTable_Default caption   
        
                        {   
        
                         color: blue;   
        
                         background-color: red !important;   
        
                        }   
        
                html { overflow:scroll;} 
        
                   html, body, form {width:100%;height:100%; } 
        
                 </style>

    
            <telerik:GridTableView DataKeyNames="contact_id" DataSourceID="CCcontacts" Caption=" <h5><br>Details About Contacts</b> "  
        
                             Width="100%" runat="server" Name="Detail1" Font-Bold="False" CssClass="DetailTable_Default" 
        
                                Font-Italic="False" Font-Overline="False" Font-Strikeout="False"  
        
                                Font-Underline="False">

    
             <telerik:GridTableView DataKeyNames="contact_id" DataSourceID="CCcontacts" Caption=" <h5><br>Details About Contacts</b> "  
        
                             Width="100%" runat="server" Name="Detail1" Font-Bold="False" CssClass="DetailTable_Default" 
        
                                Font-Italic="False" Font-Overline="False" Font-Strikeout="False"  
        
                                Font-Underline="False">

answered on 03 Dec 2008, 03:46 AM

Hi Laura,

Which Skin you are using? You must apply the Skin name for the Grid in the style.

    
            <head runat="server">  
        
                <title>Untitled Page</title>  
        
                <style type="text/css" >  
        
                      .DetailTable_[SkinName] caption  
        
                        {  
        
                         color: blue;  
        
                         background-color:red;  
        
                        }  
        
                </style>  
        
            </head>

Caption Property

Thanks
Shinu

answered on 16 Feb 2011, 04:04 PM

Nothing like resurrecting a really old thread ;)

Anyway, I was looking for a similar way to color the left margin area where the detail tables are indented in. I have two detail tables, the first one has 100% width so there's no indention there, but the second is fixed layout and right aligned in the detail table area, so I have a large indented space to the left of my second detail table. To color that area, I set the BackColor of the RadGrid control to be the desired color, and then I did BackColor overrides for each ItemStyle/AlternatingItemStyle of the MasterTableView and my two detail tables. This colored the indented space but left all the other BackColors how I assigned them.

For simplicity, I removed alot of the other stuff (attributes,columns,etc) but many of the things I removed are still necessary for the RadGrid control to function properly.

<rad:RadGrid Width="100%" BackColor="LightGray">

<ItemStyle BackColor="White" />

<AlternatingItemStyle BackColor="White" />

<MasterTableView ...>

<Columns>

...

</Columns>

<DetailTables>

<rad:GridTableView Width="100%">

<ItemStyle BackColor="White" />

<AlternatingItemStyle BackColor="White" />

<Columns>

...

</Columns>

</rad:GridTableView>

<rad:GridTableView TableLayout="Fixed" HorizontalAlign="Right">

<ItemStyle BackColor="White" />

<AlternatingItemStyle BackColor="White" />

<Columns>

...

</Columns>

</rad:GridTableView>

</DetailTables>

</MasterTableView>

</rad:RadGrid>

answered on 16 Feb 2011, 04:45 PM

Hi Nathan,

The following code library entry shows how to apply a custom CSS class to the table cells, which contain the RadGrid detail tables:

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

After doing this, you can set styles of your preference to these cells.

In addition, RadGrid now applies a rgExpandCol class to the table cells from the GridExpandColumn, which push the detail tables to the right.

Best wishes,
Dimo
the Telerik team

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.