Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: ASP.NET Javascript jQuery , +
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.. :
 
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 20:58pm
Rate this: bad
good
Please Sign up or sign in to vote.

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.
  Permalink  
Comments
Shruthi.BT at 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 at 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 ?
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 2

<!-- 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>
  Permalink  

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

  Print Answers RSS
0 Maciej Los 372
1 ridoy 313
2 DamithSL 305
3 OriginalGriff 209
4 George Jonsson 140
0 OriginalGriff 7,968
1 DamithSL 6,179
2 Sergey Alexandrovich Kryukov 5,524
3 Maciej Los 5,438
4 Kornfeld Eliyahu Peter 4,539


Advertise | Privacy | Mobile
Web02 | 2.8.141223.1 | Last Updated 28 Dec 2012
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100