Can I place button Target Control ID outside the Update Panel of Modal Popup in asp.net?

Question

Let me explain my problem precisely.

I have a button inside grid view. What I want to do is to show a modal popup when I click that button.

Since, I cannot place the modal popup extender inside the gridview I am placing it outside of gridview. Because I am placing it outside the gridview the gridview button has no access to it. For this I created a dummy button outside the gridview and calling the modal popup from the click event of Gridview button.

Let me show you my Grid view(Its telerik)

<telerik:RadGrid ID="GridView2" runat="server" AutoGenerateColumns="false" Width="400"
                    GridLines="None" >
            <MasterTableView >
                    <Columns>
                    <telerik:GridBoundColumn DataField="fname" HeaderText="First Name" />
                    <telerik:GridBoundColumn DataField="mname" HeaderText="Middle Name" />
                    <telerik:GridBoundColumn DataField="lname" HeaderText="Last Name" />
                    <telerik:GridTemplateColumn>
                    <ItemTemplate>
                    <asp:CheckBox ID="checkselect" runat="server" />
                    </ItemTemplate>
                    <HeaderTemplate>
                    <asp:Button ID="Button4" runat="server" Text="Remove"  CommandName="Split" OnClick="Button4_Click" />
                    </HeaderTemplate>
                    </telerik:GridTemplateColumn>
                    </Columns>
                    </MasterTableView >
             </telerik:RadGrid>
             </div>
             </td>
             </tr>
 </ItemTemplate>
 </telerik:GridTemplateColumn>
 </Columns>
 </MasterTableView>
 </telerik:RadGrid>

Now my modal popup

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="Button5" runat="server" Text="Button" style="display:none"/>
<asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="Button5" CancelControlID="Button1" PopupControlID="Panel1">
 </asp:ModalPopupExtender>
   <asp:Panel ID="Panel1" runat="server" Height="65px" style="display:none" >
    <p>
    Thank You for Removing records
    </p>
    </asp:TextBox> <asp:Button ID="Button3" runat="server" Text="Submit"  />
    <asp:Button ID="Button1" runat="server" Text="Cancel" />
     </asp:Panel>
  </ContentTemplate>
  </asp:UpdatePanel>

The problem is when I am clicking the gridview button( Button4) it is throwing me Invalid Postback error. I think thats because I am placing the Modalpopup inside update panel and gridview outside. Can someone tell me how to deal with this issue? I cannot place the Gridview inside the update panel because it is stopping the button click event which is causing the modal popup extender to show.

Button Click Event:

 protected void Button4_Click(object sender, EventArgs e)
    {
    ModalPopupExtender1.Show();
    }

Answer 1

Update: here is how you display confirmation message and collect user input when a button is clicked.

Then collect the selected checkbox Id from the code behind.

Note that you need to assign PrimaryKey/UniqueKey to DataKeyName of RadGrid.

<asp:ScriptManager runat="server" ID="ScriptManager"></asp:ScriptManager>
<telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="false" 
    Width="400" GridLines="None" OnNeedDataSource="RadGrid1_NeedDataSource">
    <MasterTableView DataKeyNames="Id">
        <Columns>
          <telerik:GridBoundColumn DataField="FirstName" HeaderText="First Name" />
          <telerik:GridBoundColumn DataField="MiddelName" HeaderText="Middle Name" />
          <telerik:GridBoundColumn DataField="LastName" HeaderText="Last Name" />
          <telerik:GridTemplateColumn>
                <ItemTemplate>
                    <asp:CheckBox ID="SelectCheckBox" runat="server" />
                </ItemTemplate>
                <HeaderTemplate>
                    <asp:Button ID="Button4" runat="server" Text="Remove"
                        OnClientClick="return showWindow();" />
                </HeaderTemplate>
            </telerik:GridTemplateColumn>
        </Columns>
    </MasterTableView>
</telerik:RadGrid>
<telerik:RadWindow ID="RadWindow1" runat="server" Width="400" Height="200">
    <ContentTemplate>
        Enter a reason to delete:<br />
        <asp:TextBox runat="server" ID="ReasonTextBox" TextMode="MultiLine" Rows="5" 
            Width="350" /><br />
        <asp:Button runat="server" ID="DeleteButton" Text="Delete" 
            OnClick="DeleteButton_Click" />
    </ContentTemplate>
</telerik:RadWindow>
<script type="text/javascript">
    function showWindow() {
        var wnd = $find("<%=RadWindow1.ClientID %>");
        wnd.show();
        return false;
    }
</script>

public class User
{
    public int Id { get; set; }
    public string FirstName { get; set; }
    public string MiddelName { get; set; }
    public string LastName { get; set; }
}

protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
{
    RadGrid1.DataSource = new List<User>()
    {
        new User {Id = 1, FirstName = "Jon", LastName = "Doe"},
        new User {Id = 2, FirstName = "Eric", LastName = "Newton"},
        new User {Id = 3, FirstName = "One", LastName = "Two"},
    };
}

protected void DeleteButton_Click(object sender, EventArgs e)
{
    var ids = new List<int>();
    foreach (GridDataItem item in RadGrid1.Items)
    {
        var selectCheckBox = item.FindControl("SelectCheckBox") as CheckBox;
        if (selectCheckBox.Checked)
        {
            int id = Convert.ToInt32(item.GetDataKeyValue("Id"));
            ids.Add(id);
        }
    }
}