I'm hoping someone can help me figure this out. I've looked all around have yet to find an example that will help me. I have a feeling that I'm super close on this...
I have an asp:gridview with a linkbutton at the end of each row. I need to do a confirmation dialog before running the onrowcommand. Here is the code I have to do it... What am I missing?
function confirmProcessing(event) {
event.preventDefault();
$("#dialog")
.dialog({
title: "Confirm Transaction",
buttons: {
"Process": function () {
$("#dialog").dialog('close');
},
Cancel: function() {
$("#dialog").dialog('close');
return false;
}
},
close: function() {
return false;
},
modal: true,
appendTo: "form"
})
.parent()
.css('z-index', '1005');
}
aspx code
<div class="row">
<asp:GridView runat="server" ID="ccList" CssClass="table table-striped table-responsive" ShowHeader="True" AutoGenerateColumns="False" OnRowDataBound="ccList_OnRowDataBound" OnRowCommand="ccList_OnRowCommand">
<Columns>
<asp:BoundField DataField="Street" ItemStyle-CssClass="Street" HeaderText="Street"/>
<asp:BoundField DataField="ZipCode" ItemStyle-CssClass="ZipCode" HeaderText="Zip"/>
<asp:BoundField DataField="MB4P" ItemStyle-CssClass="MB4P" HeaderText="MB4P"/>
<asp:BoundField DataField="MB4S" ItemStyle-CssClass="MB4S" HeaderText="MB4S"/>
<asp:BoundField DataField="BAL" ItemStyle-CssClass="BAL" HeaderText="BAL"/>
<asp:TemplateField>
<ItemTemplate>
<asp:LinkButton runat="server" ID="btnProcess" OnClientClick="confirmProcessing(event);" Text="Process Payment" CommandName="Process" CommandArgument="<%# ((GridViewRow) Container).RowIndex %>"/>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
<div id="dialog" style="display:none">
<b>Are you sure you want to process this record?</b>
</div>
OnRowCommand code
protected void ccList_OnRowCommand(object sender, GridViewCommandEventArgs e)
{
if (e.CommandName == "Process")
{
//Do the processing stuff here after confirm dialog.
}
}
If I remove the preventDefault it fires through to the OnRowCommand which is expected. I just don't know how to get the Process button in the modal dialog to fire off the command... what am I missing here?
Thanks in advance.
The OnClientClick
property of the LinkButton can be set in the RowDataBound
event handler of the GridView, with the UniqueID
of the button as the argument to confirmProcessing
:
protected void ccList_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
LinkButton btnProcess = e.Row.FindControl("btnProcess") as LinkButton;
btnProcess.OnClientClick = string.Format("return confirmProcessing('{0}');", btnProcess.UniqueID);
...
}
}
The Javascript event handler can then be modified as follows:
function confirmProcessing(btnUniqueID) {
$("#dialog").dialog({
title: "Confirm Transaction",
buttons: {
"Process": function () {
$("#dialog").dialog('close');
__doPostBack(btnUniqueID, '');
},
Cancel: function () {
$("#dialog").dialog('close');
return false;
}
},
close: function () {
return false;
},
modal: true,
appendTo: "form"
}).parent().css('z-index', '1005');
return false;
}
When the LinkButton is clicked, the dialog is displayed and the function returns false
to cancel the initial postback. If the dialog is then closed by clicking on Process
, __doPostBack
is called with the UniqueID
of the LinkButton to cause the postback.
Note: I thought that the UniqueID
could be retrieved in client code with the help of the name
attribute. It works for the Button control but not for the LinkButton. That is why I suggest setting the OnClientClick
property in code-behind.