Introduction:
In this post I will show how can bind Grid View in java script on page load using web service and adding new row data by java script in Grid View.
Download Source Code Here.
First image are showing the default binding of grid view and second image are showing new added row when click on save then it will add record in Database.
Using the code:
For binding the Grid view on Clint side I have to bind the grid view with one record otherwise in java script I can’t find the object of grid view.
using System;
using System.Data;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
BindGrid();
}
private void BindGrid()
{
DataTable table = GetData();
grdClient.DataSource = table;
grdClient.DataBind();
}
private static DataTable GetData()
{
DataTable table = new DataTable();
table.Columns.Add("JanAmount", typeof(decimal));
table.Columns.Add("FebAmount", typeof(decimal));
table.Columns.Add("MarAmount", typeof(decimal));
table.Rows.Add(0, 0, 0);
return table;
}
}
|
Now I am showing the ASPX code where I am showing the gridview with item itemplate columns
<form id="form1" runat="server">
<asp:GridView ID="grdClient" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:TemplateField HeaderText="Amount of Jan">
<ItemTemplate>
<asp:TextBox ID="txtJan" Text='<%# Eval("JanAmount")%>' runat="Server"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Amount of Feb">
<ItemTemplate>
<asp:TextBox ID="txtFeb" runat="Server" Text='<%# Eval("FebAmount")%>'></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Amount of Mar">
<ItemTemplate>
<asp:TextBox ID="txtMar" runat="Server" Text='<%# Eval("MarAmount")%>'></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<asp:HiddenField ID="hdValue" runat="server" Value="0" />
<div style="display: none;">
<asp:TextBox runat="server" ID="txtAdd"></asp:TextBox></div>
<asp:LinkButton ID="lnkIncome" runat="server" OnClientClick="return AddNewItem()"
Text="+Add Line Item" />
</form>
|
Finally I will show how I can bind grid view on page load by java script and Adding new row and saving the data. Here I have called web service by Synchronous way( you can call Asynchronous way) and call GetMessageByAsync() on Window.Onload event.
<script language="javascript" type="text/javascript">
function GetSynchronousJSONResponse(url, postData) {
var xmlhttp = null;
if (window.XMLHttpRequest)
xmlhttp = new XMLHttpRequest();
else if (window.ActiveXObject) {
if (new ActiveXObject("Microsoft.XMLHTTP"))
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
else
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
xmlhttp.open("POST", url, false);
xmlhttp.setRequestHeader("Content-Type", "application/json; charset=utf-8");
xmlhttp.send(postData);
var responseText = xmlhttp.responseText;
return responseText;
}
window.onload = function GetMessageByAsync() {
var fhsWebServURL = "WebService.asmx";
var result = GetSynchronousJSONResponse(fhsWebServURL + '/GetGridData', '{}');
var tmp = eval('(' + eval('(' + result + ').d') + ')');
if (tmp != null) {
var grdId
grdId = document.getElementById('<%=grdClient.ClientID%>');
// first need to delete first row
for (iCount = 0; iCount < tmp.Head.length; iCount++) {
// tmp.Head[iCount].DisplayName
var txtBox1
var txtBox2
var txtBox3
var newtxtBox1
var newtxtBox2
var newtxtBox3
// var grdId
var rowCount = document.getElementById('<%=hdValue.ClientID %>').value;
txtBox1 = document.getElementById("grdClient_txtJan_0");
txtBox2 = document.getElementById("grdClient_txtFeb_0");
txtBox3 = document.getElementById("grdClient_txtMar_0");
// grdId = document.getElementById('<%=grdClient.ClientID%>');
newtxtBox1 = txtBox1.cloneNode(true);
newtxtBox2 = txtBox2.cloneNode(true);
newtxtBox3 = txtBox3.cloneNode(true);
// Here i am creating dynamic id and name as when you will add multiple rows then id/name must be different
newtxtBox1.id = "txtJan" + iCount + grdId;
newtxtBox1.name = "txtJan" + iCount + grdId;
newtxtBox1.value = tmp.Head[iCount].JanAmount;
newtxtBox2.id = "txtFeb" + iCount + grdId;
newtxtBox2.name = "txtFeb" + iCount + grdId;
newtxtBox2.value = tmp.Head[iCount].FebAmount;
newtxtBox3.id = "txtMar" + iCount + grdId;
newtxtBox3.name = "txtMar" + iCount + grdId;
newtxtBox3.value = tmp.Head[iCount].MarAmount;
//now create the new row to the grid
var newRow = grdId.insertRow(grdId.rows.length);
// create the cells
var cell1 = newRow.insertCell(0);
var cell2 = newRow.insertCell(1);
var cell3 = newRow.insertCell(1);
// add the items to the cell
cell1.appendChild(newtxtBox1);
cell2.appendChild(newtxtBox2);
cell3.appendChild(newtxtBox3);
rowCount++;
document.getElementById('<%=hdValue.ClientID %>').value = rowCount;
}
grdId.deleteRow(1);
}
}
function ValidateDate(s1, s2, s3) {
var valid = !isNaN(s1);
}
function AddNewItem() {
var lnkbtnID = document.getElementById('<%= lnkIncome.ClientID %>');
if (lnkbtnID.innerText == "+Add Line Item") {
var txtBox1
var txtBox2
var txtBox3
var newtxtBox1
var newtxtBox2
var newtxtBox3
var grdId
var rowCount = document.getElementById('<%=hdValue.ClientID %>').value;
grdId = document.getElementById('<%=grdClient.ClientID%>');
var txtBox4 = document.getElementById('<%=txtAdd.ClientID %>')
newtxtBox1 = txtBox4.cloneNode(true);
newtxtBox2 = txtBox4.cloneNode(true);
newtxtBox3 = txtBox4.cloneNode(true);
// Here i am creating dynamic id and name as when you will add multiple rows then id/name must be different
newtxtBox1.id = "txtJan" + rowCount + grdId;
newtxtBox1.name = "txtJan" + rowCount + grdId;
newtxtBox1.value = "";
newtxtBox2.id = "txtFeb" + rowCount + grdId;
newtxtBox2.name = "txtFeb" + rowCount + grdId;
newtxtBox2.value = "";
newtxtBox3.id = "txtMar" + rowCount + grdId;
newtxtBox3.name = "txtMar" + rowCount + grdId;
newtxtBox3.value = "";
//now create the new row to the grid
var newRow = grdId.insertRow(grdId.rows.length);
// create the cells
var cell1 = newRow.insertCell(0);
var cell2 = newRow.insertCell(1);
var cell3 = newRow.insertCell(1);
// add the items to the cell
cell1.appendChild(newtxtBox1);
cell2.appendChild(newtxtBox2);
cell3.appendChild(newtxtBox3);
rowCount++;
document.getElementById('<%=hdValue.ClientID %>').value = rowCount;
// if you wanted to save data in db the send data by using webservice or Pagemethod to server side
lnkbtnID.innerText = "Save Item";
return false;
} else if (lnkbtnID.innerText == "Save Item") {
var rowCount = document.getElementById('<%=hdValue.ClientID %>').value -1;
var grdId = document.getElementById('<%=grdClient.ClientID%>');
var janValue = document.getElementById("txtJan" + rowCount + grdId).value;
var febValue = document.getElementById("txtFeb" + rowCount + grdId).value;
var marValue = document.getElementById("txtMar" + rowCount + grdId).value;
if ((!isNaN(janValue)) && (!isNaN(febValue)) && (!isNaN(marValue))) {
var fhsWebServURL = "WebService.asmx";
var result = GetSynchronousJSONResponse(fhsWebServURL + '/SaveData', '{"s1":"' + janValue + '", "s2":"' + febValue + '", "s3":"' + marValue + '"}');
var tmp = eval('(' + eval('(' + result + ').d') + ')');
if (tmp) {
lnkbtnID.innerText = "+Add Line Item";
return false;
}
} else {
alert('Invalid inputs.');
return false;
}
}
}
</script>
|
For WebService Please download the code.
1 comment:
interesting post :)
Post a Comment