In this Asp.net webform application, I had to add a jQuery dialog because the client wanted a custom popup confirmation box. I had to attach the dialog in the code behind because the dialog would only be added to the button in only certain rows of the GridView. When clicking on the button for the dialog to appear, it merely flashes on the screen leaving no time for the user to click a button. Thought it was the redirect at the end of the GridView_RowCommand event that was causing this, but once that was commented out, it still flashed onscreen. Think it has something to do with the postback functionality of the button itself, but can't seem to find away around this. Tried attaching the opening of the dialog via jQuery instead of the OnClientClick property in the code behind, but that didn't seem to work either. Can someone take a look at the code snippets to see what I'm doing wrong or suggest an alternate way to get what I need done? This is the only hurdle keeping me from finishing this project. Thank you so much for your help.
HTML for the Dialog:
<div style="display:none" id="dialog-warning" title="Out of Network">
<p class="CallOut">
<asp:Label ID="lblOutOfNetworkMsg" HtmlEncode="false" runat="server"></asp:Label>
</p>
<p style="text-align:center;">
<asp:Button style="width:200px; background-color:#E9967A; font-family:Arial; font-size:11px; font-weight:bold; border:2px solid black;" ID="btnBack" runat="server" OnClientClick="return true;" CausesValidation="false" /><br /><br />
<asp:Button style="width:200px; background-color:#E9967A; font-family:Arial; font-size:11px; font-weight:bold; border:2px solid black;" ID="btnProceed" runat="server" OnClientClick="return false;" CausesValidation="false" />
</p>
</div>
jQuery for styling the dialog, opening the dialog, and attaching it to the required buttons:
$(function () {
var dlg = $("#dialog-warning").dialog({
resizable: false,
height: 200,
width: 300,
modal: true,
autoOpen: false,
open: function (event, ui) {
$(".ui-dialog-titlebar-close", ui.dialog).hide();
}
}).prev(".ui-dialog-titlebar").css("background", "#A0A0A0").css("font-family", "Arial").css("font-weight", "bold").css("color", "white").css("text-align", "center").css("font-size", "11px");
dlg.parent().appendTo(jQuery("form:first"));
});
function OpenDialog() {
$("#dialog-warning").dialog("open");
}
$(document).ready(function () {
$('[outofnetwork=true]').click(function () {
OpenDialog();
})
})
GridView_RowDataBound event (adding attribute to identify which rows need the dialog attached, then use jQuery in $(document).ready() to attach function to open dialog):
else
{
e.Row.Cells[11].Style.Add("color", "#ff0000");
if (string.IsNullOrEmpty(ss.PhysicalServices))
{
//btn.OnClientClick = "OpenDialog();";
btn.Attributes.Add("outofnetwork", "true");
}
}
GridView_RowCommand event (code executed after button is clicked):
if (e.CommandName == "Navigate")
{
//CommandArgument comes in as XXX|YYY|ZZZ where XXX is the SiteID and YYY is the Network
//and ZZZ is the NetworkSort value. We parse out the values by splitting the CommandArgument on the pipe symbol
//Element 0 (zero) is the siteid and element 1 (one) is the network and element 2 (two) is the NetworkSort value.
oEventFlow.ClinicDetails.SiteID = Convert.ToInt32(e.CommandArgument.ToString().Split('|')[0].ToString());
oEventFlow.ClinicDetails.Network = Convert.ToInt32(e.CommandArgument.ToString().Split('|')[1].ToString());
oEventFlow.ClinicDetails.NetworkSort = Convert.ToInt32(e.CommandArgument.ToString().Split('|')[2].ToString());
Session[EventFlow.cEVENTFLOWSessionKey] = oEventFlow;
//Redir(oEventFlow.SiteSelectionRedirect);
//int selectedIndex = Convert.ToInt32(e.CommandArgument.ToString().Split('|')[3].ToString());
//GridViewRow selectedRow = gridResults.Rows[selectedIndex];
//if (selectedRow.Cells[11].Text != "OUT OF NETWORK")
//{
// Redir(oEventFlow.SiteSelectionRedirect);
//}
}
Hopefully this is clear what I'm trying to accomplish. If not, please comment and I will correct. Thanks again.
I had to use a little trickery to get around this problem using jQuery, another server control button, and a couple of hidden fields.
Code in the GridView_RowDataBound event handler that adds the class to the asp Buttons that meet the criteria.
if ((PhysicalNetworkTypes)ss.PhysicalNetworkType == PhysicalNetworkTypes.ContractedInNetwork)
{
e.Row.Cells[11].Style.Add("color", "#63d834");
}
else
{
e.Row.Cells[11].Style.Add("color", "#ff0000");
if (string.IsNullOrEmpty(ss.PhysicalServices))
{
btn2.CssClass += " outofnetwork";
}
}
I added an asp:Button to the same column as the original OneClickButton, which I ended up hiding. The new button would handle all of the front end functionality of determining when the dialog should display or not.
<ItemTemplate>
<cc2:OneClickButton Text='Select' CssClass='NavButton' runat='server' ID='btnGetReport' CausesValidation='false'
CommandName='Navigate' Width="100" style="display:none;" />
<asp:Button Text="Select" CssClass="NavButton network" runat="server" ID="btnDummy" CausesValidation="false" CommandName="Navigate" Width="100" OnClientClick="return false;" />
</ItemTemplate>
I added a hidden field that would hold the corresponding name of the OneClickButton and another hidden field that would hold a value of true if the Proceed to Next Step button in the dialog was clicked. The Back to Search Clinic button in the dialog would just close the dialog. The Proceed to Next Step button in the dialog would call the Click event of its corresponding OneClickButton that's held in the btnToClick hidden field.
<input type="hidden" id="btnProceedClicked" runat="server" />
<div style="display:none" id="divWarning" title="Out of Network">
<p class="CallOut">
<asp:Label ID="lblOutOfNetworkMsg" HtmlEncode="false" runat="server"></asp:Label>
</p>
<p style="text-align:center;">
<asp:Button style="width:200px; background-color:#E9967A; font-family:Arial; font-size:11px; font-weight:bold; border:2px solid black;" ID="btnBack" runat="server" OnClientClick="$('#divWarning').dialog('close');" CausesValidation="false" /><br /><br />
<Button style="width:200px; background-color:#E9967A; font-family:Arial; font-size:11px; font-weight:bold; border:2px solid black;" ID="btnProceed" CausesValidation="false">Proceed to Next Step</Button><input type="hidden" id="btnToClick" />
</p>
</div>
In the $(document).ready() is where I grab the ID of the OneClickButton by replacing the name of the Asp.net Button and placing that value in the btnToClick hidden field. The dialog is shown only for the asp Buttons that have a class of outofnetwork which is set in the GridView_RowDataBound event handler in the code behind. Otherwise, the click() method is called for the corresponding OneClickButton. Also, if the Proceed to Next Step button was clicked in the dialog, a value of true is stored in the btnProceedClicked hidden field. This value is used in the GridView_RowCommand event handler to determine if the redirect should happen or not.
$(function () {
var dlg = $("#divWarning").dialog({
resizable: false,
height: 200,
width: 300,
modal: true,
autoOpen: false,
open: function (event, ui) {
$(".ui-dialog-titlebar-close", ui.dialog).hide();
}
}).prev(".ui-dialog-titlebar")
.css("background", "#A0A0A0")
.css("font-family", "Arial")
.css("font-weight", "bold")
.css("color", "white")
.css("text-align", "center")
.css("font-size", "11px");
dlg.parent().appendTo(jQuery("form:first"));
});
$(document).ready(function () {
$('.network').click(function () {
console.log(this);
var btnID = '#' + $(this).attr("id").replace("btnDummy", "btnGetReport");
if ($(this).hasClass('outofnetwork')) {
$('#btnToClick').val(btnID);
$("#divWarning").dialog("open");
}
else {
$(btnID).click();
}
return false;
});
$('#btnProceed').on('click', function () {
console.log($('#btnToClick').val());
$('#ctl00_ContentPlaceHolder1_btnProceedClicked').val("true");
$($('#btnToClick').val()).click();
});
})
Code added in the GridView_RowCommand event handler to determine if the redirect should happen or not.
//Grabs the index from the end of the CommandArgument and uses to get the selected row in the GridView.
int selectedIndex = Convert.ToInt32(e.CommandArgument.ToString().Split('|')[3].ToString());
GridViewRow selectedRow = gridResults.Rows[selectedIndex];
//Redirects if an "IN NETWORK" row was selected or and "OUT OF NETWORK" row was selected and the user clicked on Proceed to Next Step button in the popup dialog.
if (selectedRow.Cells[11].Text != "OUT OF NETWORK" || (selectedRow.Cells[11].Text == "OUT OF NETWORK" && btnProceedClicked.Value == "true"))
{
Redir(oEventFlow.SiteSelectionRedirect);
}