Visual Studio .NET - Gridview within a gridview

Asked By koti rao on 26-Sep-08 09:45 AM

hi all,

I want to put a gridview within a gridview.

Plz help me in this regard how can i forward?

Thanks,

Koti.

solution : Nested Gridview

Perry replied to koti rao on 26-Sep-08 11:17 AM

The Outer GridView

To create the first (outer) grid, insert a GridView control and specify the data source (Access Database in our example). Select the columns you want to show. I selected carmaker_id and carmaker_name but the second would suffice; you have to select the primary key though, if you want to allow for update and delete operations. Name the GridView gvCars. You should already have the columns you selected as BoundFields, (select "Edit Columns"). Configure the column and set the header to "Car Maker". Up until now there was no coding required.

The Nested GridView

Because the database has two tables with a one-to-many relationship, we naturally want to show the data accordingly. This can be achieved by inserting a second GridView inside the outer one.

Using the GridView's smart tag, add a new column to the first grid and set its type to "TemplateField". Then, again using the smart tag, select "Edit Templates" to edit the item template you just created. Insert a new GridView control into it and name it gvModels. Set the "Show header" property of this grid to False so that you don't get repeated headers in every row of the outer grid. Exit the template editing by selecting "End template editing" in the smart tag.

Unfortunately there is no way of visually binding both GridViews, even in a simple one-to-many relationship. However, it is straightforward to do it through code. Start by creating an event handler for the RowDataBound event of the first GridView (gvCars). All you have to do is type a function name (I named it gvCars_rowDataBound) in the Properties window (select the lightning bolt to see the events). Visual Studio automatically creates the event handler at the Default.aspx.cs file.

Now all you have to do is associate the data you want to show in the inner grid for each row of the outer grid, like this:

    protected void gvCars_rowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            GridView gv =
             (GridView)e.Row.FindControl("gvModels");
            AccessDataSource asd = new AccessDataSource(@"App_Data\SkinSample.mdb", 
"SELECT carmodel_name,carmodel_engine,carmodel_color FROM carmodel 
WHERE carmaker_id=" + ((DataRowView)e.Row.DataItem)["carmaker_id"].ToString());
            gv.DataSource = asd;
            gv.AutoGenerateColumns = false;
            BoundField bfModelName = new BoundField();
            bfModelName.DataField = "carmodel_name";
            BoundField bfEngine = new BoundField();
            bfEngine.DataField = "carmodel_engine";
            BoundField bfColor = new BoundField();
            bfColor.DataField = "carmodel_color";
            gv.Columns.Add(bfModelName);
            gv.Columns.Add(bfEngine);
            gv.Columns.Add(bfColor);
            gv.DataBind();
        }
    }
see http://www.codeproject.com/KB/aspnet/SkinSample.aspx for details.
-Paresh

using templets

Perry replied to koti rao on 26-Sep-08 11:19 AM

1. First drop a gridview in to the page, also set its DataKeyNames to your primary key

2. Add a new template column to this gridview.

3. Place another gridview inside this template column.

the code for the termplate column may look like this

<asp:TemplateField HeaderText=”Heading”>
<EditItemTemplate>
<asp:TextBox ID=”TextBox3″ runat=”server”></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:GridView ID=”GridView1″ runat=”server” DataSource=’<%# GetTrasnl(Convert.ToInt32(Eval(”pId”))) %>’ AutoGenerateColumns=”False” CellPadding=”4″ ForeColor=”Black” GridLines=”Vertical” BackColor=”White” BorderColor=”#DEDFDE” BorderStyle=”None” BorderWidth=”1px”>
<FooterStyle BackColor=”#CCCC99″ />
<Columns>
<asp:BoundField DataField=”language” HeaderText=”Language” />
<asp:BoundField DataField=”uName” HeaderText=”Translator” />
</Columns>
<RowStyle BackColor=”#F7F7DE” />
<SelectedRowStyle BackColor=”#CE5D5A” Font-Bold=”True” ForeColor=”White” />
<PagerStyle BackColor=”#F7F7DE” ForeColor=”Black” HorizontalAlign=”Right” />
<HeaderStyle BackColor=”#6B696B” Font-Bold=”True” ForeColor=”White” />
<AlternatingRowStyle BackColor=”White” />
</asp:GridView>
</ItemTemplate>
</asp:TemplateField>

This child gridview has to show the content based on the primary of the row thats binded to main gridview. see http://programmers.wordpress.com/2006/07/26/nested-gridview-to-show-masterdetails-relationship-in-aspnet-20/ for details.

using master view

Perry replied to koti rao on 26-Sep-08 11:22 AM

The best way to walk through the presentation is to list each step with a brief explanation. Even if you are unfamiliar with GridView, smart tags, or UserControls, the detailed steps should walk you through the process:

1. Create a new Web page (or use an existing one in your project).
2. Add a GridView to that page. If the GridView is part of a whole page, explore Master pages as a way to get consistent looking pages. DataList and Repeater controls work here too.
3. Define bound columns for every element of data in your master object. (I use custom objects more often than not because I like the greater control afforded by custom controls, and I don't need to drag ADO.NET into my presentation layer.)
4. Convert one or more bound columns into a template column by clicking on the smart tag at the top-left corner of the GridView, selecting Edit columns from the smart menu, selecting the field to convert, and clicking the self-explanatory link for converting a bound column to a template column (see Figure 2).
5. Close the Fields dialog.
6. Add a UserControl to your project.
7. Click the Smart tag on the GridView again and select Edit Templates.
8. Drag and drop the UserControl from the solution explorer to the ItemTemplate, remove the existing Label and TextBox, and click Edit UserControl from the Smart tag menu (see Figure 3).
9.Add a second GridView to the UserControl and you have the basic design.

refer http://www.codeguru.com/columns/vb/article.php/c12647 for details.

-Paresh

Gridview inside Gridview
Shailendrasinh Parmar replied to koti rao on 27-Sep-08 12:34 AM

See the following article for Gridiview inside a Gridview

http://www.codeproject.com/KB/webforms/GridViewInsideGridView.aspx

Hope it helps.


Nested Gridview
Shailendrasinh Parmar replied to koti rao on 27-Sep-08 12:35 AM

See this article for Nested Gridview control in asp.net

http://www.codeguru.com/columns/vb/article.php/c12647

Hope it helps.

Nested Gridview With Skins
Shailendrasinh Parmar replied to koti rao on 27-Sep-08 12:37 AM

See the following article for Nested GridViews with Skins in ASP.NET with C#.net

http://www.codeproject.com/useritems/SkinSample.asp

Hope it helps.

Gridview within a Gridview C# Asp.net
Shailendrasinh Parmar replied to koti rao on 27-Sep-08 01:30 AM

See this article for Nested Gridview control in asp.net with C# Code.

http://programming.top54u.com/post/Understanding-the-ASP-Net-Nested-Gridview-C-sharp-Code.aspx

Hope it helps.

gv
kalyani kankatala replied to koti rao on 19-Jan-09 01:40 PM
end of post