Nazar's Tech Blog | Special GridView

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>

Hi,
this looks really good and is almost exactly what I have been looking for, but I have a question.

The sample here - www.asp.net/.../Accordion.aspx - says that "The Accordion is a web control that allows you to provide multiple panes and display them one at a time. It is like having several CollapsiblePanels where only one can be expanded at a time." However, in your example more than one can be expanded at a time. Am I missing some simple setting, maybe?

Thanks,
Brian

There is an option in accordion where in you can have more than one window open. Its kinda a hack. The requiredOpenedPane=false makes all the panes to open up.

Hope this solves your issue

hi, how doin ??? ive seen this sample, its so great especially when u group by Category. i have the same case, i work with gridview, but i have a problem, can i have ur email to send u an excel file explainning wat i would like to do ??
tnx

Hi Nazar,
I'm trying to put an insert row functionality in the footer of the inside gridview2 and struggling to find the controls on the next group or pane. In this case, I was able to get the controls(textbox values) in the footer under "Beverages" but not in the "Condiments" and so on. I'm guesing, I need to find the selectedindex of what control?

Please help and need to fix this?

Best Regards,
Edcon

Yassine: Sorry for responding late. Haven't checked my blog for couple of months. Anyways you can email me at nazar@narizvi.com.

Edcon:
For your question, yes it would not be possible to achieve this insert feature so easily.
Reason: We are dividing each row in the gridview into another gridview. And in that case we can not have a proper insert.

Option: What we can try doing is, For each row have a unique idenifier and for the insert link in the footer call this particular unique identifier and then insert it. Do inform me if i am not clear. I will write down the code and email it to you.

Nazar,
I am using your example and it is fantastic. I have one problem. How do I reference GridView2 in my codebehind using FindControl? Do I start with the page, GridView1 or the accordion control. I've tried everything... please help.
Thanks!

Special GridView

Comments (6) -

Pingbacks and trackbacks (1)+

Month List