Deborah's Developer MindScape






         Tips and Techniques for Web and .NET developers.

December 16, 2009

ASP.NET: Setting Focus in Modal Dialogs

Filed under: ASP.NET,C#,VB.NET @ 11:34 am

I just wanted to set focus to a TextBox on a modal dialog created using the ModalPopupExtender. How hard can it be?

As a Physics and Math major, I spent my student years using logic to attack problems and solve puzzles. So I was a little concerned when my daughters learned the "guess and check" method in Math class. How scientific or logical is that? I later came to appreciate its usefulness in some circumstances. For example, on the SAT (college entrance) tests it may be faster to "guess" each of the multiple choice items as correct and "check" them than to figure out the answer.

What does "guess and check" have to do with ASP.NET? Often it seems that there is no obvious solution to accomplish a specific design requirement. There is no obvious control property, method call or programming logic that achieves the desired result. The "guess and check" method is the only way to go:

  • Guess a key word or two describing what you are trying to accomplish
  • Goggle/Bing
  • Use the results to make a guess on some code
  • Run (F5) to check
  • Repeat for several hours until something miraculously works

This was definitely the case for what seemed like such a simple task: set the focus to a control in a modal dialog. It’s just control.focus(), right? Yes, but where would you put this code?

The problem here is that the modal dialog is initially hidden. You can’t set focus to the control when the page is loaded. Rather, you need to set the focus when the modal dialog is shown. There are no onShown or onVisible attributes for a panel/div/span. So on to "guess and check".

Because the vast majority of the sample code I found via Bing that was supposed to provide a solution for this did not work (at least not for me), here is a solution that did work.

1) Follow the steps here to define a modal dialog on one of your Web pages.

2) Add the BehaviorId attribute to the ModalPopupExtender in the ASP.NET page. The BehaviorId provides a mechanism to access the extender from script code.

In HTML:

<!– Define the modal dialog –>
<asp:ModalPopupExtender ID="SecurityQuestionModalPopupExtender" runat="server"
  BehaviorID="SecurityQuestionModalBehavior"
  TargetControlID="SecurityQuestionLink"
  PopupControlID="SecurityQuestionModalPopup"
  CancelControlID="CancelButton"
  OnCancelScript="OnSecurityQuestionCancel();"/>

3) Add this script code to your ASP.NET page:

In java script:

<script language="javascript" type="text/javascript">
    /* On page load */
    function pageLoad() {
        var modalPopup = $find("SecurityQuestionModalBehavior");
        modalPopup.add_shown(OnPopupShow);
    }

    /* Set the focus to the correct control */
    function OnPopupShow() {
        var tb = $get("QuestionTextBox");
        tb.focus();
    }

</script>

The first function executes when the page is loaded. Since the ModalPopupExtender has a BehaviorId, you can use the $find method to find it. You can then use the add_shown method and pass it a function to call when the modal popup is shown.

The OnPopupShow function then sets the focus when the modal popup is shown by finding the desired control and setting focus to it.

The result:

image

Yea, it seems like this add_shown method was pulled out of thin air. Without Bing, there is no way I would have found this method. It is not in any documentation I have read nor does it appear in intellisense.

The only place I was able to find any documentation (if you would call it that) is in the ModalPoupBehavior.js file provided with the Ajax toolkit source code. Is it just me or is it TOTALLY LAME to have to read the Ajax source code to get something this basic to work?

NOTE: Most of the examples I found during my "guess and check" used add_showing instead of add_shown. This generated the following error during my "check" phase: "Can’t move focus to the control because it is invisible, not enabled, or of a type that does not accept the focus."

If you need to write this code in VB/C# code behind instead of javascript in the ASP.NET page, see this link.

Use this technique any time you need to set focus to one of the controls on a modal dialog. And use the "guess and check" method every time you need to do anything beyond the basics with ASP.NET.

Enjoy!

6 Comments

  1.   Albert — December 17, 2009 @ 7:44 am    Reply

    You rock. I could not get this figuered out. Thanks.

  2.   Robert Joel Stearns — December 22, 2009 @ 1:09 am    Reply

    I must have tried 10-15 different solutions posted on the web and this is the only one that worked for me…and with an explanation to boot…a million thanks

  3.   Dave — January 14, 2010 @ 5:07 pm    Reply

    Awesome. Thanks!

  4.   Leonid Fofanov — September 21, 2010 @ 9:27 am    Reply

    Using modalPopup.add_shown is the key point here. Thank you for your input !

  5.   Jazlyn — August 13, 2011 @ 4:12 am    Reply

    Hey, you’re the goto exeprt. Thanks for hanging out here.

  6.   Nikki — August 14, 2011 @ 8:12 am    Reply

    Hey, good to find smoeone who agrees with me. GMTA.

RSS feed for comments on this post. TrackBack URI

Leave a comment

© 2014 Deborah's Developer MindScape   Provided by WPMU DEV -The WordPress Experts   Hosted by Microsoft MVPs