[Solved] How to define styles in a self hierarchical grid ?

[RadTony]

How to define backcolor for items and alternating items in a self hierarchical grid ?

Actually I'm doing this in page_load and it's not working fine (please see image in attachment)

if (RadGrid1.MasterTableView.DetailTables != null)

        {

            RadGrid1.MasterTableView.DetailTables[0].AlternatingItemStyle.BackColor = System.Drawing.Color.Azure  ;

            RadGrid1.MasterTableView.DetailTables[0].ItemStyle.BackColor = System.Drawing.Color.BlanchedAlmond;

            if (RadGrid1.MasterTableView.DetailTables[0].DetailTables[0] != null)

            {

                RadGrid1.MasterTableView.DetailTables[0].DetailTables[0].AlternatingItemStyle.BackColor = System.Drawing.Color.Azure;

                RadGrid1.MasterTableView.DetailTables[0].DetailTables[0].ItemStyle.BackColor = System.Drawing.Color.BlanchedAlmond;

            }

        }

as I have a sqldatasource with automatic generated columns, I can't define styles in aspx ... 

I also can't define a different image for expanded image. As I have this in code :

         button.CssClass = (item.Expanded) ? "rgCollapse" : "rgExpand";

... I tried to put this in aspx but it doesn't work :

       .rgExpand  

        {  

          background:url('Images/CollapsedButton.gif') center no-repeat;       

        }  

      

       .rgCollapse  

        {  

          background:url('Images/ExpandedButton.gif') center no-repeat;  

        }  

I tried everything but the collapse/expand button doesn't change :

        <telerik:RadGrid ID="RadGrid1" OnPreRender="RadGrid1_PreRender" runat="server" DataSourceID="SqlDataSource1"  OnColumnCreated="RadGrid1_ColumnCreated"

            OnItemCreated="RadGrid1_ItemCreated" OnItemDataBound="RadGrid1_ItemDataBound" Width="100%">

            <MasterTableView  HierarchyDefaultExpanded="false" EnableNoRecordsTemplate="false" HierarchyLoadMode="ServerBind" AllowSorting="true" Width="800px"

                DataKeyNames="EmployeeID" ExpandCollapseColumn-ButtonType="ImageButton" 

ExpandCollapseColumn-Display="true"

ExpandCollapseColumn-ExpandImageUrl="Images/CollapsedButton.gif" 

ExpandCollapseColumn-CollapseImageUrl="Images/ExpandedButton.gif">

                <ItemStyle Wrap="false" Width="200px" BackColor="Azure" Height="17px" BorderWidth="1"/>

                <AlternatingItemStyle Wrap="false" BackColor="BlanchedAlmond" Width="200px" Height="17px" BorderWidth="1"/>

                <HeaderStyle Wrap="false" Width="1500px" Height="20px"/>

                

                <SelfHierarchySettings ParentKeyName="ReportsTo" KeyName="EmployeeID"/>                

                

            </MasterTableView>

            

            <ClientSettings AllowExpandCollapse="true" EnablePostBackOnRowClick="true">            

            </ClientSettings>

        </telerik:RadGrid>

[Dimo]

Hi Panin,

Regarding to question about expand/collapse images - you must have a larger specificity for your CSS rules in order to override the RadGrid skin. Please refer to:

http://blogs.telerik.com/dimodimov/posts/08-06-17/how_to_override_styles_in_a_radcontrol_for_asp_net_ajax_embedded_skin.aspx

For example:

div.RadGrid_SkinName  .rgExpand
{
         background: .......... ;
}


As to your first question - you need to reverse the CSS styles of the normal and alternating rows, depending on the detail table's "parent" row. You can do that by adding custom CSS classes to the detail tables . Here is how to find out the "parent" row of a detail table:

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

Greetings,
Dimo
the Telerik team

Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Follow the status of features or bugs in PITS and vote for them to affect their priority.

[RadTony]

Thanks for your answer. I finally got it work by adding "!important" to css styles.

       .rgExpand  

        {  

          background:url('Images/CollapsedButton.gif') center no-repeat !important;       

        }  

      

       .rgCollapse  

        {  

          background:url('Images/ExpandedButton.gif') center no-repeat !important;  

        }