DotnetSlackers Code-Snippet

ASP.NET Hosting
MaximumASP
Packet Sniffer
Home Loan
UK conference call

Nested GridView

Published: 30 Jul 2008 By Gopi Subhash

This article explains how to make an ASP.NET Editable Nested GridView. Here I am going to explain how to provide all the features of Edit/Add/Delete/Update/Page/Sort of a GridView, and not only one GridView, but I am going to explain how to extend these features to even nested grids (GridView inside GridView). I have provided the fully functional source code, which is self-explanatory.

Using the Code
This is a web application with a virtual directory named EditNestedGridView. You may create the same virtual directory to run this application with Visual Studio .NET 2005 or create any other virtual directory and map the path to this directory to access it from the browser. As I have used Access 2003 as my database, you need to have Microsoft Access installed on your machine. I have used NorthWind database with some modifications. I have included this also in the code bundle under the App_Data folder. I have used C# for codebehind files. In Visual Studio 2005, File --> Open --> Web Site and navigate to the folder EditNestedGridView.

Step-by-Step Procedure 
The code attached is self-explanatory, but will try to explain as much as possible.

1. Since here I am going to use the DataSource control, let's first create a Access DataSource control as mentioned below.

<asp:AccessDataSource ID="AccessDataSource1" runat="server" 
    DataFile="App_Data/Northwind.mdb" 
    SelectCommand="SELECT [Customers].[CustomerID], 
    [Customers].[CompanyName],[Customers].[ContactName],
    [Customers].[ContactTitle],[Customers].[Address] FROM [Customers] 
    ORDER BY [Customers].[CustomerID]"></asp:AccessDataSource>
The main advantage of the DataSource control is that it simplifies the amount of custom code that needs to be written to retrieve and bind data, and even to sort, page through or edit data.

2. Now let's create a simple GridView control and attach the previously created DataSource control as below.

<asp:GridView ID="GridView1" AllowPaging="True" BackColor="#f1f1f1" 
            AutoGenerateColumns=false DataSourceID="AccessDataSource1" 
            DataKeyNames="CustomerID"
            style="Z-INDEX: 101; LEFT: 8px; POSITION: absolute; TOP: 32px" 
            ShowFooter=true Font-Size=Small
            Font-Names="Verdana" runat="server" GridLines=None BorderStyle=Outset>
GridView is very similar to DataGrid and it has all those column features of DataGrid like TemplateColumn, BoundColumn to populate data as columns. EditItemTemplate and FooterTemplate can be used for editing and adding purpose. Following code shows the columns of parent Grid.

Collapse
<asp:TemplateField HeaderText="Customer ID" SortExpression="CustomerID">
    <ItemTemplate>
        <asp:Label ID="lblCustomerID" Text='<%# Eval("CustomerID") %>' 
            runat="server"></asp:Label>
    </ItemTemplate>
    <EditItemTemplate>
        <asp:Label ID="lblCustomerID" Text='<%# Eval("CustomerID") %>' 
            runat="server"></asp:Label>
    </EditItemTemplate>
    <FooterTemplate>
        <asp:TextBox ID="txtCustomerID" Text='' runat="server"></asp:TextBox>
    </FooterTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Company Name" SortExpression="CompanyName">
    <ItemTemplate><%# Eval("CompanyName") %></ItemTemplate>
    <EditItemTemplate>
        <asp:TextBox ID="txtCompanyName" Text='<%# Eval("CompanyName") %>' 
            runat="server"></asp:TextBox>
    </EditItemTemplate>
    <FooterTemplate>
        <asp:TextBox ID="txtCompanyName" Text='' runat="server"></asp:TextBox>
    </FooterTemplate>
</asp:TemplateField>
..........................
..........................

<asp:CommandField HeaderText="Edit" ShowEditButton="True" />
<asp:TemplateField HeaderText="Delete">
    <ItemTemplate>
        <asp:LinkButton ID="linkDeleteCust" CommandName="Delete" 
            runat="server">Delete</asp:LinkButton>
    </ItemTemplate>
    <FooterTemplate>
        <asp:LinkButton ID="linkAddCust" CommandName="AddCustomer" 
            runat="server">Add</asp:LinkButton>
    </FooterTemplate>
</asp:TemplateField>
Now that we have all the columns in place, we need the event handlers to take care of Add/Edit/Delete actions. Handling these events is very straightforward compared to DataGrid. The DataSource control takes care of the Paging and Sorting actions. Here is the final pare

Please login to leave a comment.

Login

Lost Password?

Navigation

Our Projects

Email Service

News Archive

Subscribe

Product Spotlight

Looking for a Job?

Hosting

Nested GridView