delete row client side in batch mode

9 posts, 0 answers
  1. Ali
    Ali avatar
    21 posts
    Member since:
    Jan 2014

    Posted 13 Jun 2014 Link to this post

     hi 
    i have grid in batch mode and a button . in button i want delete selected row in grid in client side without send request to server and post back page.
    what should i do?
    thank you
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 13 Jun 2014 in reply to Ali Link to this post

    Hi Ali,

    Please try to use the GridClientDeleteColumn to delete a row from client side without making additional round trip to the server. Please take a look into this help documentation for further help.

    Thanks,
    Shinu.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Ali
    Ali avatar
    21 posts
    Member since:
    Jan 2014

    Posted 13 Jun 2014 Link to this post

    thanks for answer
    i have another question can i do it with a button out of grid or not?
  5. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 16 Jun 2014 in reply to Ali Link to this post

    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.
  6. Grinnell
    Grinnell avatar
    5 posts
    Member since:
    Aug 2014

    Posted 02 Mar 2015 Link to this post

    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.
  7. Angel Petrov
    Admin
    Angel Petrov avatar
    1006 posts

    Posted 05 Mar 2015 Link to this post

    Hi,

    Please share with us the markup and code-behind of the page so we could examine the setup and research what might be causing this behavior.

    Additionally please try deleting the records using the deleteRecord method of the batch editing manager and test whether this resolves the problem.

    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.

     
  8. Grinnell
    Grinnell avatar
    5 posts
    Member since:
    Aug 2014

    Posted 11 Mar 2015 in reply to Angel Petrov Link to this post

    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.
  9. Angel Petrov
    Admin
    Angel Petrov avatar
    1006 posts

    Posted 16 Mar 2015 Link to this post

    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.

     
  10. Grinnell
    Grinnell avatar
    5 posts
    Member since:
    Aug 2014

    Posted 19 Mar 2015 in reply to Angel Petrov Link to this post

    Hi Angel - thanks for your reply. I ran your sample site, and got the same error message I was getting before. Then I installed the latest version of the controls, and ran the sample app again, and did NOT get the error. So it looks like that may be the answer. Now I have to build my site with the new version and see what happens. That may take me a few more days to get around to - I'll let you know how it turns out. Thanks again.

    Grinnell
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017