Client Side binding of GridView and Adding rows.


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.

 

2 comments:

Paul Hafalla said...

interesting post :)

Angelo said...

Look at this blog, you will find many interesting things
www.systemdeveloper.info

Post a Comment