Cascading Dropdown GridView In ASP.NET

Akshay Phadke
8y
7.5k
0
1

Article

Overview

Today, we will see how we can implement cascading dropdown grid view in C#. Before starting this article, let's have a fair amount of knowledge of a grid view control; i.e., how to bind grid view.

Introduction

Open Visual Studio -> Create New Project, as shown below:
Create a new Application and name it TestCascade,
We will be including bootstrap themes. Kindly download bootstrap from manage Nugets or you can download from the official website.
Kindly implement the styles which we have downloaded from the website.
Now, let's create two tables as Customer info and customerdetails.
Insert some data in the two tables, in order to show some data in a grid view.
After inserting, just see whether the data is entered properly or not and which fields are required to be shown.
Let's start with the designing page,
1. ASPX Page
2. Default.aspx
First add two images. Adjust the screen, using add and minus, to cascade the grid view.
Create a grid view first and now refe to the following screenshot:
Kindly add image. Add Image in <asp:Templatefield> to cascade dropdown of the grid view.
Bind the fields of the first table Customerinfo.
You have to bind another grid view.
Our final code will be:
Default.aspx
1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="TEstCascade._Default" %>
3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
5. <html xmlns="http://www.w3.org/1999/xhtml">
6. <head runat="server">
7. <title></title>
8. <link type="text/css" href="Styles/bootstrap.css" rel="Stylesheet" />
9. <link type="text/css" href="Styles/bootstrap.min.css" rel="Stylesheet" />
10. <link type="text/css" href="Styles/MenuTableTemplate.css" rel="Stylesheet"/>
11. <link type="text/css" href="Styles/sb-admin-2.css" rel="Stylesheet"/>
12. </head>
13. <body>
14. <form id="form1" runat="server">
15. <asp:GridView ID="gvParent" runat="server" AutoGenerateColumns="False"
16. Width="100%" OnRowDataBound="gvParent_RowDataBound" OnRowCommand="gvParent_RowCommand"
17. CssClass="table" Font-Size="11pt" Font-Names="Arial"
19. >
21. <Columns>
22. <asp:TemplateField>
23. <ItemTemplate>
24. <asp:ImageButton ID="btnImage" runat="server" ImageUrl="~/Images/add-button--thin-line--ios-7-interface-symbol_318-33624 (1).jpg" CommandName="expand" Height="20px" />
25. </ItemTemplate>
26. </asp:TemplateField>
27. <asp:BoundField DataField="CUSTOMERID" HeaderText="Customer ID"></asp:BoundField>
28. <asp:BoundField DataField="CUSTOMERNAME" HeaderText="Customer Name"></asp:BoundField>
29. <asp:BoundField DataField="CUSTOMERADDRESS" HeaderText="Address"></asp:BoundField>
30. <asp:BoundField DataField="CUSTOMERNUMBER" HeaderText="Number"></asp:BoundField>
31. <asp:TemplateField>
32. <ItemTemplate>
33. </td></tr>
34. <tr>
35. <td>
36. </td>
37. <td colspan="4">
38. <asp:GridView ID="gvChild" runat="server" Width="100%" Visible="False" AutoGenerateColumns="False"
39. DataSource='<%# GetChildRelation(Container.DataItem,"Relation") %>'
40. CssClass="table" Font-Size="11pt" Font-Names="Arial"
42. >
44. <Columns>
45. <asp:BoundField DataField="CUSTOMERPANID" HeaderText="Pan ID"></asp:BoundField>
46. <asp:BoundField DataField="CUSTOMERAADHARNO" HeaderText="Aadhar No"></asp:BoundField>
47. <asp:BoundField DataField="CUSTOMERBALANCE" HeaderText="Balance"></asp:BoundField>
49. </Columns>
52. </asp:GridView>
53. </td>
54. </tr>
55. </ItemTemplate>
56. </asp:TemplateField>
57. </Columns>
60. </asp:GridView>
61. </form>
62. </body>
63. </html>
CS Code

We need to combine both the grid views, and the grid views are parent and child. We need to bind the data of the tables of the parent and the child tables as customerinfo and customerdetails respectively .
We need to specify the grid view command on the row command, as well.
GETDATA() helps to map the selected query.
1. SELECT CUSTOMERID,CUSTOMERNAME,CUSTOMERADDRESS,CUSTOMERNUMBER FROM CUSTOMERINFO;SELECT CUSTOMERID,CUSTOMERPANID,CUSTOMERAADHARNO,CUSTOMERBALANCE FROM CUSTOMERDETAIL
Final CS Code
1. using System;
2. using System.Collections.Generic;
3. using System.Linq;
4. using System.Web;
5. using System.Web.UI;
6. using System.Web.UI.WebControls;
7. using System.Data;
8. using System.Data.SqlClient;
10. namespace TEstCascade
11. {
12. public partial class _Default : System.Web.UI.Page
13. {
16. protected void Page_Load(object sender, EventArgs e)
17. {
19. if (!IsPostBack)
20. {
21. DataSet ds = new DataSet();
22. ds = GetData();
23. ds.Tables[0].TableName = "Parent";
24. ds.Tables[1].TableName = "Child";
25. DataRelation dr = new DataRelation("Relation", ds.Tables["Parent"].Columns["CUSTOMERID"], ds.Tables["Child"].Columns["CUSTOMERID"], false);
26. dr.Nested = true;
27. ds.Relations.Add(dr);
28. gvParent.DataSource = ds;
29. gvParent.DataMember = "Parent";
30. gvParent.DataBind();
31. }
32. }
33. // Define the ForeignKey relationship among the records retrieved
34. protected DataView GetChildRelation(object pDataItem, string pRelation)
35. {
36. DataRowView pvoDataRowView;
37. pvoDataRowView = (DataRowView)pDataItem;
38. if (pvoDataRowView != null)
39. return pvoDataRowView.CreateChildView(pRelation);
40. else
41. return null;
42. }
43. // Check whether comment fired is for Expand or Collapse(Hide/Show detail record)
44. protected void gvParent_RowCommand(object sender, GridViewCommandEventArgs e)
45. {
46. if (e.CommandName == "expand")
47. {
48. int pviIndex;
49. pviIndex = Convert.ToInt16(e.CommandArgument.ToString());
50. ImageButton btn = new ImageButton();
51. btn = (ImageButton)gvParent.Rows[pviIndex].FindControl("btnImage");
52. if (btn.ImageUrl.ToLower().Contains("add-button--thin-line--ios-7-interface-symbol_318-33624 (1).jpg"))
53. {
54. btn.ImageUrl = "Images/plainicon.com-43942-128px.png";
55. ((GridView)gvParent.Rows[pviIndex].FindControl("gvChild")).Visible = true;
56. }
57. else
58. {
59. btn.ImageUrl = "Images/add-button--thin-line--ios-7-interface-symbol_318-33624 (1).jpg";
60. ((GridView)gvParent.Rows[pviIndex].FindControl("gvChild")).Visible = false;
61. }
62. }
63. }
64. // Get Invoice No whose detail has to be shown.
65. protected void gvParent_RowDataBound(object sender, GridViewRowEventArgs e)
66. {
67. if (e.Row.RowType == DataControlRowType.DataRow)
68. {
69. ImageButton btn = new ImageButton();
70. btn = (ImageButton)e.Row.Cells[0].FindControl("btnImage");
71. btn.CommandArgument = e.Row.RowIndex.ToString();
72. }
73. }
75. //ADO.NET code to retrieve the Header and Detail records from Source tables.
76. private DataSet GetData()
77. {
78. SqlConnection con = new SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString);
79. DataSet ds = new DataSet();
80. // SqlConnection con = new SqlConnection(ConnectionString);
81. con.Open();
82. SqlCommand cmd = new SqlCommand();
83. cmd.Connection = con;
84. cmd.CommandText = "SELECT CUSTOMERID,CUSTOMERNAME,CUSTOMERADDRESS,CUSTOMERNUMBER FROM CUSTOMERINFO;SELECT CUSTOMERID,CUSTOMERPANID,CUSTOMERAADHARNO,CUSTOMERBALANCE FROM CUSTOMERDETAIL";
85. cmd.CommandType = CommandType.Text;
86. SqlDataAdapter da = new SqlDataAdapter(cmd);
87. da.Fill(ds);
88. con.Close();
89. return ds;
90. }
91. public string ConnectionString { get; set; }
92. }
93. }
Run the solution now.
Let's check the dataset of the first table.
Table no 2,
Now, let's see the parent child table.
The view of the parent table is as follows:
The view of the child table is as follows:
Now, let's see our final output.
Click add image.
Now, since you had cascaded the grid view, add the image you changed to the minus image button, and you can see the respective details as well.
Now, click minus to check if everything works properly or not.
The output shown below is perfect.