Display Form under Gridview Row - Edit Gridview Control


put form under gridview row

In this article i'll explain how to display student details form in gridview row when user click on edit button.

Create Database Table : StudentMarks

StudentMarks is a database table which i'm using for demonstration purpose with predefined data that i'm inserting through script which i declare in below code snippet.

create table StudentMarks(
studentID int,
studentName varchar(30),
physics int,
chemistry int,
maths int,
computer int,
result varchar(5))

insert into StudentMarks values(1,'Krishna', 35,35,35,35,'Pass')
insert into StudentMarks values(2,'Parmesh', 75,56,46,71,'Pass')
insert into StudentMarks values(3,'Sathya', 64,83,25,63,'Fail')
insert into StudentMarks values(4,'Naresh', 37,51,42,67,'Pass')
insert into StudentMarks values(4,'Naresh', 43,31,62,17,'Fail')

HTML Markup Language

First, add or drag and drop Gridview Control from toolbox to webpage (i.e Default.aspx), especially this article i'll show you in 3 step how to design gridview control.

a.) Add Gridview Control Design

Open Default.aspx page and add Gridview Control and select Auto Format and choose any design as you like or copy and paste the gridview control design from below code snippet.

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
            CellPadding="4" ForeColor="#333333" GridLines="None">
            <AlternatingRowStyle BackColor="White" ForeColor="#284775" />

       <!-- b.) Design Gridview Control Header Section -->
       <!-- Add Gridview Header Section Code Here -->

            <EditRowStyle BackColor="#999999" />
            <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
            <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
            <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
            <RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
            <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
            <SortedAscendingCellStyle BackColor="#E9E7E2" />
            <SortedAscendingHeaderStyle BackColor="#506C8C" />
            <SortedDescendingCellStyle BackColor="#FFFDF8" />
            <SortedDescendingHeaderStyle BackColor="#6F8DAE" />
        </asp:GridView>

b.) Design Gridview Control Header Section

This Gridview Header Section is used to display under <asp:TemplateField> </asp:TemplateField> . TemplateField must add under <Columns> <!-- Add Template Field Code Here --> </Columns>

<Columns>
    <asp:TemplateField>
       <HeaderTemplate>
         <table style="border-collapse:collapse;">
            <tr>
             <th style="padding:5px; width:100px;">Student ID</th>
             <th style="padding:5px; width:100px;">Student Name</th>
             <th style="padding:5px; width:100px;">Physics</th>
             <th style="padding:5px; width:100px;">Chemistry</th>
             <th style="padding:5px; width:100px;">Mathematics</th>
             <th style="padding:5px; width:100px;">Computer</th>
             <th style="padding:5px; width:100px;">Result</th>
            </tr>
        </table>
       </HeaderTemplate>
       <ItemTemplate>

<!--c.) Gridview Body Section Design Here -->
     
      </ItemTemplate>
    </asp:TemplateField>
</Columns>

c.) Gridview Body Section Design Here

 <table>
            <tr>
             <td style="padding:5px; width:100px;">
             <asp:Label ID="lblStudentID1" runat="server" Text='<%# Evalundefined"studentID") %>'></asp:Label>
             </td>
             <td style="padding:5px; width:100px;">
           <asp:Label ID="lblStudentName" runat="server" Text='<%# Evalundefined"studentName") %>'></asp:Label>
           </td>
             <td style="padding:5px; width:100px;">
           <asp:Label ID="lblPhysics" runat="server" Text='<%# Evalundefined"physics") %>'></asp:Label>
           </td>
             <td style="padding:5px; width:100px;">
           <asp:Label ID="lblChemistry" runat="server" Text='<%# Evalundefined"chemistry") %>'></asp:Label>
           </td>
             <td style="padding:5px; width:100px;">
           <asp:Label ID="lblMaths" runat="server" Text='<%# Evalundefined"maths") %>'></asp:Label>
           </td>
             <td style="padding:5px; width:100px;">
           <asp:Label ID="lblComputer" runat="server" Text='<%# Evalundefined"computer") %>'></asp:Label>
           </td>
             <td style="padding:5px; width:100px;">
           <asp:Label ID="lblResult" runat="server" Text='<%# Evalundefined"result") %>'></asp:Label>
             </td>
             <td>
              <a href='javascript:voidundefined0);' onclick="openFormundefined<%# Evalundefined"studentID") %>); return false;">Edit</a>
             </td>             
            </tr>
            <tr>
            <td  colspan="7">     
<!--d.) Student Details Form Code Here -->
             </td> 
            </tr>
</table>

d.) Student Details Form Code Here

 <div id='div<%# Eval("studentID") %>' style="display:none;">
 <table class="tableForm">
  <tr>
   <th colspan="5" class="tableForm_th">
    <span style="float:left;">Student Details :</span><a style="color:#fff;" href="javascript:voidundefined0);" onclick="CloseFormundefined<%# Evalundefined"studentID") %>); return false;"><span class="scls">X</span></a>
   </th>
   </tr>
   <tr>
   <td class="tableForm_td"> StudentID </td>
   <td class="tableForm_td">
     <asp:Label ID="lblStudentID" runat="server" Text='<%# Evalundefined"studentID") %>'></asp:Label>
   </td>
   <td class="tableForm_td"> StudentName </td>
   <td class="tableForm_td">
     <asp:TextBox ID="txtStudentName" runat="server" Text='<%# Evalundefined"studentName") %>'></asp:TextBox>
   </td>
   </tr>
   <tr>
    <td class="tableForm_td"> Physics </td>
    <td class="tableForm_td">
     <asp:TextBox ID="txtPhy" runat="server" Text='<%# Evalundefined"physics") %>'></asp:TextBox>
    </td>
    <td class="tableForm_td"> Chemistry </td>
    <td class="tableForm_td">
     <asp:TextBox ID="txtChe" runat="server" Text='<%# Evalundefined"chemistry") %>'></asp:TextBox>
    </td>
   </tr>
   <tr>
   <td class="tableForm_td"> Mathematics </td>
   <td class="tableForm_td">
    <asp:TextBox ID="txtMaths" runat="server" Text='<%# Evalundefined"maths") %>'></asp:TextBox>
   </td>
   <td class="tableForm_td"> Computer </td>
   <td class="tableForm_td">
    <asp:TextBox ID="txtComp" runat="server" Text='<%# Evalundefined"computer") %>'></asp:TextBox>
   </td>
   </tr>
   <tr>
    <td colspan="4">
     <asp:Button ID="btnUpdate" Text="Update" runat="server" OnClick="btnUpdate_Click" />&nbsp;&nbsp;<asp:Button ID="btnCancel" Text="Cancel" runat="server"  />
     </td>
    </tr>
   </table>
  </div>

JQuery Code

<script type = "text/javascript" src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <title></title>
    <script type="text/javascript">
      function openForm(n) {
            $("#div" + n).show();
            return false;
        }
        function CloseForm(n) {
            $("#div" + n).hide();
            return false;
        }
    </script>

CSS Code

<style type="text/css">
.tableForm {
        border-collapse:collapse; width:100%;
    }
    .tableForm_th, .tableForm_td {
        border:1px solid #999; padding:5px;
    }
    .tableForm_th {
        background-color:#8e44ad; color:#fff;
    }
   .scls, .scls:hover {
       float:right; padding:3px;
   }
   .scls:hover {
       color:#000000;
   }
</style>

C# Coding

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.Data.SqlClient;

public partial class _Default : System.Web.UI.Page
{
    SqlConnection con = new SqlConnection("Data Source=.; Database=master; User ID=sa; Password=****;");

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            BindGridview();
        }
    }
    private void BindGridview()
    {
        SqlDataAdapter da = new SqlDataAdapter("Select * from StudentMarks", con);
        DataSet ds = new DataSet();
        da.Fill(ds);
        GridView1.DataSource = ds;
        GridView1.DataBind();
    }
    protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            Label lblSID = (Label)e.Row.FindControl("lblStudentID");
            Label lblSName = (Label)e.Row.FindControl("lblStudentName");
            Label lblPhyscs = (Label)e.Row.FindControl("lblPhysics");
            Label lblChemistry = (Label)e.Row.FindControl("lblChemistry");
            Label lblMaths = (Label)e.Row.FindControl("lblMaths");
            Label lblComputer = (Label)e.Row.FindControl("lblComputer");
            Label lblResult = (Label)e.Row.FindControl("lblResult");
            if (lblResult.Text == "Fail")
            {
                lblSID.Style.Add("color", "#f00");
                lblSName.Style.Add("color", "#f00");
                lblPhyscs.Style.Add("color", "#f00");
                lblChemistry.Style.Add("color", "#f00");
                lblMaths.Style.Add("color", "#f00");
                lblComputer.Style.Add("color", "#f00");
                lblResult.Style.Add("color", "#f00");
            }
        }
    }


    protected void btnUpdate_Click(object sender, EventArgs e)
    {
        GridViewRow row = (sender as Button).NamingContainer as GridViewRow;
        Label lblSID = (Label)row.FindControl("lblStudentID1");
        TextBox txtStudentName = (TextBox)row.FindControl("txtStudentName");
        TextBox txtPhy = (TextBox)row.FindControl("txtPhy");
        TextBox txtChe = (TextBox)row.FindControl("txtChe");
        TextBox txtMaths = (TextBox)row.FindControl("txtMaths");
        TextBox txtComp = (TextBox)row.FindControl("txtComp");

        SqlCommand cmd = new SqlCommand("Update StudentMarks set studentName='" + txtStudentName.Text + "', physics='" + txtPhy.Text + "', chemistry='" + txtChe.Text + "', maths='" + txtMaths.Text + "', computer='" + txtComp.Text + "' where studentID='" + lblSID.Text + "'", con);
        con.Open();
        int i = cmd.ExecuteNonQuery();
        if (i > 0)
        {
            BindGridview();
        }
        con.Close();
    }
}

Watch Demo Video How its Work

Tag : ASP.NET, Gridview
0 Komentar untuk "Display Form under Gridview Row - Edit Gridview Control"

Back To Top