Sunday, March 11, 2012

Location of ModalPopups CancelControl...

Hi Rich,

Yes you can definately have the cancel button inside the user control you want to display in modalpopup. Follow these steps -

1. Add an BehaviorID to your ModalPopupExtender and remove theOkCancelID andOkCancelScript, like this -

<ajaxToolkit:ModalPopupExtenderID="ModalPopupExtender1"runat="server"TargetControlID="target"BehaviorID="AssignModalPopup"

PopupControlID="pnlClients"BackgroundCssClass="modalBackground"></ajaxToolKit:ModalPopupExtender>

2. Assign a javascript function to the cancel button in your usercontrol like this -

<asp:ImageButtonrunat="server"ID="btnCancel"AlternateText="Cancel"ImageUrl="~/resources/images/buttons/img_but_cancel.gif"width="105"height="26"BorderStyle="None"OnClientClick="return cancel_clientclick()"/>

<script>

function cancel_clientclick()

{

var modalPopup = $find('AssignModalPopup');if(!modalPopup){return;}

modalPopup.hide();

returnfalse;

}

</script>

And just for reference, I am showing the modalpopup like this -

<asp:LinkButtonID="assignLink"runat="server"OnClientClick="return assign_clientclick()">Assign</asp:LinkButton>

like this -

<scripttype="text/javascript">function showPopup(userId)

{

var modalPopup = $find('AssignModalPopup');

if(!modalPopup)

{//alert('Failed to find modalPopup');

returnfalse;

}

modalPopup.show();

returnfalse;

}

</script>

Let me know if you face any problem .


Thanks both.

SBogus, I tried your method, but it didn't seem to work. When clicking the Cancel control in the user control, it just makes it postback, therefore making the UC disappear leaving behind an empty modal popup.

AkJoshi, I made a similar(ish) solution. I placed a button on the parent form and usedstyle="display:none" to hide it. Then, I placed a HTML Button within the user control. The button was given the onclick event handler:document.getElementById('ctl00_cphBody_btnCancelPopup').click().

Rich


Hi Rich,

The previous answer is correct, although I think there exists another, easier one.

When you declare the extender, leave unassigned the attributes for OkControlID, CancelControlID and for the corresponding two script-attributes. Then you assign them in your

code-behind module (Page_Load handler would be good idea) like this:

this.MPE1.CancelControlID =this.UC1.CancelControlID;this.MPE1.OkControlID =this.UC1.OkControlID;

Where OkControlID and CancelControlID are public properties in your user control which just give back the ClientIDs of the corresponding buttons inside the UC. Of course if you

need only one button to be inside the UC then you need only one public property and you need to leave only this button's ID unassigned in the extender's declaration.

Assigning scripts to the script-attributes in code-behind could be done as usual (you even still can do it in the extender's declaration), but there is one point of attention:

The function names should be "known" to the extender, to your user control and to your page at the same time. This means, you should either generate them dynamically and register them

upon page loading or you should write them in your page prior the extender's declaration (not in your user control!).

Kind regards,

sbogus.

No comments:

Post a Comment