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

Call Javascript After Delete via GridButtonColumn

6 Answers 302 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Jeremy Yoder
Top achievements
Rank 1
Jeremy Yoder asked on 22 Jun 2010, 07:12 PM

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 ObjectByVal 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?

6 Answers, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 2
answered on 23 Jun 2010, 06:57 AM
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.








0
Jeremy Yoder
Top achievements
Rank 1
answered on 23 Jun 2010, 02:54 PM

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.)
0
Princy
Top achievements
Rank 2
answered on 24 Jun 2010, 11:54 AM
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.
0
Jeremy Yoder
Top achievements
Rank 1
answered on 24 Jun 2010, 04:34 PM

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?
0
Shinu
Top achievements
Rank 2
answered on 25 Jun 2010, 01:08 PM
Hello,


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

Check whether it suits your scenario.


-Shinu.
0
Jeremy Yoder
Top achievements
Rank 1
answered on 25 Jun 2010, 04:38 PM

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?)
Tags
Grid
Asked by
Jeremy Yoder
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 2
Jeremy Yoder
Top achievements
Rank 1
Shinu
Top achievements
Rank 2
Share this question
or