How to Hide Gridview and Show the selected gridview row details in Form View using ASP.NET C#

In this post I'm going to post details about how to hide full Gridview by selecting individual gridview row and show that gridview row details in Formview;

In this example, I'm using AdventureWorks Database and datebase table name HumanResources.Employee

Click here to Download AdventureWorks Database

Here I'll post the code and snapshot details

1. Design View

Add connection string code in web.config as below :

<connectionstrings>
 <add name="connection" connectionString="Data Source=localhost\sqlexpress;Initial   Catalog=AdventureWorks;Integrated Security=true;" providerName="System.Data.SqlClient"/>
</connectionStrings>

2.Design View's Source code in Default.aspx

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

<!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>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
            ConnectionString="<%$ ConnectionStrings:connection %>" 
            SelectCommand="SELECT * FROM HumanResources.Department WHERE DepartmentID=@DepartmentID">
           <selectparameters>
           <asp:ControlParameter ControlID="GridView1" DefaultValue="SelectedValue" Name="Id"
                    PropertyName="SelectedValue" Type= "Int32"/>
           </SelectParameters>
            </asp:SqlDataSource>
        <br />
        <asp:GridView ID="GridView1"  runat="server" CellPadding="4"  AutoGenerateColumns="False"
            DataSourceID="SqlDataSource1" ForeColor="#333333" GridLines="None" 
            onselectedindexchanged="GridView1_SelectedIndexChanged" 
            DataKeyNames="DepartmentID,Name">
            <rowstyle BackColor="#FFFBD6" ForeColor="#333333" />
            <footerstyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
            <pagerstyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />
            <selectedrowstyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />
            <headerstyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
            <alternatingrowstyle BackColor="White" />
            <columns>
                            <asp:BoundField DataField="DepartmentID" HeaderText="ID"/>
                            <asp:BoundField DataField="Name" HeaderText="Name"/>
                                                        
                            <asp:CommandField ShowSelectButton="true" SelectText="Full Details" />
                            </Columns>
        </asp:GridView>
        <asp:Panel ID="Panel3" runat="server" Visible="False" >
            <asp:FormView ID="FormView1" runat="server">
            <itemtemplate>
            <table style="width:100%;"></table>
<tr bgcolor="#FFCCFF"  ><td>ID:</td><td><%#Eval("DepartmentID")%></td></tr>
<tr bgcolor="White"><td>Name:</td><td><%#Eval("Name")%></td></tr>
<tr bgcolor="#FFCCFF"><td>Group:</td><td><%#Eval("GroupName")%></td></tr>
<tr bgcolor="White"><td>Modified:</td><td><%#Eval("ModifiedDate")%></td></tr>
</table>
</ItemTemplate>
            </asp:FormView>
            <br />
                    <br />
                        <asp:Button ID="Button3" runat="server" Text="" onclick="Button3_Click" 
                            Visible="False" />
        </asp:Panel>
    </div>
</form>
</body>
</html>

3. Code Behind : Default.aspx.cs

using System;
using System;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Data.SqlClient;

public partial class _Default : System.Web.UI.Page 
{
    SqlConnection con;
    SqlCommandBuilder build;
    SqlCommand cmd;
    SqlDataAdapter adapter;
    
    string str;
    protected void Page_Load(object sender, EventArgs e)
    {
        str = ConfigurationManager.ConnectionStrings["connection"].ConnectionString;
        con = new SqlConnection(str);
        con.Open();
        adapter = new SqlDataAdapter("select * from HumanResources.Department", con);
        build = new SqlCommandBuilder(adapter);
        DataSet ds = new DataSet();
        adapter.Fill(ds, "Dept");
        GridView1.DataSource = ds.Tables["Dept"].DefaultView;
        GridView1.DataSourceID = String.Empty;
        GridView1.DataBind();
        Button3.Visible = false;
        con.Close();
    }
    protected void GridView1_SelectedIndexChanged(object sender, EventArgs e)
    {
        try
        {
            cmd = new SqlCommand("Select * from HumanResources.Department where DepartmentID=@DepartmentID", con);
            cmd.Parameters.AddWithValue("@DepartmentID", GridView1.SelectedValue);
            GridView1.Visible = false;
            con.Open();
            Panel3.Visible = true;
            FormView1.Visible = true;
            FormView1.DataSource = cmd.ExecuteReader();
            FormView1.DataBind();
            Button3.Visible = true;
            Button3.Text = "Back";
        }
        catch (Exception ex)
        {
            throw ex;
        }
        finally
        {
            if (con.State == System.Data.ConnectionState.Open)

                con.Close();
            con.Dispose();
        }
    }
    protected void Button3_Click(object sender, EventArgs e)
    {
        Button3.Text = "Back";
        GridView1.Visible = true;
        FormView1.Visible = false;

    }
}

4. Output: a) Gridview Shown

4 b) After clicking Full detail in First row in Gridview; Gridview has been hidden and showing Form view of the particular grid view rows full details

4.c) Click Back Button then Grid view has been shown and Form view has been hidden

"How to maintain or retain tabs in same tab after button click events or postback?" using JQuery in ASP.NET C#

In this post I'll share an details about " How to maintain or retain tabs in same tab after button click events or postback? " Step 1: you need to download Jquery and JQueryUI Javascript libraries from this site http://jqueryui.com/ Step 2: As usually you can create ASP.NET website from Visual Studio IDE and add Jquery and JqueryUI plugins in the header section of aspx page. Step 3: Add HiddenField control inside aspx page which is very useful to retain tab in same page Step 4: Use the HiddenField ID in Jquery code to indicate that CurrentTab Index Step 5: In code Behind, using Enumerations concept give the tab index values as user defined variable Step 6: Use the Enum values in every Button click events on different tabs to check that tab could be retained in the same tab Further, Here I'll give the code details and snap shot pictures, 1. Default.aspx: Design Page First Second Third ...

Kumaran1987

Search This Blog

How to Hide Gridview and Show the selected gridview row details in Form View using ASP.NET C#

Labels

Comments

Post a Comment

Popular posts from this blog

"How to maintain or retain tabs in same tab after button click events or postback?" using JQuery in ASP.NET C#

Guidewire Related Interview Question and answers part 1

Login and Registration forms in C# windows application with Back end Microsoft SQL Server for data access