Delete GridviewRow using Javascript?

Question

I've a gridview in which there is an add and remove row facility.I want to knoow how could i remove a particular gridview row when corresponding remove button is clicked.

I've searched everywhere but nothing find quite useful to me

Heres my code

<asp:TemplateField>
  <ItemTemplate>
     <asp:LinkButton ID="gdlbtnRemove" runat="server" 
     OnClientClick="RemoveRow(this)">Remove</asp:LinkButton>
  </ItemTemplate>
</asp:TemplateField>

This is my javascript code

<script type="text/javascript">
  function RemoveRow(rowindex,objref)
  { 
    var row=objref.parentNode.parentNode;
    row.Remove();  
  }
 </script>

Im new to javascript........

as you say you are new to javascript,I would recommend you use Kendo Grid very helpful and open source demos.kendoui.com/web/grid/index.html demos.kendoui.com/web/overview/index.html — RohitWagh
– RohitWagh, Commented Mar 25, 2012 at 8:17

Tsachi Shushan · Accepted Answer · 2012-03-25 09:59:32Z

4

Try this:

apsx:

<ItemTemplate> 
    <asp:LinkButton  ID="gdlbtnRemove" runat="server"     
     OnClientClick="return RemoveRow(this)">Remove</asp:LinkButton> 
</ItemTemplate>

Javascript:

function RemoveRow(item) {
    var table = document.getElementById('myGridView');
    table.deleteRow(item.parentNode.parentNode.rowIndex);
    return false;
}

answered Mar 25, 2012 at 9:59

Tsachi Shushan

813 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ksg Over a year ago

Here the problem is after clicking the remove button corresponding gridview row is disappearing first and then reappearing

Tsachi Shushan Over a year ago

This could happen if the click event bubbles up and the page posts back. The return RemoveRow(this) in the LinkButton definition combined with returning false on the handler function should stop the bubbling of the this event.

riley · Accepted Answer · 2015-09-03 12:37:10Z

1

Old post i know but Tsachi's Answer was almost perfect for me except

This

var table = document.getElementById('GridviewID');

had to become this

var table = document.getElementById("<%= GridviewID.ClientID %>");

In case anyone else looks at this

answered Sep 3, 2015 at 12:37

riley

1546 bronze badges

Collectives™ on Stack Overflow

Delete GridviewRow using Javascript?

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related