I am using a Rad-Grid for hierarchical display of data, i.e. when a row in the Master grid is expanded, the child grid opens up. I am using a Gray skin for my grid. What I want is that even after expanding the rows in the Master grid, the resulting grid should still have an alternating white and gray rows. Please help me out. I am attaching the mark-up of my case.
<
html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
<telerik:RadScriptManager ID="RadScriptManager1" Runat="server">
</telerik:RadScriptManager>
<div>
<telerik:RadGrid ID="RadGrid1" runat="server" Skin="Gray" Width="470px" AutoGenerateColumns="False">
<
MasterTableView DataKeyNames="GroupID" Width="100%" HorizontalAlign="Right">
<
RowIndicatorColumn>
<
HeaderStyle Width="20px"></HeaderStyle>
</
RowIndicatorColumn>
<
ExpandCollapseColumn>
<
HeaderStyle Width="20px"></HeaderStyle>
</
ExpandCollapseColumn>
<
DetailTables>
<
telerik:GridTableView DataKeyNames="GroupID" Width="100%" ShowHeader="false" TableLayout="Auto" BorderStyle="None" HorizontalAlign="Right">
<
ParentTableRelation>
<
telerik:GridRelationFields MasterKeyField="GroupID" DetailKeyField="GroupID" />
</
ParentTableRelation>
<
RowIndicatorColumn>
<
HeaderStyle Width="20px"></HeaderStyle>
</
RowIndicatorColumn>
<
ExpandCollapseColumn>
<
HeaderStyle Width="20px"></HeaderStyle>
</
ExpandCollapseColumn>
<
Columns>
<
telerik:GridBoundColumn DataField="NameID"> <HeaderStyle Width="115px" /></telerik:GridBoundColumn>
<
telerik:GridBoundColumn HeaderText="Name" DataField="Name"><HeaderStyle Width="157px" /></telerik:GridBoundColumn>
<
telerik:GridBoundColumn HeaderText="Date" DataField="CreatedDate" DataFormatString="{0:d}"><HeaderStyle Width="155px" /></telerik:GridBoundColumn>
<
telerik:GridBoundColumn HeaderText="Active" DataField="Active"><HeaderStyle Width="125px" /></telerik:GridBoundColumn>
</
Columns>
</
telerik:GridTableView>
</
DetailTables>
<
Columns>
<
telerik:GridBoundColumn HeaderText="Group ID" DataField="GroupID"><HeaderStyle Width="150px" /></telerik:GridBoundColumn>
<
telerik:GridBoundColumn HeaderText="Name" DataField="GroupName"><HeaderStyle Width="200px" /></telerik:GridBoundColumn>
<
telerik:GridBoundColumn HeaderText="Date" DataField="CreatedDate" DataFormatString="{0:d}"><HeaderStyle Width="200px" /></telerik:GridBoundColumn>
<
telerik:GridBoundColumn HeaderText="Active" DataField="Active"><HeaderStyle Width="150px" /></telerik:GridBoundColumn>
</
Columns>
</
MasterTableView>
<
FilterMenu EnableTheming="True">
<
CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
</
FilterMenu>
</telerik:RadGrid>
</div>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:FPSCoreDevConnectionString3 %>"
SelectCommand="SELECT * FROM [LookupGroup]"></asp:SqlDataSource>
<asp:SqlDataSource ID="SqlDataSource2" runat="server"
ConnectionString="<%$ ConnectionStrings:FPSCoreDevConnectionString3 %>"
SelectCommand="SELECT * FROM [LookupName]"></asp:SqlDataSource>
</form>
</
body>
</
html>
9 Answers, 1 is accepted
The RadGrid Gray skin displays different normal and alternating rows on all levels of hierarchy. There is nothing in your code, which could prevent this, so if you are not seeing white and gray rows in the detail tables, then there must be something else on your page, which interferes with the RadGrid styles. Please double check and if the problem persists, please open a formal support ticket and send us a complete runnable page/project.
Kind regards,
Dimo
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Rank 1
Thanks for your reply. I didn't frame my question well. Let me explain you my issue:
The details table also shows white and gray rows. But I want the entire grid to have a normal and alternating row style even after expanding any row.
Say for instance, my Master table displays rows with white,gray,white,gray,white,gray and so on... If I click on the second row (which is white), it will display the details table (with no headers, borders in my case) with white, gray, white, gray records. But my client needs that the details table should start with a row having alternating color to its parent row. So in this case it shouls start with a gray row. And depending on the color of the last row of the details table the next row in the Master table should have an alternate style. i.e. If the last row of the details table is gray in color, the next row in the Master table should be white.
Please let me know if you have any questions.
Kind Regards,
Uday
Thanks, now I understand. Well, in order to distinguish what kind of a row the user has expanded, you can use the following approach:
How to Obtain Reference to RadGrid DetailTables' Containing Rows and Cells, and Customize Their Appearance
In the above example you will see how to add a CSS class to the table row, which contains your detail table. The CSS class is related to the table row, which has been expanded. Afterwards, you will be able to tweak the appearance of normal and alternating rows in the detail tables, according to your needs.
For example, this is how to reverse the backgrounds of detail table rows, when the opening table row is a normal row (white) and the first row of the detail table is also a normal row (white):
.DetailRow .GridRow_Gray
{
background: #efefef ;
}
.DetailRow .GridAltRow_Gray
{
background: #fff ;
}
However, you have to be aware that the above CSS rules have a higher specificity for detail table rows, than the skin styles for hovered, selected, active and edited rows. In other words, you will not be able to see hovered and selected rows in the detail tables. If this is a problem, you have to add styles with higher specificity for hovered and selected rows as well. In this case you have to use a non-embedded sprite image as a background image. You can take the image from the /Skins/Gray/Grid/ subfolder of your RadControls installation folder.
.DetailRow .SelectedRow_Gray
{
background:#959595 url(sprite.gif) 0 -1816px repeat-x;
}
.DetailRow .GridRowOver_Gray,
.DetailRow .GridEditRow_Gray
{
background:#b6b6b6 url(sprite.gif) 0 -1316px repeat-x;
}
Let us know if you need more information.
Sincerely yours,
Dimo
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Rank 1
Thanks for your reply. It helped me. I need some more help in this context. I want to see the hierarchical grid in an expanded form when the page loads. In the expanded form I want all the rows to have an alternating white and gray look so that the grid looks uniform (to remind you my details table has no headers and borders).
It looks somewhat like this: [MT: Master Table; DT: Details Table]
MT Row ------- (white)
DT Row ------ (Gray)
DT Row ------ (white)
DT Row ------ (Gray)
MT Row -------- (white)
DT Row ------ (Gray)
MT Row --------- (white)
and so on:
The number of rows in the detail table for a corresponding Master Table row depend on the number of records in the datasource.
Kind Regards,
Uday
You can expand all detail tables programmatically in the ItemCreated event handler.
protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
{
if (e.Item is GridNestedViewItem)
{
e.Item.Expanded = true;
}
}
Regards,
Dimo
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Rank 1
I have appended that line of code, but I dont have the details table expanded, when I view the page in browser. Please let me know if I need to do anything additional to this.
Thanks
Uday
Sorry for my prevous post, it was misleading. Actually, you need to set
HierarchyDefaultExpanded="true"
for the MasterTableView and all GridTableViews.
Greetings,
Dimo
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Rank 1
Thanks, it worked but how do i achieve the alternating white and gray rows in the expanded mode?
It looks somewhat like this: [MT: Master Table; DT: Details Table]
MT Row ------- (white)
DT Row ------ (Gray)
DT Row ------ (white)
DT Row ------ (Gray)
MT Row -------- (white)
DT Row ------ (Gray)
MT Row --------- (white)
and so on:
The number of rows in the detail table for a corresponding Master Table row depend on the number of records in the datasource.
Thanks and Regards,Uday
Well, take a look above at my post, which contains the following CSS rule:
.DetailRow .GridRow_Gray
{
background: #efefef ;
}
.DetailRow .GridAltRow_Gray
{
background: #fff ;
}
The post explains how to achieve alternating row background in expanded mode.
Kind regards,
Dimo
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.