Tuesday 27 April 2010

asp.net checkbox modalpopupextender checkbox doesn't check or uncheck

There is an apparent bug in asp.net that when you have a checkbox inside a panel that is acting as a modal popup with the modalpopupextender, that when you try to check or uncheck it, it doesn't work!

I found the following thread, and it seems that quite a few people have had this very same problem.

From reading many posts, it seems that this happens if you do not set the TargetControlID property of the extender correctly.

However, this becomes an issue if you have multiple links, all that show the same extender. To get round this, you can simply create a fake button:

asp.net button not posting back

I have a modalpopup extender attached to a panel, inside which resides two asp.net buttons. Each of these had the normal "Onclick" attribute assigned to them. However, when they were clicked, no postback was occuring.

From some reading around, it appears that this is by design, and that the buttons are there for this to be closed.

So how do you get round this?

You can attach a javscript client side event that mimmicks the behaviour of what happens with asp anyway, by forcing the postback to take place.

Firstly, in the head of your page, define a function that ensures that the page is valid first, and then causes the postback to take place (the validation part is crucial for this to work.

function doPostback(sender,e)
{
if(Page_IsValid)
{
__doPostback(sender,e);
}
else
{
return false;
}

}

Now in your code behind, tell your buttons to call this:

btnSaveUserDetails.OnClientClick = "javascript:return doPostback('" + btnSaveUserDetails.UniqueID + "');";

It is important here that the uniqueID is used, as this ensures that any controls that are nested pass the right details to the postback function.

And ta da, they now work!

Monday 26 April 2010

modalpopupextender event fires but does not show

I lost half a day of my life to this silly mistake today.

I had on my page a panel, with a modal popupextender. When I clicked a link that ran a serverside mdlPopup.show() or a client side $('mdlPopup').show(), the events fired, but no modal popup showed.

The reason for this was because I had set the "visible" attribute of my panel to "false", rather than setting the style of it to "display:none"!

Silly....