Post
Ask Question

Cascading Dropdown GridView In ASP.NET

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:

    New

  • Create a new Application and name it TestCascade,

    Application

  • We will be including bootstrap themes. Kindly download bootstrap from manage Nugets or you can download from the official website.

    code

  • Kindly implement the styles which we have downloaded from the website.

     code

    code

  • Now, let's create two tables as Customer info and customerdetails.

    customerdetails

    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.

    code

    code

  • 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:

    gridview

  • Kindly add image. Add Image in <asp:Templatefield> to cascade dropdown of the grid view.

  • Bind the fields of the first table Customerinfo.

    code

  • You have to bind another grid view.

    code

  • Our final code will be:

    Code  

  • Default.aspx
    1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="TEstCascade._Default" %>  
    2.   
    3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    4.   
    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"  
    18.   
    19.             >  
    20.             
    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"  
    41.   
    42.                                     >  
    43.                          
    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>  
    48.                                    
    49.                                     </Columns>  
    50.                                      
    51.                                 
    52.                                 </asp:GridView>  
    53.                             </td>  
    54.                         </tr>  
    55.                     </ItemTemplate>  
    56.                 </asp:TemplateField>  
    57.             </Columns>  
    58.            
    59.    
    60.         </asp:GridView>  
    61.     </form>  
    62. </body>  
    63. </html> 
  • CS Code

    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.

    code

  • 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;  
    9.   
    10. namespace TEstCascade  
    11. {  
    12.     public partial class _Default : System.Web.UI.Page  
    13.     {  
    14.           
    15.   
    16.         protected void Page_Load(object sender, EventArgs e)  
    17.         {  
    18.             
    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.         }  
    74.   
    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.

    Solution

  • Let's check the dataset of the first table.

    Table

  • Table no 2,

    Table

  • Now, let's see the parent child table.

    ChildTable

  • The view of the parent table is as follows:

    Parent Table

  • The view of the child table is as follows:

    Child table

  • Now, let's see our final output.

    Output

  • Click add image.

    Output

  • 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.

    Output

  • The output shown below is perfect.

    Output

Conclusion

This was cascading dropdown grid view.


Similar Articles