This is a migrated thread and some comments may be shown as answers.

delete row client side in batch mode

8 Answers 318 Views

Grid

This is a migrated thread and some comments may be shown as answers.

8 Answers, 1 is accepted

answered on 16 Jun 2014, 05:02 AM

Hi Ali,

Please try the sample code snippet to delete the selected row of a RadGrid onClientClick of an External button.

ASPX:

<telerik:RadGrid ID="rgrdEmployees" DataSourceID="SqlDataSource1" runat="server"

AllowPaging="true" GridLines="None" Height="300px">

<MasterTableView TableLayout="Fixed" ClientDataKeyNames="EmployeeID" EditMode="Batch">

</MasterTableView>

<ClientSettings>

<Selecting AllowRowSelect="true"></Selecting>

<ClientEvents OnRowSelected="rowSelected"></ClientEvents>

<Scrolling AllowScroll="true" UseStaticHeaders="true"></Scrolling>

</ClientSettings>

</telerik:RadGrid>

<asp:Button ID="btnDeleteRow" Width="90px" OnClientClick="if(!confirm('Are you sure you want to delete this employee?'))return false; deleteCurrent(); return false;"

Text="Delete" runat="server">

</asp:Button>

JavaScript:

var currentRowIndex = 0;

function rowSelected(sender, args) {

currentRowIndex = args.get_gridDataItem().get_element().rowIndex;

}

function deleteCurrent() {

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

var dataItems = tableView.get_dataItems();

if (currentRowIndex != 0) {

tableView.deleteItem(dataItems[currentRowIndex - 1].get_element());

}

else {

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

}

Thanks,
Shinu.

answered on 02 Mar 2015, 09:58 PM

Hello - I have the same situation as the original poster; I need to delete a selected row of a RadGrid in batch mode when an external button is clicked. I tried the code posted by Shinu, and it works - as long as I only delete one row. But if I delete more than one row, and then post the page back, I get this error:

Specified argument was out of the range of valid values. Parameter name:
ItemHierarchicalIndex at Telerik.Web.UI.GridItemCollection.get_Item(String
hierarchicalIndex) at Telerik.Web.UI.RadGrid.RaisePostDataChangedEvent() at
Telerik.Web.UI.RadCompositeDataBoundControl.System.Web.UI.IPostBackDataHandler.RaisePostDataChangedEvent()
at System.Web.UI.Page.RaiseChangedEvents() at
System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint,
Boolean includeStagesAfterAsyncPoint)

How can I get around this error? Thanks.

answered on 11 Mar 2015, 08:29 PM

Sorry it took me so long to get back to this. So much to do, so little time...

Here's a very stripped down version of my page:

ASPX:

<%@ Page Language="vb" AutoEventWireup="false" Codebehind="myform.aspx.vb" Inherits="WebApplication1.myform" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

<title>test</title>

<link href="CDBGSkin/Grid.CDBGSkin.css" rel="stylesheet" />

<script type="text/javascript">

function addNewItem(id) {

$find(id).get_masterTableView().showInsertItem();

}

function deleteItem(id) {

var rg = $find(id);

var tbl = rg.get_masterTableView();

var dataItems = tbl.get_dataItems();

var itm = dataItems[currentRowIndex-1].get_element();

rg.get_batchEditingManager().deleteRecord(tbl,itm);

}

var currentRowIndex = -1;

function rowSelected(sender, args) {

currentRowIndex = args.get_gridDataItem().get_element().rowIndex;

}

function saveMyChanges(btn) {

var rg = $find('rgNewFunding');

var bem = rg.get_batchEditingManager();

var tv = rg.get_masterTableView();

bem.saveTableChanges(tv);

}

</script>

</head>

<body>

<form id="Form1" method="post" runat="server">

<telerik:RadScriptManager ID="rsm" runat="server" />

<telerik:RadGrid ID="rgNewFunding" runat="server" AutoGenerateColumns="false" Skin="CDBGSkin" EnableEmbeddedSkins="false" >

<ClientSettings>

<ClientEvents OnRowSelected="rowSelected" />

<Selecting AllowRowSelect="true" />

</ClientSettings>

<MasterTableView EditMode="Batch">

<Columns>

<telerik:GridBoundColumn UniqueName="CostCat" HeaderText="Cost Category" DataField="CostCat" />

<telerik:GridNumericColumn UniqueName="Amt" DataField="Amt" HeaderText="Amount" NumericType="Currency" DataFormatString="{0:C}" />

</Columns>

</MasterTableView>

</telerik:RadGrid>

<img id="imgNewFundingAdd" runat="server" alt="Add a record" src="CDBGSkin\Grid\add_up.gif"

onclick="addNewItem('rgNewFunding')" onmouseover="this.style.cursor = 'pointer';" />

<img id="imgNewFundingDel" runat="server" alt="Delete current record" src="CDBGSkin\Grid\del_up.gif"

onclick="deleteItem('rgNewFunding')" onmouseover="this.style.cursor = 'pointer';" />

<asp:Button ID="butSave" Text="Save" runat="server" OnClientClick="saveMyChanges('butSave');" />

</form>

</body>

</html>

VB:

Imports System.Data.SqlClient

Imports Telerik.Web.UI

Partial Class myform

Inherits System.Web.UI.Page

#Region " Web Form Designer Generated Code "

'This call is required by the Web Form Designer.

<System.Diagnostics.DebuggerStepThrough()> Private Sub InitializeComponent()

End Sub

'NOTE: The following placeholder declaration is required by the Web Form Designer.

'Do not delete or move it.

Private designerPlaceholderDeclaration As System.Object

Private Sub Page_Init(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Init

'CODEGEN: This method call is required by the Web Form Designer

'Do not modify it using the code editor.

InitializeComponent()

End Sub

#End Region

Protected Sub BatchEditCommand(sender As Object, e As GridBatchEditingEventArgs) Handles rgNewFunding.BatchEditCommand

Dim dt As New DataTable

Dim dr As DataRow

Dim rg As RadGrid = CType(sender, RadGrid)

If rg IsNot Nothing Then

dt = LoadProjDescrBudgetDataTable(5821)

End If

For Each cmd As GridBatchEditingCommand In e.Commands

Select Case cmd.Type

Case GridBatchEditingCommandType.Insert

dt.Rows.Add({cmd.NewValues("CostCat"), cmd.NewValues("Amt")})

Case GridBatchEditingCommandType.Delete

For Each dr In dt.Rows

If dr("CostCat") = cmd.OldValues("CostCat") Then

dr.Delete()

End If

Next

Case GridBatchEditingCommandType.Update

For Each dr In dt.Rows

If dr("CostCat", DataRowVersion.Original) = cmd.OldValues("CostCat") Then

dr("CostCat") = cmd.NewValues("CostCat")

dr("Amt") = cmd.NewValues("Amt")

End If

Next

End Select

Next cmd

rg.DataSource = dt

rg.Rebind()

End Sub

Private Sub rgNeedDataSource(sender As Object, e As GridNeedDataSourceEventArgs) Handles rgNewFunding.NeedDataSource

CType(sender, RadGrid).DataSource = LoadProjDescrBudgetDataTable(5821)

End Sub

Public Shared Function LoadProjDescrBudgetDataTable(ByVal exaNo As Integer) As DataTable

Dim lResult As DataTable = Nothing

Dim cn As New SqlConnection("Server=xxxxx;User ID=sa;Password=xxxxx;Initial Catalog=eProject")

Dim da1 As New SqlDataAdapter("prptExABgtLinesNew", cn)

da1.SelectCommand.Connection = cn

da1.SelectCommand.CommandType = CommandType.StoredProcedure

da1.SelectCommand.Parameters.AddWithValue("@ExA", exaNo)

da1.SelectCommand.Parameters.AddWithValue("@SortByCCC", 1)

cn.Open()

da1.SelectCommand.ExecuteNonQuery()

lResult = New DataTable()

da1.Fill(lResult)

cn.Close()

Return lResult

End Function

End Class

I've x'ed out our actual server name and password, so you'll need to insert your own data retrieval method.

As I said, this is extremely stripped down. I haven't even bothered to include database update code, since the error happens before we get there. So when you click the Save button, the original data simply gets restored.

If you run this code, you'll find that you can edit the values in any number of records, and you can add any number of records. You can also delete one record, but only one. If you delete more than one record, and click Save, you get the error message I described in my earlier post.

I hope you can shed some light on this. Thank you for your time.

answered on 16 Mar 2015, 12:53 PM

SampleWebSite.zip

Hi,

Using the provided code I have assembled a sample web site but was not able to reproduce the problem. Please examine the attachment and let us know what differs in your case. Additionally please test it on your end and check whether you are able to replicate the issue.

Have in mind that I have tested the test sample using the latest version of the controls. If you are using an older one I recommend upgrading and testing the real application again.

Regards,
Angel Petrov
Telerik

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

delete row client side in batch mode

8 Answers, 1 is accepted