Description:-
In this example we explain that how to add dynamically
add rows to grid view using jquery in asp.net. Or dynamically add rows to grid
view when click on add button in asp.net.
Here we use explain dynamically add rows to grid
view at client side without post back using jquery in asp.net.
Here we take three textbox in which you enter data
and click on submit button then this data will be added as a row in a grid view
using jquery without post back at client side.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AddControl.aspx.cs" Inherits="AddControl" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("[id*=btnInsert]").click(function ()
{
var grd_Notification = $("[id*=grd_Notification]");
var row = grd_Notification.find("tr").eq(1);
if ($.trim(row.find("td").eq(0).html()) == "") {
row.remove();
}
row
= row.clone(true);
var txtSubject = $("[id*=txtSubject]");
SetValue(row, 0, "Subject", txtSubject);
var txtMessage = $("[id*=txtMessage]");
SetValue(row, 1, "Message", txtMessage);
var txtStatus = $("[id*=txtStatus]");
SetValue(row, 2, "Status", txtStatus);
grd_Notification.append(row);
return false;
});
function SetValue(row, index, name, textbox) {
row.find("td").eq(index).html(textbox.val());
var input = $("<input type =
'hidden' />");
input.prop("name", name);
input.val(textbox.val());
row.find("td").eq(index).append(input);
textbox.val("");
}
});
</script>
<title>Dynamically Add Rows to GridView using
jQuery or Javascript on Button Click in ASP.Net.</title>
</head>
<body>
<form id="form1" runat="server">
<asp:GridView ID="grd_Notification" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:TemplateField HeaderText="Subject" ItemStyle-Width="120px" ItemStyle-CssClass="Subject">
<ItemTemplate>
<%# Eval("noti_subject") %>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Message" ItemStyle-Width="120px" ItemStyle-CssClass="Message">
<ItemTemplate>
<%# Eval("noti_message")%>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Status" ItemStyle-Width="120px" ItemStyle-CssClass="Status">
<ItemTemplate>
<%# Eval("noti_Status")%>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<br />
<table border="1">
<tr>
<td style="width: 120px">Subject:<br />
<asp:TextBox ID="txtSubject" runat="server" Width="140" Text="" />
</td>
<td style="width: 120px">Message:<br />
<asp:TextBox ID="txtMessage" runat="server" Width="140" Text="" />
</td>
<td style="width: 120px">Status:<br />
<asp:TextBox ID="txtStatus" runat="server" Width="140" Text="" />
</td>
<td style="width: 100px">
<br />
<asp:Button ID="btnInsert" runat="server" Text="Insert" />
</td>
</tr>
</table>
<br />
</form>
</body>
</html>
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 AddControl :
System.Web.UI.Page
{
protected void Page_Load(object
sender, EventArgs e)
{
if (!this.IsPostBack)
{
this.BindNotification();
}
}
private void BindNotification()
{
DataTable dtnotification = new DataTable();
string query = "select * from
tbl_notification where noti_Status=0";
string constr = @"Your
connectionstring";
using (SqlConnection con = new SqlConnection(constr))
{
using (SqlCommand cmd = new SqlCommand(query))
{
cmd.Connection = con;
using (SqlDataAdapter sda = new SqlDataAdapter(cmd))
{
sda.SelectCommand = cmd;
sda.Fill(dtnotification);
}
}
}
if (dtnotification.Rows.Count == 0)
{
//If no records then add a dummy row.
dtnotification.Rows.Add();
}
grd_Notification.DataSource = dtnotification;
grd_Notification.DataBind();
}
}
0 comments:
Post a Comment