Button Event Handler Not Consistently Firing

[Robert]

I have a situation where I have one RadWindow dialog box appearing over top of another RadWindow dialog box. The smaller, topmost one simply provides the user with the ability to add a new item to a DropDown ListBox "on-the-fly".

I'm experiencing something I've never before seen with ASP.Net programming: The button's event handler does not always fire.  It *seems* to fire more consistently when I have a breakpoint in the code, which allows me to debug it in Visual Studio.

I'm posting this quandary in the RadWindow forum because I'm wondering if the presence of the two RadWindows is somehow causing a conflict with the event handling mechanism of ASP.Net.

Might anyone have any ideas how to solve this problem?

Robert

[Robert]

Further to my original posting, I'm thinking the problem *may* have to do with the fact that with the 2nd dialog box (the smaller one) I had forgotten to add code in Page_Load like I had for the 1st dialog box; code like this:

// The presence of this next construct deserves an explanation.  It must be here
// because upon every Postback, every loaded User Control must be reloaded.  As
// such, when the Mucking UC is reloaded, the RadWindow dialog box disappears.
// Making the explicit call to show it again appears to resolve this problem.
if (ModalDialogIsActive)
  Website.Common.ShowDialog(rwMoveMuck);

I tried some experimenting with similar code for the 2nd dialog box but it didn't seem to work.  Things got really confusing so I just restored what I had before.

What I'd really like to find out is the following:

1. Can I open 2 RadWindow dialog box at the same time?
2. If the answer to #1 is "Yes", do I absolutely need to use the RadWindowManager?
3. What might be a logical reason why the 2nd dialog box's Button event handler is not consistently firing?

For the record, these are the Javascript functions I'm calling from server-side code to control the opening & closing of the dialog boxes.  This code has served me well for a single RadWindow but I'm now not sure whether it is suitable for two simultaneously open RadWindows:

/* This function is called by 'Common.ShowDialog()'

A much more simplified approach can be used if AJAX is not involved.  An explanation can be found here:
  http://www.telerik.com/help/aspnet-ajax/radwindow-troubleshooting-javascript-from-server-side.html
In essence, AJAX controls are not yet loaded when 'window.onload' is fired.

Note: A thread discussing how the RadWindow control is implemented in this project can be found here:
http://www.telerik.com/community/forums/aspnet-ajax/window/is-a-partial-postback-with-radwindow-possible.aspx
*/
function ShowDialog(rwID) {
  function f() {
    var radWin = $find(rwID);
    if (radWin != null) {
      radWin.show();
    }

    Sys.Application.remove_load(f);
  }

  Sys.Application.add_load(f);
}


/* This function is called by 'Common.HideDialog()' */
function HideDialog(rwID) {
  function f() {
    var radWin = $find(rwID);
    if (radWin != null) {
      radWin.close();
    }

    Sys.Application.remove_load(f);
  }

  Sys.Application.add_load(f);
}

[Marin Bratanov]

Hi Robert,

This behavior is very strange and I have not encountered it before. The logic that you use to open the RadWindows seems fine (the script registration and the Sys.Application.Load event), so I do not believe this is where the issue stems.

What comes to mind is possible ViewState or ID issues. If you load the controls in the RadWindows dynamically and you do not do that early enough (Page_Init) and you do not set the same IDs each time you could have such issues. Does placing the content of the RadWindow (at least the problematic, second one) in the markup help in this case? You can also try migrating it to a different form and load that form inside, instead of using the ContentTemplate, so the page gets a separate context.

Generally, there aren't issues with opening more than one RadWindow on the same page and a RadWindowManager is not necessary for this, a RadWindow can exist on the page without a manager and still have its full functionality.


Regards,
Marin Bratanov
the Telerik team

[Robert]

Marin,

You raise an interesting number of points! 

In my case, the Control hierarchy structure is this:
  - Master Page
          - Web Content Form
                     - User Control (one of many can be loaded at any one time)
                                - RadWindow 1 (dialog box displayed when user needs it)
                                          - RadWindow 2 (smaller dialog box, just to get a single text value)

Reading through what you wrote me, it appears that I need to redisplay RadWindow1 and RadWindow2 upon a Partial Postback via the Page_Init event handler.  Now, up until now, I was making this call from Page_Load like this:

public bool ModalDialogIsActive

{

  get

  {

    return Tools.GetBooleanValue(ViewState["ModalDialogIsActive"]);

  }

 

  set

  {

    ViewState["ModalDialogIsActive"] = value;

 

    if (value)

      Website.Common.ShowDialog(rwMoveMuck);

    else

      Website.Common.HideDialog(rwMoveMuck);

  }

}

 

 // This is currently in Page_Load:

if (ModalDialogIsActive)

  Website.Common.ShowDialog(rwMoveMuck);

So I just tried moving the last two lines of code into Page_Init.  This failed to work, I assume because ViewState isn't yet initialized at that point in the page life cycle.  If I can't use ViewState, what other approach would you recommend for me to keep track of, and redisplay if necessary, whether RadWindow 1 or RadWindow 2 are displayed and need to be redisplayed?

Robert

[Marin Bratanov]

Hello,

What I had in mind was loading the user controls that host the RadWindows in the Page_Init event, not showing the RadWindows there. What I can also suggest as a test is replacing the RadWindows with simple aspPanels with aspPlaceHolders inside and show them instead (i.e. toggle their display CSS property). Once things work fine in that setup they should work with the RadWindows too, since the only difference is that RadWindows move their content in the DOM when shown, but this should not affect the buttons. Nevertheless, this help article and this thread may be useful in ideas on how RadWindow works.


Regards,
Marin Bratanov
the Telerik team

[Robert]

I'm please to report that most of my earlier problems disappeared after I upgraded from VS2008 to VS2012.  Thank you Telerik & Microsoft!!!

However, I do have one nagging problem which I'm hoping you can give me some guidance on.  Please take a look at the two screenshots I've uploaded.  The one thing that's not working correctly is this: If I display the smaller dialog box (on top of the main one) and type in a value then everything works okay IF I press [Enter] or click on the OK or Cancel buttons.  BUT if I press [Tab] then the small dialog box disappears.  Users are going to be very confused about this because one would normally think that [Tab] should simply set focus to the OK button.

So, why is the [Tab] key doing this and how can I correct this behaviour?

Robert

[Marin Bratanov]

Hello Robert,

It is good to hear that the original issue is subsiding.

On the tabbing issue - I haven't seen such behavior either and my best guess is that something has an onfocus handler that is closing the smaller dialog. In case you are using the ContentTemplate of the first dialog could you try making the second non-modal, because by design only one modal dialog should be present on the page. If you are using the NavigateUrl of the first could you try moving the small dialog inside the content page to make it independent of the parent page? What I also see is that the OK button looks disabled, so if you have any custom handlers on the texbox that achieve this functionality could you try disabling them to see if they are causing this problem? If you still cannot resolve the problem can you post here the minimal markup and code that will reproduce this problem so I can actually take a look at it? This blog post can be helpful when isolating an issue.


Kind regards,
Marin Bratanov
the Telerik team

[Robert]

Marin,

Thank you for your last posting.  What you said got me thinking more about the problem at hand.  I eventually realized what the problem was: Losing focus on the textbox was causing a postback, which then inadvertently closed the mini-dialog box.  I won't bore you with the details of why a postback was occurring but I fixed that problem and now one can tab away from the textbox without any problems.

So I almost have everything working perfectly now.  The one last issue is that pressing the [Enter] key is not having the desired effect.  Clearly what I want the [Enter] key to do is do essentially "press" the OK button on the mini-dialog box [or call the same server-side event handler].  But I'm not sure how to do that in this situation.

Here's the layout code for my mini-dialog box:

<%-- This is the Add Stockpile mini-dialog box that is displayed over top of the Move Muck dialog box --%>
<telerik:RadWindow ID="rwAddStockpile" runat="server" Behaviors="Move" EnableShadow="true" VisibleStatusbar="false" VisibleTitlebar="true"
                   Title="Add New Stockpile" BorderColor="Black" AutoSize="true" Modal="true" IconUrl="">
  <ContentTemplate>
    <asp:HiddenField ID="newStockpileName" runat="server" />

    <asp:UpdatePanel ID="UpdatePanel3" runat="server">
      <ContentTemplate>
        <div class="dialogMain smallText" style="width:160px; padding:7px 7px 0 7px">
          <div style="margin-left:auto; margin-right:auto; padding-bottom:5px">
            <span>Specify a new stockpile name:</span>
            <asp:TextBox ID="textBoxAddStockpile" runat="server" AutoPostBack="false" onkeyup="SetButtonEnable(this, 'buttonAddStockpileOK'); $get($('[id$=_labelAddStockpileError]')[0].id).innerHTML = '';"
              onblur="SaveTextBoxValue(this, 'newStockpileName')" Width="155" />
          </div>

          <div style="float:right; padding:5px 0 5px 0">
            <asp:Button ID="buttonAddStockpileOK" runat="server" Text="OK" Width="50" CssClass="smallText" Enabled="false" OnClick="buttonAddStockpileOK_Click" />

            <asp:Button ID="buttonAddStockpileCancel" runat="server" Text="Cancel" Width="50" CssClass="smallText" OnClientClick="HideDialog('rwAddStockpile')" />
          </div>
          <div style="clear:both; height:15px">
            <asp:Label ID="labelAddStockpileError" runat="server" ForeColor="Red" />
          </div>
        </div>
      </ContentTemplate>
    </asp:UpdatePanel>
  </ContentTemplate>
</telerik:RadWindow>

[Marin Bratanov]

Hello Robert,

I believe you can check for the enter key in the onkeydown or onkeyup event handler for the textbox or for the entire document and if it is pressed - programmatically click OK button. Something like:

document.onkeydown = checkKeycode
function checkKeycode(e)
{
    var keycode;
    if (window.event) keycode = window.event.keyCode;
    else if (e) keycode = e.which;
    if (keycode == 13) alert("enter pressed");
}

instead of alert() you can add a check like
if($find("<%=rwAddStockpile.ClientID%>").isVisible()) __doPostBack("<%=buttonAddStockpileOK.UniqueID%>", "");
or only attach the document.onkeydown handler in the OnClientShow of the RadWIndow and deatach it in the OnClientClose so that it is only active while the dialog box is shown.

All the best,
Marin Bratanov
the Telerik team

[Robert]

Marin,

Thanks for your feedback.  It inspired me on how to solve the problem.

In case it helps future developers, here's my solution:

<asp:TextBox ID="textBoxAddStockpile" runat="server" AutoPostBack="false"
  onblur="SaveTextBoxValue(this, 'newStockpileName')" onkeydown="HandleTextBoxEnter(this, 'newStockpileName', 'buttonAddStockpileOK')"  />

// Takes the current value in a TextBox and saves it in the specified Hidden Field.
function SaveTextBoxValue(textBox, hidVarID) {
  $get($('[id$=_' + hidVarID + ']')[0].id).value = textBox.value;
}

// Looks for [Enter] being pressed in a TextBox.  When that occurs then simulates the pressing of the specified Button.
function HandleTextBoxEnter(textBox, hidVarID, buttonID) {
  var keycode = window.event.keyCode;
  if (keycode == 13) {
    // Before we perform the PostBack we must save the current contents of the TextBox in the specified Hidden Variable
    SaveTextBoxValue(textBox, hidVarID);

    var okButtonID = $('[id$=_' + buttonID + ']')[0].id;
    __doPostBack(okButtonID, '');
  }
}