asked on

GridView does not show + for expanding

I am using a GridView, which is bound to a dataset. The dataset contains two tables, I use two command objects to fill the same dataset.
I do see the rows of the parent table bound to the GriDView, but I was expecting a + sign to expand and view the child table.

The asp 2.0 GridView has no feature of Allow Navigation

DataSet ds = new DataSet();

dataadapter.Fill(ds,”Deal”); // Fill the dataset with Deal data

dataadapter.Fill(ds,”Facility”); // Next fill the dataset with Facility
DataColumn parent = ds.Tables["Deal"].Columns["OrderID"]; // add the key column name from the parent table
DataColumn child = ds.Tables["Facility"].Columns["FK_OrderID"]; // add the foreign key column from child table
DataRelation cr = new DataRelation("Dealrelation", parent, child, false); // create a relationship between parent/ child
ds.Relations.Add(cr);
ds.AcceptChanges ();

kraffay

You can't do this with the basic gridview -- it will not handle the master-child behavior without customization. However, this has been done already. You can get the code at http://www.codeproject.com/aspnet/extgridview.asp.

prajapati84

There is no navigation facility inside a gridview. U need to put a image or imagebutton with expanded sign inside gridview. On its click event u can bind the child records.

<asp:GridView ID="gvwExploreEpisodes" runat="server" >
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:Image ID="imgExpanded" runat="server" ImageUrl="~/Images/Expanded.gif" />
</ItemTemplate>
...
...

Regards,
Mukesh

countrymeister

ASKER

Kraffay,

I reviewed the code in the link provided and coded my own GridView with an itemptemplate holding another gridview for the child records.
I am able to expand the individual parent rows and display the child rows.

I do have one problem, currently the child rows display next to the parent row, how can I display them below the child row?
Thanks
H

<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="dgView" runat="server" style="margin-left:30px;" DataKeyNames="CONFIRM_UUID" EnableViewState="true" CssClass="align: top" RowStyle-Font-Size="XX-Small" Font-Size="XX-Small"
AllowPaging="True" AutoGenerateColumns="False"
GridLines="None" OnRowCommand="dg_RowCommand" >
<EmptyDataTemplate>
<asp:Label ID="Label1" runat="server" Height="10" > There are no records found for the selected search criteria.
</asp:Label>
</EmptyDataTemplate>
<Columns>
<asp:TemplateField HeaderText= "Activity" ShowHeader="False">
<HeaderStyle BackColor="BlanchedAlmond" />
<ItemTemplate>
<asp:ImageButton ID="imgActivity" runat="server" ImageUrl="~/Images/expand.gif"
CommandName="ExpCont" OnClick="imgActivity_Click" CommandArgument='<%#DataBinder.Eval(Container.DataItem,"CONFIRM_UUID") %>'/>
</ItemTemplate>
<ItemStyle Width="65px" />
</asp:TemplateField>
<asp:TemplateField Visible ="false" >
<HeaderTemplate>
<input id="chkAll" onclick="javascript:CheckAll(this);" runat="server" type="checkbox" />
</HeaderTemplate>
<ItemStyle Width="25px" />
<HeaderStyle BackColor="BlanchedAlmond" />
<ItemTemplate>
<asp:CheckBox ID="chkStatus" Checked='<%#Convert.ToBoolean(DataBinder.Eval(Container.DataItem, "CHECKED_STATUS"))%>'
Visible='<%#Convert.ToBoolean(DataBinder.Eval(Container.DataItem, "ENABLED_STATUS"))%>'
Enabled="true" Font-Bold="true" runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="CONFIRM_TRADE_ID" HeaderText="Trade ID" >
<ItemStyle Width="50px" />
<HeaderStyle BackColor="BlanchedAlmond" ForeColor="Black" />
</asp:BoundField>
<asp:BoundField DataField="CONFIRM_TRADE_DATE" DataFormatString="{0:dd-MMM-yyyy}" HtmlEncode="false" HeaderText="Trade Date" SortExpression="CONFIRM_TRADE_DATE">
<ItemStyle Width="75px" />
<HeaderStyle BackColor="BlanchedAlmond" ForeColor="Black" />
</asp:BoundField>
<asp:BoundField DataField="CONFIRM_UUID" HeaderText="Confirm ID" Visible="False" >
<HeaderStyle BackColor="BlanchedAlmond" />
</asp:BoundField>
<asp:BoundField DataField="CONFIRM_CLIENT_NAME" HeaderText="Client" SortExpression="CONFIRM_CLIENT_NAME">
<ItemStyle Width="300px" />
<HeaderStyle BackColor="BlanchedAlmond" ForeColor="Black" />
</asp:BoundField>
<asp:BoundField DataField="CONFIRM_SUBTYPE" HeaderText="Sub Type">
<ItemStyle Width="70px" />
<HeaderStyle BackColor="BlanchedAlmond" />
</asp:BoundField>
<asp:TemplateField HeaderText= "Confirm Status" ShowHeader="False">
<HeaderStyle BackColor="BlanchedAlmond" />
<ItemTemplate>
<asp:Label ID="lblStatus" runat="server" Width="5" Text='<%#DataBinder.Eval(Container.DataItem,"CONFIRM_STATUS") %>' />
</ItemTemplate>
<ItemStyle Width="65px" />
</asp:TemplateField>
<asp:BoundField DataField="CONFIRM_STATUS" HeaderText="Confirm Status" Visible="False" >
<HeaderStyle BackColor="BlanchedAlmond" />
</asp:BoundField>
<asp:BoundField DataField="CONFIRM_TRADE_STATUS" HeaderText="Trade Status" SortExpression="CONFIRM_TRADE_STATUS">
<ItemStyle Width="50px" />
<HeaderStyle BackColor="BlanchedAlmond" ForeColor="Black"/>
</asp:BoundField>
<asp:BoundField DataField="DELIVERY_STATUS" HeaderText="Delivery Status" Visible="True">
<ItemStyle Width="60px" />
<HeaderStyle BackColor="BlanchedAlmond" ForeColor="Black" />
</asp:BoundField>
<asp:BoundField DataField="CONFIRM_LAST_MODIFIED" DataFormatString="{0:dd-MMM-yyyy HH:mm:ss}" HtmlEncode="false" HeaderText="Last Modified" SortExpression="CONFIRM_LAST_MODIFIED">
<ItemStyle Width="135px" />
<HeaderStyle BackColor="BlanchedAlmond" />
</asp:BoundField>
<asp:BoundField DataField="CONFIRM_UPDATE_TS" HeaderText="Date/Time Sent" Visible="False" >
<HeaderStyle BackColor="BlanchedAlmond" />
</asp:BoundField>
<asp:TemplateField HeaderText= "Release" Visible="False" ShowHeader="False">
<HeaderStyle BackColor="BlanchedAlmond" />
<ItemTemplate>
<asp:ImageButton ID="btnRelease" runat="server" Enabled='<%#Convert.ToBoolean(DataBinder.Eval(Container.DataItem, "ENABLED_STATUS"))%>' Visible='<%#Convert.ToBoolean(DataBinder.Eval(Container.DataItem, "CHECKED_STATUS"))%>' ImageUrl="~/images/toolbar11.gif" CommandName="Release" ToolTip="Release"
CommandArgument='<%#DataBinder.Eval(Container.DataItem,"CONFIRM_UUID") %>'
AlternateText="Release" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText= "Preview" ShowHeader="False">
<ItemStyle Width="25px" />
<HeaderStyle BackColor="BlanchedAlmond" />
<ItemTemplate>
<asp:ImageButton ID="btnPreview" runat="server" ImageUrl= "images/preview.GIF" CommandName="Preview" AlternateText="Preview" ToolTip="Preview" CommandArgument='<%#DataBinder.Eval(Container.DataItem,"CONFIRM_UUID")%>'
/>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField >
<HeaderStyle BackColor="BlanchedAlmond" />
<ItemTemplate>
<asp:HyperLink ID="HyperLink1" runat="server" CssClass="textDataGridSmall" Text="Detail" NavigateUrl='<%# "ConfirmationActivity.aspx?UUID=" + DataBinder.Eval(Container.DataItem,"CONFIRM_UUID") + "&ID=" + DataBinder.Eval(Container.DataItem,"CONFIRM_TRADE_ID") %>'>
</asp:HyperLink>
</ItemTemplate>
</asp:TemplateField>

<asp:BoundField DataField="CONFIRM_LOCATION" Visible="False"/>
<asp:BoundField DataField="CONFIRM_DIVISION" Visible="False"/>
<asp:BoundField DataField="CONFIRM_DESK_NAME" Visible="False"/>
<asp:BoundField DataField="CONFIRM_PRODUCT" Visible="False"/>
<asp:BoundField DataField="CHECKED_STATUS" HeaderText="Confirm ID" Visible="False">
<HeaderStyle BackColor="BlanchedAlmond" ForeColor="Black" />
</asp:BoundField>
<asp:BoundField DataField="ENABLED_STATUS" HeaderText="Confirm ID" Visible="False">
<HeaderStyle BackColor="BlanchedAlmond" ForeColor="Black" />
</asp:BoundField>
<asp:TemplateField>
<ItemTemplate>
<asp:GridView ID="dgActivity" runat="server" BorderWidth="1px" EmptyDataRowStyle-Wrap="true" RowStyle-Wrap="true" RowStyle-Width="200px" style="margin-left: 30px;" Visible="false" DataKeyNames="ACT_REFID" EnableViewState="true"
CssClass="align: bottom" RowStyle-Font-Size="XX-Small" Font-Size="XX-Small"
AutoGenerateColumns="False" AlternatingRowStyle-BackColor="White"
GridLines="Horizontal">
<EmptyDataTemplate>
<asp:Label ID="lblNoRecords" runat="server"> There are no records found for the selected search criteria.
</asp:Label>
</EmptyDataTemplate>
<EmptyDataRowStyle Height="5" BackColor="LightSteelBlue" />
<Columns>
<asp:BoundField DataField="ACT_REFID" HeaderText="UUID" Visible="False" >
<HeaderStyle BackColor="LightSteelBlue" />
</asp:BoundField>
<asp:BoundField DataField="ACT_UUID" HeaderText="UUID" Visible="False" >
<HeaderStyle BackColor="LightSteelBlue" />
</asp:BoundField>
<asp:BoundField DataField="ACT_FROM_ADDR" HeaderText="From" >
<HeaderStyle BackColor="LightSteelBlue" ForeColor="Black" />
</asp:BoundField>
<asp:BoundField DataField="ACT_RECIPIENT" HeaderText="Recepient" >
<HeaderStyle BackColor="LightSteelBlue" ForeColor="Black" />
</asp:BoundField>
<asp:BoundField DataField="ACT_STATUS_CODE" HeaderText="Status" >
<ControlStyle Width="100px" />
<HeaderStyle BackColor="LightSteelBlue" ForeColor="Black" />
</asp:BoundField>
<asp:BoundField DataField="ACT_SUBJECT" HeaderText="Subject" Visible="false" >
<ControlStyle Width="100px" />
<HeaderStyle BackColor="LightSteelBlue" ForeColor="Black" />
</asp:BoundField>
<asp:BoundField DataField="ACT_TRANSPORT" HeaderText="Transport">
<HeaderStyle BackColor="LightSteelBlue" />
</asp:BoundField>
<asp:BoundField DataField="ACT_FORMAT" HeaderText="Format">
<HeaderStyle BackColor="LightSteelBlue" />
</asp:BoundField>
<asp:BoundField DataField="ACT_SENT_TIME" HeaderText="Sent" ItemStyle-Width="100" >
<ControlStyle Width="100" />
<HeaderStyle BackColor="LightSteelBlue" />
</asp:BoundField>
<asp:BoundField DataField="ACT_LOG_MSG" HeaderText="Log" ItemStyle-Width="100">
<ControlStyle Width="200" />
<HeaderStyle BackColor="LightSteelBlue" />
</asp:BoundField>
<asp:TemplateField HeaderText= "Review" ShowHeader="False">
<HeaderStyle BackColor="LightSteelBlue" />
<ItemTemplate>
<asp:ImageButton ID="btnReview" runat="server" ImageUrl= "images/preview.GIF" CommandName="Review" AlternateText="Review" ToolTip="Review" CommandArgument='<%#DataBinder.Eval(Container.DataItem,"ACT_REFID")%>'
/>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText= "Resend" ShowHeader="False">
<HeaderStyle BackColor="LightSteelBlue" />
<ItemTemplate>
<asp:ImageButton ID="btnResend" runat="server" ImageUrl= "images/save.GIF" CommandName="Resend" AlternateText="Resend" ToolTip="Resend" CommandArgument='<%#DataBinder.Eval(Container.DataItem,"ACT_REFID")%>'
/>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText= "Forward" ShowHeader="False">
<HeaderStyle BackColor="LightSteelBlue" />
<ItemTemplate>
<asp:ImageButton ID="btnForward" runat="server" ImageUrl= "images/forward.gif" CommandName="Forward" AlternateText="Forward" ToolTip="Forward" CommandArgument='<%#DataBinder.Eval(Container.DataItem,"ACT_REFID")%>'
/>
</ItemTemplate>
</asp:TemplateField>

<asp:BoundField DataField="ACT_REFID" Visible="False"/>
<asp:BoundField DataField="CHECKED_STATUS" HeaderText="Checked" Visible="false">
<HeaderStyle BackColor="LightSteelBlue" ForeColor="Black" />
</asp:BoundField>
</Columns>
<AlternatingRowStyle BackColor="#E7E7FF" />
<RowStyle Font-Size="X-Small" Height="2px" VerticalAlign="Top" />

</asp:GridView>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<AlternatingRowStyle BackColor="Bisque" Height="5px" />
<RowStyle Font-Size="X-Small" Height="2px" VerticalAlign="Top" />

</asp:GridView>
<asp:TextBox ID="txtFrom" runat="server"></asp:TextBox>
<asp:TextBox ID="txtTo" runat="server"></asp:TextBox></div>
</form>

kraffay

Try inserting a <tr> in your child ItemTemplate:

<ItemTemplate>
<tr>
<td>
<asp:GridView ID="dgActivity" runat="server" BorderWidth="1px" EmptyDataRowStyle-Wrap="true" RowStyle-Wrap="true" RowStyle-Width="200px" style="margin-left: 30px;" Visible="false" DataKeyNames="ACT_REFID" EnableViewState="true"
CssClass="align: bottom" RowStyle-Font-Size="XX-Small" Font-Size="XX-Small"
AutoGenerateColumns="False" AlternatingRowStyle-BackColor="White"
GridLines="Horizontal">

....
</td>
</tr>

countrymeister

ASKER

Kraffay,

it did put the child rows below, but it expands the first parent column to accomodate the child row
Can the parent rows have their columns size intact, when the child rows are displayed below.

Whe i did add the tr and td to the Item template the with of the first column of the parent is expanded and the child rows are displayed under that width size
Thanks

kraffay

I am using the ExtendedGrid, and this markup renders a grid under my parent row:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ExtGrid.aspx.cs" Inherits="TimeTracker_ExtGrid" %>

<%@ Register Namespace="CustomControls" TagPrefix="cc" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<cc:ExtGridView
runat="server"
EnableViewState="False"
ID="grdProjects"
AutoGenerateColumns="False"
OnPageIndexChanging="grdProjects_PageIndexChanging"
ExpandButtonCssClass="GridExpandCollapseButton"
CollapseButtonCssClass="GridExpandCollapseButton"
ExpandButtonText="+"
CollapseButtonText="-"
GridLines="None"
CellPadding="3"
ForeColor="#333333"
AllowPaging="True"
PageSize="5">
<Columns>
<asp:BoundField DataField="ProjectID" HeaderText="ProjectID" />
<asp:BoundField DataField="ProjectName" HeaderText="ProjectName" />
<asp:BoundField DataField="ProjectDescription" HeaderText="ProjectDescription" />
<asp:TemplateField>
<itemtemplate>
<cc:ExtGridView
runat="server" ID="grdProjectCategories"
AutoGenerateColumns="False"
ExpandButtonText="<img src='Images/expand.gif' alt='+' border='0' />"
CollapseButtonText="<img src='Images/collapse.gif' alt='-' border='0' />"
style="margin-left:30px;"
CellPadding="4"
ForeColor="#333333"
GridLines="None">
<Columns>
<asp:BoundField DataField="CategoryName" HeaderText="CategoryName" />
<asp:BoundField DataField="CategoryName" HeaderText="CategoryName" />
</Columns>
</cc:ExtGridView>
</itemtemplate>
</asp:TemplateField>
</Columns>
<RowStyle BackColor="#EFF3FB" />
<AlternatingRowStyle BackColor="White" />
<FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Left" />
<SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
<HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<EditRowStyle BackColor="#2461BF" />
</cc:ExtGridView>
</div>
</form>
</body>
</html>

countrymeister

ASKER

Our company bought a third party software called NetAdvantage for Infragistics.

I can do all the hierarchial grids now.

kraffay

good call

ASKER CERTIFIED SOLUTION

Computer101

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial