Handle multiple delete events from grid with single events handlers asp.net

Question

I have two grid which contains delete button and I am using RadAjaxManager which will fire ajax request from client side to server side OnajaxRequest which contain event handlers and that event handler will call my delete event like below:

<telerik:RadAjaxManager ID="RadAjaxManager2" runat="server" meta:resourcekey="RadAjaxManager1Resource1" OnAjaxRequest="RadAjaxManager2_AjaxRequest">
                <AjaxSettings>
                    <telerik:AjaxSetting AjaxControlID="RadAjaxManager2">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="Grid1" />
                            <telerik:AjaxUpdatedControl ControlID="Grid2" />
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                </AjaxSettings>
            </telerik:RadAjaxManager>

 <telerik:RadGrid ID="Grid1" runat="server">
  ---
  ---
  <telerik:GridTemplateColumn HeaderText="Action" UniqueName="Action" HeaderStyle-Width="130px">
                                        <ItemTemplate>
                                     <asp:ImageButton runat="server" ID="Remove1" Text="Delete" OnClientClick='<%# Eval("Id", "javascript:return DeleteData(\"{0}\");") %>' />
                                        </ItemTemplate>
                                    </telerik:GridTemplateColumn>

 <telerik:RadGrid ID="Grid2" runat="server">
  ---
  ---
  <telerik:GridTemplateColumn HeaderText="Action" UniqueName="Action" >
                                        <ItemTemplate>
                                     <asp:ImageButton runat="server" ID="Remove2" Text="Delete" OnClientClick='<%# Eval("Id", "javascript:return DeleteData(\"{0}\");") %>' />
                                        </ItemTemplate>
                                    </telerik:GridTemplateColumn>



 function DeleteData(Id) {
   var ajaxManager = null;
   var action = 'Remove';
   ajaxManager = $find("ctl00_cphMain_RadAjaxManager2");
   var arg = action + "," + Id; //Remove,1(1 indicates id of record to remove from grid)
   ajaxManager.ajaxRequest(arg);This line will fire below method.
  }



public event EventHandler RemoveEvent;
protected void RadAjaxManager2_AjaxRequest(object sender, AjaxRequestEventArgs e)
        {
            var argument = (e.Argument);
            var stringArray = argument.Split(",".ToCharArray());//[0]="Remove",[1]=1
            if (stringArray[0] == "Remove")
            {
                RemoveEvent(stringArray[1], null);
            }
        }

After this it will call this:

protected void Page_Load(object sender, EventArgs e)
        {
            this.RemoveEvent += Remove1_Click;
            this.RemoveEvent += Remove2_Click;
            if (!IsPostBack)
            {
            }
         }

protected void Remove1_Click(object sender, object obj)
        {
        }
protected void Remove2_Click(object sender, object obj)
        {
        }

Problem here is both this events are calling but I just want to call individual delete events on click of Remove1 and Remove2 buttons.

Answer 1

You do not need to subscribe to events in your code-behind i.e. no need of this.RemoveEvent+=. Instead write a single method called RemoveRecord(buttonId, recordId). I have explained this approach in a step-by-step manner as below.

1. First change the markup for OnClientClick. Note that we will be passing the Id of the record to delete as well as the server-side id of the button being clicked to the JavaScript function DeleteData.

   OnClientClick='<%# Eval("Id", "DeleteData('{0}', 'Remove1'); return false;") %>'   
   
   OnClientClick='<%# Eval("Id", "DeleteData('{0}', 'Remove2'); return false;") %>'
   

2. Change the JavaScript Delete method. Note that we are now passing the server-side button id, so that in code-behind we can easily know which button was clicked.

   function DeleteData(Id, buttonId) {
     var ajaxManager = null;
     ajaxManager = $find("<%=RadAjaxManager2.ClientID%>");
     var arg = buttonId + "," + Id; //Remove1,1 (1 indicates id of record to remove from grid)
     ajaxManager.ajaxRequest(arg);//This line will fire below method.
   }
   

3. In code behind, include a single RemoveRecord method and there is no need of creating event handlers as you have done in your original code. So you should remove the following methods from your original code: Remove1_Click and Remove2_Click and also remove the code in Page_Load that subscribes to click events.

   protected void RadAjaxManager2_AjaxRequest(object sender, AjaxRequestEventArgs e)
   {
    var stringArray = e.Argument.Split(",".ToCharArray());//[0]="Remove1" or "Remove2",[1]=id of record to delete
    RemoveRecord( stringArray[0], stringArray[1]);
   }
   
   //the method below will delete data
   private void RemoveRecord( buttonId, recordId) 
   {
    if(buttonId== "Remove1")
     {
       //code to delete record with id of recordId
     } 
    else if ( buttonId == "Remove2")
     {
       //code to delete record with id of recordId
     }
   }
   

Another Approach

If you have to have RadAjaxManager2_AjaxRequest in parent page and delete methods in child page, then add the following code at appropriate places as mentioned in their titles. But please note that the markup changes and JavaScript function changes mentioned in above approach also apply to this approach.

In Parent Page (just outside the class)

public class RemoveEventArgs : EventArgs
{
public RemoveEventArgs ( string buttonId, string recordId)
{
   this.ButtonId = buttonId;
   this.RecordId = recordId;
}
    public string ButtonId {get;set;}
    public string RecordId {get;set;}
}

Also, in same parent page change the method RadAjaxManager2_AjaxRequest to what is given below.

In Parent Page (change this existing method)

 protected void RadAjaxManager2_AjaxRequest(object sender, AjaxRequestEventArgs e)
 {
            var stringArray = e.Argument.Split(",".ToCharArray());//[0]="Remove1",[1]=1 OR [0]="Remove2", [1] = 212
            if (stringArray[0] == "Remove1"  || stringArray[0] == "Remove2")
            {
                 if(RemoveEvent!=null) 
                 {
                   RemoveEvent(this, new RemoveEventArgs(stringArray[0], stringArray[1]));
                 }
            }
 }

In Child Page (change existing methods)

protected void Remove1_Click(object sender, RemoveEventArgs obj)
  {
    if( obj!=null && obj.ButtonId == "Remove1") 
    {
      string recordId = obj.RecordId;
      //write your code for deleting


    }
  }
protected void Remove2_Click(object sender, RemoveEventArgs obj)
 {
  if( obj!=null && obj.ButtonId == "Remove2") 
    {
      string recordId = obj.RecordId;
      //write your code for deleting


    }
 }

Answer 2

you simply just use the RadGrid_ItemCommand and pass the command argument with del button and change the command name for both remove her's a sample code for

<telerik:GridTemplateColumn HeaderText="Actions">
                                        <ItemTemplate>
                                            <asp:ImageButton ID="Button3" Style="width: 14px" Height="14px" ImageUrl="~/Images/Erase.png" runat="server" Text="Delete1" OnClientClick="return confirm('Are you sure you want to delete this item?');" CommandName="Delete1" CommandArgument='<%# Eval("Pid") %>' />
                                            &nbsp &nbsp
 <asp:ImageButton ID="Button3" Style="width: 14px" Height="14px" ImageUrl="~/Images/Erase.png" runat="server" Text="Delete2" OnClientClick="return confirm('Are you sure you want to delete this item?');" CommandName="Delete2" CommandArgument='<%# Eval("Pid") %>' />

                                        </ItemTemplate>
                                    </telerik:GridTemplateColumn>



    protected void RadGrid1_ItemCommand(object sender, GridCommandEventArgs e)
{
    if (e.CommandName == "Delete1")
    {

    }
if (e.CommandName == "Delete2")
    {

    }

}