adding a new row to a grid view using javascript or jquery

Question

0.00/5 (No votes)

See more:

, +

Hi i am trying to add a new row to the GridView using javascript or jquery. I am not using code behind code as i do not want the page to get refreshed so i am trying in javascript. I have tried the following code and it did add a new row.. but the new row is a clone or copy of first row... wich i do not want... means i need same kind of row when i click on add new row but the id of that row inside grid view should be different which is not happening as i am doing clone... and code is used was.. :

C#

function AddNewRecord()
{
    var grd = document.getElementById('ctl00_ContentPlaceHolder1_griddetails');
    var tbod=grd.rows[0].parentNode;
    var newRow=grd.rows[grd.rows.length - 1].cloneNode(true);
    tbod.appendChild(newRow);
}

on the button click i am calling this js function but since it has clone node it is just copying same id to next row in gridview which i do not need... so can u please help me as to how can i modify this code to create new row with details as of first but with new id...

Thanking u in advance!

Posted 27-Dec-12 19:58pm

Shruthi.BT

Add a Solution

2 solutions

Solution 2

XML

<!-- There is no grid view on the client side, only a table. So create a new tr/td/whatever string of HTML and append it to the table. try this... -->

<html>
<head>
<script type="text/javascript">
        function addRow()
        {
            var tr = document.createElement("tr");

            for(var c = 0; c < tbl.rows[0].childNodes.length; c++)
            {
                var td = document.createElement("td");
                td.innerText = "Column " + c;
                tr.appendChild(td);

                tr.style.backgroundColor = "lightgrey";
                td.onmouseover = function()
                {
                    this.style.backgroundColor = "lightyellow";
                }
                td.onmouseout = function()
                {
                    this.style.backgroundColor = "lightgrey";
                }
                td.onclick = function()
                {
                    alert(this.innerText);
                }
            }

            tbl.children[0].appendChild(tr);
        }
</script>
</head>
<body>
      <table id="tbl" width="60%" border="1">
             <tr>
                 <td>1</td>
                 <td>2</td>
                 <td>3</td>
                 <td>4</td>
                 <td>5</td>
             </tr>
      </table>
      <br/><br/>
      <input type="button" onclick="addRow();" value="Add Row" />
</body>
</html>

Posted 27-Dec-12 20:24pm

Dineshshp

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Christian Graus · Accepted Answer · 2012-12-27T20:00:00

Solution 1

There is no grid view on the client side, only a table. So create a new tr/td/whatever string of HTML and append it to the table.

Posted 27-Dec-12 20:00pm

Christian Graus

Comments

Shruthi.BT 28-Dec-12 2:34am

i tried appending new row and column values as u suggested but one problem is that the id .... actually inside gridview i am binding 2 dropdownlist and the dropdownlist id is very important as i am adding new row that id is taking what i give in id of appending new row... but i want it the way like for ex: my first row in grid view has 2 drop down and first dropdown has id as
"ctl00_ContentPlaceHolder1_griddetails_ctl02_ddlcolumnname"
...
but in new row i want the id of the drop down as
..
"ctl00_ContentPlaceHolder1_griddetails_ctl03_ddlcolumnname"

means the id no should increment like how it gets incremented if we do from codebehind adding new row... how this can be done...??

Christian Graus 28-Dec-12 2:44am

You need to write code to generate the id and insert it. But I don't expect that viewstate is going to find it if you ever post back, so why does it matter ?