First, take a button in a div tag as shown below.
<div style="visibility:hidden">
<asp:Button id="btnSample" runat="server"/>
</div>
Now in the gridview we use the Commandfields to display the Edit,Update cancel button
<asp:CommandField ButtonType="Button" ShowEditButton="true" ShowCancelButton="true"
EditText="Select" UpdateText="Update" CancelText="Cancel" HeaderText="Confirm">
<HeaderStyle Font-Size="Smaller" Font-Bold="true" HorizontalAlign="Left" Width="45%" />
<ItemStyle Font-Size="Smaller" HorizontalAlign="Left" Width="45%" />
</asp:CommandField>
Next, we assign the targetcontrolid of MPE equal to the button hidden in div tag.
<ajax:ModalPopupExtender ID="MPEAward" runat="server" TargetControlID="btnSample" PopupControlID="pnlSave"
BackgroundCssClass="modalBackground" DropShadow="true" CancelControlID="btnCancel"
Drag="true">
</ajax:ModalPopupExtender>
In the code behind
In gridview rowdatabound, we find the Update button present in gridview and invoke a javascript ShowPopUp()
if (e.Row.RowType == DataControlRowType.DataRow)
{
if ((e.Row.RowState & DataControlRowState.Edit) > 0)
{
Button btnUpdate = (Button)e.Row.Cells[6].Controls[0];
btnUpdate.OnClientClick = "return ShowPopup();";
}
}
In Javascript,
function ShowPopup() {
$('#<%= btnSample.ClientID %>').click();
return false;
}
Finally, the page needs to return false in the javascript so as to make the modalpopup present on the page.