Create Nested Gridview with Expand and Collapse features in ASP.Net

In this blog, I am going to show how we could create a nested gridview i.e gridview inside another gridview. The feature of this nested group is that the sub-grid will be hidden by default and when user clicks on "+" sign provided in Main gridview the subgrid will be shown to the user and "+" sign gets converted to "-" sign and again if user click "-" sign the subgrid gets hidden. The motive behind this is to show the detailed specification of particular record on click of button instead showing all records in a single grid.

 Additionally a small javascript has been used inside this code for attractive warning message, you may ignore that portion.


First of all, add the below code inside the .aspx code window::

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="NestedGridview.aspx.cs" Inherits="NestedGridview" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        p {
            background: #fff6cc url('warning.png') 2px 50% no-repeat;
            border-radius: 6px;
            border: 1px solid #ffd100;
            color: #000;
            padding: 10px 10px 10px 38px;
            width: 76%;
        }
    </style>
    <script language="javascript" type="text/javascript">
        function divexpandcollapse(divname) {
            var div = document.getElementById(divname);
            var img = document.getElementById('img' + divname);
            if (div.style.display == "none") {
                div.style.display = "inline";
                img.src = "images/collapse.jpg";
            } else {
                div.style.display = "none";
                img.src = "images/expand.jpg";
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            // A small code for attractive warning message //
            <p><strong>Warning!</strong> Its just for demonstration. Sub-gidview is shwoing on click of + and hiding on click of - sign. Here "UserId" is the link b/w theses two grids. All values are hardcoded here and just for demostration, you may do the similar functinality with use of database. Motive behind this is to show the detailed specification of particular record on click of button instead showing all records in a single grid</p>
            <br />
            <asp:GridView ID="gvParentGrid" EmptyDataText="Data not available" runat="server" DataKeyNames="UserId" Width="80%"
                AutoGenerateColumns="false" OnRowDataBound="gvUserInfo_RowDataBound">

                <HeaderStyle BackColor="#FFF6CC" Font-Bold="true" ForeColor="black" />
                <Columns>
                    <asp:TemplateField ItemStyle-Width="20px">
                        <ItemTemplate>
                            <a style="border-color: black" href="JavaScript:divexpandcollapse('div<%# Eval("UserId") %>');">
                                <img id="imgdiv<%# Eval("UserId") %>" width="12px" dir="rtl" src="images/expand.jpg" />
                            </a>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:BoundField DataField="UserId" HeaderStyle-ForeColor="Black" HeaderText="UserId" HeaderStyle-HorizontalAlign="Left" />
                    <asp:BoundField DataField="Name" HeaderStyle-ForeColor="Black" HeaderText="Name" HeaderStyle-HorizontalAlign="Left" />
                    <asp:TemplateField>
                        <ItemTemplate>
                            <tr>
                                <td colspan="100%">
                                    <div id="div<%# Eval("UserId") %>" style="display: none; position: relative; overflow: auto">
                                        <asp:GridView ID="gvChildGrid" EmptyDataText="Data Unavailable" runat="server" AutoGenerateColumns="false" Width="100%">

                                            <AlternatingRowStyle BackColor="LightGray" />
                                            <HeaderStyle BackColor="#FFF6CC" Font-Bold="true" ForeColor="black" />
                                            <Columns>
                                                <asp:BoundField DataField="Designation" HeaderStyle-ForeColor="Black" HeaderText="Designation" HeaderStyle-HorizontalAlign="Left" />
                                                <asp:BoundField DataField="Department" HeaderStyle-ForeColor="Black" HeaderText="Department" HeaderStyle-HorizontalAlign="Left" />
                                            </Columns>
                                        </asp:GridView>
                                    </div>
                                </td>
                            </tr>
                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>
        </div>
    </form>
</body>
</html>


Now, add following code inside the .cs code window. Here all values are hardcoded, you may channge code while using database accordingly.

 using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.IO;

public partial class NestedGridview : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            BindGrid();
        }
    }
 protected void BindGrid()
    {

        DataTable dt = new DataTable();
        dt.Columns.Add("UserId", typeof(Int32));
        dt.Columns.Add("Name", typeof(string));
     

        DataRow dr = dt.NewRow();
        dr["UserId"] = 1;
        dr["Name"] = "Aayush";
     
        dt.Rows.Add(dr);

        dr = dt.NewRow();
        dr["UserId"] = 2;
        dr["Name"] = "Anish";
        dt.Rows.Add(dr);

        dr = dt.NewRow();
        dr["UserId"] = 3;
        dr["Name"] = "Manish";
        dt.Rows.Add(dr);

        dr = dt.NewRow();
        dr["UserId"] = 4;
        dr["Name"] = "Ravish";
        dt.Rows.Add(dr);

        for (int i = 0; i < dt.Rows.Count; i++)
        {
            for (int j = 0; j < dt.Columns.Count; j++)
            {
                if (string.IsNullOrEmpty(dt.Rows[i][j].ToString()))
                {
                    dt.Rows[i][j] = "Data Not Available";
                }
            }
        }
        gvParentGrid.DataSource = dt;
        gvParentGrid.DataBind();
    }
 protected void gvUserInfo_RowDataBound(object sender, GridViewRowEventArgs e)
 {
     if (e.Row.RowType == DataControlRowType.DataRow)
     {
         DataTable dt = new DataTable();
         dt.Columns.Add("Designation", typeof(string));
         dt.Columns.Add("Department", typeof(string));

         DataRow dr = dt.NewRow();
         dr["Designation"] = "Associate Technical Consultant";
         dr["Department"] = null;
         dt.Rows.Add(dr);

         dr = dt.NewRow();
         dr["Designation"] = "Technical Consultant";
         dr["Department"] = null;
         dt.Rows.Add(dr);

         dr = dt.NewRow();
         dr["Designation"] = null;
         dr["Department"] = "Navision";
         dt.Rows.Add(dr);

         dr = dt.NewRow();
         dr["Designation"] = "Tech Lead";
         dr["Department"] = "CRM";
         dt.Rows.Add(dr);

         GridView gv = (GridView)e.Row.FindControl("gvChildGrid");
         for (int i = 0; i < dt.Rows.Count; i++)
         {
             for (int j = 0; j < dt.Columns.Count; j++)
             {
                 if (string.IsNullOrEmpty(dt.Rows[i][j].ToString()))
                 {
                     dt.Rows[i][j] = "Data Not Available";
                 }
             }
         }
         gv.DataSource = dt;
         gv.DataBind();
     }
 }

}

Output::


Comments

Post a Comment

Popular posts from this blog

Search data in Gridview on Textbox Key press event using JQuery in Asp.Net- C#

Image
First of all add the following .js file, Link and the JavaScript to your <Head> tag :: <head runat="server">     <title></title>    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript" src="js/quicksearch.js"></script> <script type="text/javascript">     $(function () {         $('.search_textbox').each(function (i) {             $(this).quicksearch("[id*=gvDetails] tr:not(:has(th))", {                 'testQuery': function (query, txt, row) {                     return $(row).children(":eq(" + i + ")").text().toLowerCase().indexOf(query[0].toLowerCase()) != -1;                 }             });         });     }); </script> </head> // This Script dynamically searches the GridView cells and filters out the unw
Read more

StateCode and StatusCode Values for mostly used entities in Microsoft Dynamics CRM 2013

In this blog I have given a list of all StateCode and StatusCode of useful entities. Please refer MSDN for more details for any doubt if you have regarding any thing. I also have collected this through MSDN The following table shows default Microsoft CRM values for StateCode and StatusCode. Each StateCode has its own default StatusCode value. For example, if a Product StateCode is 0 (Active), the default StatusCode is 1 (Active(default)). If the Product StateCode is 1 (InActive), the default StatusCode is 2 (Inactive(default)). Microsoft CRM only accepts StatusCodes that are valid for a particular StateCode. Entity Status (statecode) Status Reason (statuscode) Account (account) 0 Active 1 Active 1 Inactive 2 Inactive Activity (activitypointer) 0 Open 1 Open 1 Completed 2 Completed 2 Canceled 3 Canceled 3 Scheduled
Read more

Dumps for Microsoft Dynamics CRM MB2-703 Practice Exam Questions Free

Dumps for Microsoft Dynamics CRM MB2-703 Practice Exam Questions Free...!!! After a lot of net surfing i got few questions for passing out the exam for certification in Microsoft Dynamics CRM MB2-703 Practice Exam Questions. I think you will find it helpful and please comment if it helped you. Although this is just a shortcut for passing exam but it really helps a lot to clear exam in short duration of time. Note:: Don't blame if question doesn't matches as i have only collected questions and provided all at a single place and there is no guaranty that this will definitely come in exam. Apart from this you should go through CRM 2011 MB2- 866 dumps also. Topics and their percentage share in MB2-703 Exam: Create and Customize Solutions (10-15 percent) Customize Entities and Entity Relationships (10-15 percent) Customize Fields (10-15 percent) Manage Forms (10-15 percent) Manage Views (10-15 percent) Create and Customize Charts and Dashboards (10-15 pe
Read more

How to import CSV files into DataTable in C#

Below is code the which you can use for converting a csv file into Data Table in C#. This method also handles comma values inside a double quoted value. 1. Provide the file path of your csv file: string sCsvFilePath = @"C:\Downloads\Sample.csv"; 2. Call Custom Method: DataTable  dtTable = ConvertCSVtoDataTable(sFilePath); 3. Copy and Paste below: public   static   DataTable  ConvertCSVtoDataTable( string  sCsvFilePath) {      DataTable  dtTable =  new   DataTable ();      Regex  CSVParser =  new   Regex ( ",(?=(?:[^\"]*\"[^\"]*\")*(?![^\"]*\"))" );      using  ( StreamReader  sr =  new   StreamReader (sCsvFilePath))     {          string [] headers = sr.ReadLine().Split( ',' );          foreach  ( string  header  in  headers)         {             dtTable.Columns.Add(header);         }          while  (!sr.EndOfStream)         {              string [] rows = CSVParser.Split(sr.ReadLine());              DataRow  
Read more

How to show enlarge image when mouse hover on image or link in Asp.Net(c#) using JavaScript

Image
In this blog i am going to show we could show enlarded image when hover on Link or an image like we see on any e-commerce website. First of all right click on your application >> Select Add New Folder and Give name as images >> Once folder created place some images in folder to show preview of images when hover on link using JQuery in asp.net. After completion of folder creation and insertion of images in folder write the following code in your aspx page :: Put the below code inside the <heaD> tag::  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"> </script> <script type="text/javascript" language="javascript">     $(document).ready(function () {         ShowPreview();     });     // Configuration of the x and y offsets     function ShowPreview() {         xOffset = -20;         yOffset = 0;         $("a.preview").hover(funct
Read more
go to top image