How to delete a row in rad grid in javascript and in csharp?

[VetrivelMP]

Hi All,

I have to delete a row inside a rad grid based on some condition by looping through all the rows. i invested some time to find solution.
But i am not success in to that. please help me on this how to delete a row inside a radgrid using javascript and using csharp.

ex:  i have one label inside radgrid which stores id . i need to delete a row based on this id.

Thanks in advance.

[Shinu]

Hello Vetrive,

Try the following client side code.

javascript:

function deleteRows()

{ 

  var tableView = $find('<%=RadGrid1.ClientID %>').get_masterTableView(); 

 var dataItems = tableView.get_dataItems(); 

 for(var i=0; i < dataItems.length; i++) 

{ 

   tableView.deleteItem(dataItems[i].get_element()); 

}        
}

When AllowAutomaticDeletes is set to true for the master table view, the rows will be automatically deleted by the above code. If you are handling the database operations manually, you need to attach an event handler to the DeleteCommand event of the grid, which will be throw for each item by each call to tableView.deleteItem(....) on the client. In the event handler you should implement your database operations logic.
Another suggestion is to use GridClientDeleteColumn. Take a look into the following help article for more on this.
Grid / Client-Side Inline Delete

From serverside:

For deleting grid row from code behind attach 'DeleteCommand' to RadGrid and write code to delete the row.
aspx:

<telerik:RadGrid ID="RadGrid1" ondeletecommand="RadGrid1_DeleteCommand">

C#:

protected void RadGrid1_DeleteCommand(object sender, GridCommandEventArgs e)
   {
         //write code here
   }

Thanks,
Shinu.

[VetrivelMP]

hi ,
I have followed your instructions but row is not deleted. could pls give me sample project which demonstrate the above scenario?

Thanks in advance.

[Shinu]

Hello Vetrive,

The code which I posted worked as expected at my end. Please make sure that you have followed the instructions. Also take a look in to the following demo which explains automatic CRUD operations.
Grid / Automatic Operations.

Please elaborate your scenario if it does not help.

Thanks,
Shinu.

[VetrivelMP]

Hi,

this is my code

 

 

 

function deleteRows(RowID) {

 

 

 

var tableView = $find('<%=Grid1.ClientID %>').get_masterTableView();

 

 

 

var dataItems = tableView.get_dataItems();

 

tableView.deleteItem(dataItems[RowID].get_element());

tableView.rebind();

}

 

 

 

protected void Grid1_ItemDataBound(object sender, Telerik.Web.UI.GridItemEventArgs e)

 

{

 

 

try

 

 

 

 

 

{

 

 

if (e.Item.ItemIndex != -1)

 

{

 

 

LinkButton lnkBtnDelete = (LinkButton)e.Item.FindControl("lnkBtnDelete");

 

 

 

if (lnkBtnDelete != null)

 

{

 

 

 

 

lnkBtnDelete.Attributes.Add(

 

"onclick", "deleteRows('" + e.Item.ItemIndex + "')");

 

 

 

}

}

}

 

 

catch (Exception ex)

 

{

}

}

 

 

 

protected void Grid1_DeleteCommand(object sender, Telerik.Web.UI.GridCommandEventArgs e)

 

{

rgvListOfTips.Rebind();

}

 

 

 

 

 

<Telerik:RadGrid ID="Grid1" runat="server" AutoGenerateColumns="false" CellPadding="0"

 

 

 

 

 

 

 

CellSpacing="0" AllowPaging="false" ShowHeader="true" ClientSettings-AllowColumnsReorder="false"

 

 

 

 

 

 

 

ClientSettings-AllowColumnHide="true" ClientSettings-Resizing-AllowColumnResize="false"

 

 

 

 

 

 

 

HeaderStyle-HorizontalAlign="Left" GridLines="Both" Skin="Outlook" Width="100%" AllowAutomaticDeletes="true" OnDeleteCommand="Grid1_DeleteCommand"

 

 

 

 

 

 

 

OnItemDataBound="Grid1_ItemDataBound" Visible="false">

 

 

 

 

 

 

 

<MasterTableView TableLayout="Fixed" EnableNoRecordsTemplate="true"

 

 

 

 

AllowAutomaticDeletes="True">

 

 

 

 

 

 

 

<NoRecordsTemplate>

 

 

 

 

 

 

 

<div>

 

 

 

 

 

No Records.

 

 

</div>

 

 

 

 

 

 

 

</NoRecordsTemplate>

 

 

 

 

 

 

 

<Columns>

 

 

 

 

 

 

 

<Telerik:GridTemplateColumn HeaderText="S.No." HeaderStyle-Width="6%">

 

 

 

 

 

 

 

<ItemTemplate>

 

 

 

 

 

<%

 

# Container.DataSetIndex + 1%>

 

 

 

</ItemTemplate>

 

 

 

 

 

 

 

 

 

 

 

<Telerik:GridTemplateColumn HeaderText="Name" HeaderStyle-Width="10%">

 

 

 

 

 

 

 

<ItemTemplate>

 

 

 

 

 

<%

 

# Eval("Name") %>

 

 

 

 

 

 

 

</ItemTemplate>

 

 

 

 

 

 

 

</Telerik:GridTemplateColumn>

 

 

 

 

 

 

 

 

 

 

 

<Telerik:GridTemplateColumn HeaderStyle-Width="10%" HeaderText="Action">

 

 

 

 

 

 

 

<ItemTemplate>

 

 

 

 

 

 

 

<asp:LinkButton ID="lnkBtnDelete" runat="server" Text="Delete"

 

 

 

 

></asp:LinkButton>

 

 

 

 

 

 

 

</ItemTemplate>

 

 

 

 

 

 

 

</Telerik:GridTemplateColumn>

 

 

 

 

 

 

 

</Columns>

 

 

 

 

 

 

 

</MasterTableView>

 

 

 

 

 

 

 

</Telerik:RadGrid>

 

 

 

 

But the code is not working for me. i could not know what is that mistake. could u pls correct me?
we are using update panel in this page. No error or exception. but row is not deleting. i can not use deletecommandbutton because i have to use the concept for multiple rows delete. so what is the mistake?

Thanks,
Vetrivelmp.