I have been going through the ASP.net forums and many people have had issues with GridViews especially the situation where the user wants to group each row by a particular condition.
There are controls available in the market which solve the issue (only sad part is we need to buy them).
I have used up 2 GridViews and AJAX Control Toolkit's accordion to achieve the required result. I have not done any back-end code, so this enables even a novice developer to create this page. Also I am using the NorthWind database provided by Microsoft.
Working Link
Download the source-code
Screenshot:
Code:
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="CategoryID"
DataSourceID="getCategories">
<Columns>
<asp:TemplateField HeaderText="CategoryName" SortExpression="CategoryName">
<ItemTemplate>
<asp:Label Visible="false" ID="labelCategoryID" runat="server" Text='<%# Bind("CategoryID") %>'></asp:Label>
<cc1:Accordion ID="MyAccordion" runat="server" SelectedIndex="-1" HeaderCssClass="accordionHeader"
ContentCssClass="accordionContent" FadeTransitions="true" FramesPerSecond="30"
TransitionDuration="250" Width="500px" AutoSize="None" RequireOpenedPane="false"
SuppressHeaderPostbacks="true">
<Panes>
<cc1:AccordionPane ID="pane1" runat="server">
<Header>
<asp:DataList ID="DataList2" runat="server" DataSourceID="getNamefromID">
<ItemTemplate>
<asp:HyperLink NavigateUrl="~/Default.aspx" runat="server" Text='<%# Eval("CategoryName") %>'></asp:HyperLink>
</ItemTemplate>
</asp:DataList>
</Header>
<Content>
<asp:GridView CellPadding="4" ForeColor="#333333" GridLines="None" ID="GridView2"
runat="server" AutoGenerateColumns="False" DataKeyNames="ProductID" DataSourceID="getProducts">
<FooterStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />
<RowStyle BackColor="#E3EAEB" />
<PagerStyle BackColor="#666666" ForeColor="White" HorizontalAlign="Center" />
<SelectedRowStyle BackColor="#C5BBAF" Font-Bold="True" ForeColor="#333333" />
<HeaderStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />
<EditRowStyle BackColor="#7C6F57" />
<AlternatingRowStyle BackColor="White" />
<Columns>
<asp:BoundField DataField="ProductID" HeaderText="ProductID" InsertVisible="False"
ReadOnly="True" SortExpression="ProductID" />
<asp:BoundField DataField="ProductName" HeaderText="ProductName" SortExpression="ProductName" />
<asp:BoundField DataField="SupplierID" HeaderText="SupplierID" SortExpression="SupplierID" />
<asp:BoundField DataField="QuantityPerUnit" HeaderText="QuantityPerUnit" SortExpression="QuantityPerUnit" />
</Columns>
</asp:GridView>
</Content>
</cc1:AccordionPane>
</Panes>
</cc1:Accordion>
<asp:AccessDataSource ID="getNamefromID" runat="server" DataFile="~/App_Data/Nwind.mdb"
SelectCommand="SELECT [CategoryName],[CategoryID] FROM [Categories] WHERE ([CategoryID] = ?)">
<SelectParameters>
<asp:ControlParameter ControlID="labelCategoryID" Name="CategoryID" PropertyName="Text"
Type="Int32" />
</SelectParameters>
</asp:AccessDataSource>
<asp:AccessDataSource ID="getProducts" runat="server" DataFile="~/App_Data/Nwind.mdb"
SelectCommand="SELECT [ProductID], [ProductName], [SupplierID], [QuantityPerUnit] FROM [Products] WHERE ([CategoryID] = ?)">
<SelectParameters>
<asp:ControlParameter ControlID="labelCategoryID" Name="CategoryID" PropertyName="Text"
Type="Int32" />
</SelectParameters>
</asp:AccessDataSource>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<asp:AccessDataSource ID="getCategories" runat="server" DataFile="~/App_Data/Nwind.mdb"
SelectCommand="SELECT [CategoryName], [CategoryID] FROM [Categories]"></asp:AccessDataSource>