Call Javascript After Delete via GridButtonColumn

[Jeremy Yoder]

My grid has a Delete GridButtonColumn, defined as follows...

<telerik:GridButtonColumn CommandName="Delete"
    ConfirmText="Are you sure you want to delete the selected item?" Text="Delete"
    UniqueName="Delete">
</telerik:GridButtonColumn>

I get the Cofirmation Text, and I delete the row server-side with this...

Protected Sub RadGridPO_DeleteCommand(ByVal source As Object, ByVal e As Telerik.Web.UI.GridCommandEventArgs) Handles RadGridPO.DeleteCommand
    Dim item As GridEditableItem = CType(e.Item, GridEditableItem)
    Dim strKey As String = item.OwnerTableView.DataKeyValues(e.Item.ItemIndex).Item("PODetailKey").ToString
    Dim changedRow As DataRow() = POGridData.Select("PODetailKey = " & strKey)
    If changedRow.Length <> 0 Then
        changedRow(0).Delete()
    End If
End Sub

But I need to call a javascript function afterwards. I tried using OnRowDeleted in the RadGrid's ClientSettings, but it doesn't work...

<ClientSettings>
    <Selecting AllowRowSelect="True" />
    <ClientEvents OnRowSelected="RowSelected" OnRowDeleted="RowDeleted" />
</ClientSettings>

(Though it doesn't give me an error either.) How can I call a javascript function after the row is deleted?

[Princy]

Hello Jeremy,

OnRowDeleted Client event is fired when you have GridClientDeleteColumn and in this case the server Delete will not execute. So if you want to call a Java Script function after deletting, you can use RegisterStartupScript Method in DeleteCommand. Check out the following code snippet.

VB.NET:

Protected Sub RadGrid1_DeleteCommand(source As Object, e As GridCommandEventArgs)
    Dim item As GridEditableItem = CType(e.Item, GridEditableItem)
    Dim strKey As String = item.OwnerTableView.DataKeyValues(e.Item.ItemIndex).Item("PODetailKey").ToString
    Dim changedRow As DataRow() = POGridData.Select("PODetailKey = " & strKey)
    If changedRow.Length <> 0 Then
        changedRow(0).Delete()
    End If
    ScriptManager.RegisterStartupScript(Me.Page, Me.Page.[GetType](), "key", "afterDelete();", True)
End Sub

Java Script:

 <script type="text/javascript">
     function afterDelete()
     {
       alert("RowDeleted");
      }
 </script>

Thanks,
Princy.

[Jeremy Yoder]

Thanks for the response. That works in principle, but for some reason in the afterDelete function, I can't reference the grid. For instance, this line sets the grd variable to null...

var grd = $find("<%=RadGridPO.ClientID%>");

... even though it works throughout the rest of my javascript. Any idea why I can't access it in this function?

However, maybe I'm going about this the wrong way. Can I use the Delete GridButtonColumn to delete the given row from my dataset on the client-side and not bother going server-side at all? (In which case, I assume I would need to rebind.)

[Princy]

Hello Jeremy,

The RadControls (ASP.NET Ajax version) as all ajax objects are rendered last on the page. Therefore you need to ensure that the control is rendered on the page before executing the function. To do this you should add a load handler and execute your function as shown below.

VB.NET:

 Protected Sub RadGrid1_DeleteCommand(source As Object, e As GridCommandEventArgs)
    Dim item As GridEditableItem = CType(e.Item, GridEditableItem)
    Dim strKey As String = item.OwnerTableView.DataKeyValues(e.Item.ItemIndex).Item("PODetailKey").ToString
    Dim changedRow As DataRow() = POGridData.Select("PODetailKey = " & strKey)
    If changedRow.Length <> 0 Then
        changedRow(0).Delete()
    End If
   ScriptManager.RegisterStartupScript(Me.Page, Me.Page.[GetType](), "key", "Sys.Application.add_load(afterDelete);", True)
 End Sub

Java Script:

 <script type="text/javascript">
   function afterDelete()
    {
      var grd = $find("<%=RadGrid1.ClientID%>");
      alert("RowDeleted");
    }
  </script>

Thanks,
Princy.

[Jeremy Yoder]

It seemed to work, but I ran into snags, such as issues with passing parameters, and it executes multiple times as I delete more rows. So instead, how can I use the Delete GridButtonColumn to call a function on the client-side, thereby avoiding server-side completely?

[Shinu]

Hello,


You can invoke the Delete command from client-side by using 'fireCommand' method.
fireCommand

Check whether it suits your scenario.


-Shinu.

[Jeremy Yoder]

I didn't know about the fireCommand, so that's good to know. But I'm not following how to use it. How do I set up my grid's delete button to kick off my own specific client-side function, so that I can use the fireCommand with the required row index? (And wouldn't the delete button have already deleted the row, or what am I missing?)