Design the form the as follows:
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="grdActivation" runat="server" AutoGenerateColumns="False">
<Columns>
<asp:BoundField DataField="Userid" HeaderText="Userid" />
<asp:BoundField DataField="Name" HeaderText="Name" />
<asp:BoundField DataField="Emailid" HeaderText="Emailid" />
</Columns>
</asp:GridView>
</div>
</form>
</body>
javascript Function:
<script src="jquery-1.7.min.js"></script>
<script type="text/javascript">
$(function () {
$.ajax({
type: "POST",
url: "Default9.aspx/GetUserInfoData",
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess,
failure: function (response) {
alert("Failure Details : " + response.d);
},
error: function (response) {
alert("Error Details: " + response.d);
}
});
});
function OnSuccess(response) {
var xmlDoc = $.parseXML(response.d);
var xml = $(xmlDoc);
var users = xml.find("Table");
var row = $("[id*=grdActivation] tr:last-child").clone(true);
$("[id*=grdActivation] tr").not($("[id*=grdActivation] tr:first-child")).remove();
$.each(users, function () {
$("td", row).eq(0).html($(this).find("Userid").text());
$("td", row).eq(1).html($(this).find("Name").text());
$("td", row).eq(2).html($(this).find("Emailid").text());
$("[id*=grdActivation]").append(row);
row = $("[id*=grdActivation] tr:last-child").clone(true);
});
}
</script>
.cs Page:
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindEmptyRow();
}
}
private void BindEmptyRow()
{
DataTable dt = new DataTable();
dt.Columns.Add("Userid");
dt.Columns.Add("Name");
dt.Columns.Add("Emailid");
dt.Rows.Add();
grdActivation.DataSource = dt;
grdActivation.DataBind();
}
[WebMethod]
public static string GetUserInfoData()
{
SqlConnection con = new SqlConnection("------------");
SqlCommand cmd = new SqlCommand("select * from sdfsf", con);
DataSet ds = new DataSet();
SqlDataAdapter da=new SqlDataAdapter(cmd);
da.Fill(ds);
return ds.GetXml();
}
output:
in case if , you want to apply styles to the rows alternative color than add below lines of javascript code.
var index= 1;
$.each(users, function () {
$("td", row).eq(0).html($(this).find("Userid").text());
$("td", row).eq(1).html($(this).find("Name").text());
$("td", row).eq(2).html($(this).find("Emailid").text());
$("[id*=grdActivation]").append(row);
row = $("[id*=grdActivation] tr:last-child").clone(true);
if index= == 1 || index= % 2 != 0)) {
$(row).css("background-color", "colorcode");
}
else {
$(row).css("background-color", "colorcode");
}
index= index+ 1;
row = $("[id*=grdActivation] tr:last-child").clone(true);
});
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="grdActivation" runat="server" AutoGenerateColumns="False">
<Columns>
<asp:BoundField DataField="Userid" HeaderText="Userid" />
<asp:BoundField DataField="Name" HeaderText="Name" />
<asp:BoundField DataField="Emailid" HeaderText="Emailid" />
</Columns>
</asp:GridView>
</div>
</form>
</body>
javascript Function:
<script src="jquery-1.7.min.js"></script>
<script type="text/javascript">
$(function () {
$.ajax({
type: "POST",
url: "Default9.aspx/GetUserInfoData",
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess,
failure: function (response) {
alert("Failure Details : " + response.d);
},
error: function (response) {
alert("Error Details: " + response.d);
}
});
});
function OnSuccess(response) {
var xmlDoc = $.parseXML(response.d);
var xml = $(xmlDoc);
var users = xml.find("Table");
var row = $("[id*=grdActivation] tr:last-child").clone(true);
$("[id*=grdActivation] tr").not($("[id*=grdActivation] tr:first-child")).remove();
$.each(users, function () {
$("td", row).eq(0).html($(this).find("Userid").text());
$("td", row).eq(1).html($(this).find("Name").text());
$("td", row).eq(2).html($(this).find("Emailid").text());
$("[id*=grdActivation]").append(row);
row = $("[id*=grdActivation] tr:last-child").clone(true);
});
}
</script>
.cs Page:
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindEmptyRow();
}
}
private void BindEmptyRow()
{
DataTable dt = new DataTable();
dt.Columns.Add("Userid");
dt.Columns.Add("Name");
dt.Columns.Add("Emailid");
dt.Rows.Add();
grdActivation.DataSource = dt;
grdActivation.DataBind();
}
[WebMethod]
public static string GetUserInfoData()
{
SqlConnection con = new SqlConnection("------------");
SqlCommand cmd = new SqlCommand("select * from sdfsf", con);
DataSet ds = new DataSet();
SqlDataAdapter da=new SqlDataAdapter(cmd);
da.Fill(ds);
return ds.GetXml();
}
output:
in case if , you want to apply styles to the rows alternative color than add below lines of javascript code.
var index= 1;
$.each(users, function () {
$("td", row).eq(0).html($(this).find("Userid").text());
$("td", row).eq(1).html($(this).find("Name").text());
$("td", row).eq(2).html($(this).find("Emailid").text());
$("[id*=grdActivation]").append(row);
row = $("[id*=grdActivation] tr:last-child").clone(true);
if index= == 1 || index= % 2 != 0)) {
$(row).css("background-color", "colorcode");
}
else {
$(row).css("background-color", "colorcode");
}
index= index+ 1;
row = $("[id*=grdActivation] tr:last-child").clone(true);
});
No comments:
Post a Comment
Thank you for visiting my blog