I already have the onclick event handlers wired up.  Clicking is not this issue.  What I'm looking for is to have the dialog box respons to keyboard events - return/enter for OK and escape for cancel.

>I guess that "click" handler will be hit on default keys as well.

Unless I'm missing something here, the click handlers handle mouse events, not keyboard events.

Jeff

Hi Jeff,

The "click" event for <input type='button'> should fire for any kinds of clicks including keys. For example, you may test following. Set focus to button (tab or mouse down with drag-out) and click "Space". The click handler will be called.

        <asp:Button ID="Submit1" runat="server" Text="Submit" OnClientClick="alert('click')"/>

If you want to process global keyboard events regardless of owner/target element, then you may try to add keydown event handler to form, check if it is Enter or Escape key and do desired actions (show/hide dialog, etc.). But that is not related to dialog, button or any other control on page.

hi Viktor ,

I am not getting the above things, Jeff has asked & I do have similar question.

Suppose, I have form where I am opening 3-4 webdialog boxes.

Each webdialogwindow contains OK & Cacel button. These windows open up when respective buttons are clicked.

Now what I am trying to achive is , when I click ENTER the respective webdialogwindow should hit respective Ok button click event. and on ESC , it should hit cancel button event, irrespective of current focus.

Please suggest.

Thank you,

Amol.

Hi Amol,

Last time I gave example how to process events of buttons located in dialogs. As I said before, if you want to process global key events, then you are on your own. Because dialog has no concept of active/focused state and it is not able to keep track on events in its child controls.
I wrote a sample for you, which probably does what you expect. It adds global key listener to form, checks if event-element is a child of dialog and calls a method to hide dialog its parent dialog. It also has ok/cancel buttons, which do which do ok/cancel action which I suggested before.

Note: of course that sample can work only if end user before pressing enter/esc key, set focus (click by mouse) to any child element in dialog. If, as you mentioned, your application opens dialog by external button, then if end user at this point will press enter/esc, then nothing will happen. Because focus will belong not to a child of dialog, but to your original open-button. If you want to cover that scenario, then you may experiment with a global variable which keeps reference to last opened dialog and use it if key-handler failed.

<form id="form1" runat="server" onkeydown="formKeyDown(event)">
<asp:ScriptManager runat="server" ID="scr"></asp:ScriptManager>
 <script type="text/javascript">
 function hideDialog(id, cancel)
 {
  var dialog = $find(id);
  if(!dialog)
   return;
  dialog.hide();
  alert('dialog ' + id + ' was closed by ' + (cancel ? 'cancel' : 'ok') + ' button');
 }
 function formKeyDown(evt)
 {
  if(!evt)
   return;
  var key = evt.keyCode;
  if(key != 13 && key != 27)
   return;
  var src = evt.target;
  if(!src)
   src = evt.srcElement;
  var d1 = $find('WebDialogWindow1'), d2 = $find('WebDialogWindow2');
  var div1 = d1 ? d1.get_element() : null, div2 = d2 ? d2.get_element() : null;
  var id = null;
  while(!id && src && src.nodeName != 'FORM')
  {
   if(src == div1)
    id = 'WebDialogWindow1';
   if(src == div2)
    id = 'WebDialogWindow2';
   src = src.parentNode;
  }
  if(id)
   hideDialog(id, key == 27);
 }
 </script>
 <ig:WebDialogWindow ID="WebDialogWindow1" runat="server" Height="200px" Width="200px">
  <ContentPane>
   <Template>
    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
    <input id="dialog1ok" type="button" value="OK" onclick="hideDialog('WebDialogWindow1', false)" />
    <input id="dialog1cancel" type="button" value="Cancel" onclick="hideDialog('WebDialogWindow1', true)" />
   </Template>
  </ContentPane>
 </ig:WebDialogWindow>
 <ig:WebDialogWindow ID="WebDialogWindow2" runat="server" Height="200px" Width="200px" Left="300px">
  <ContentPane>
   <Template>
    <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
    <input id="dialog2ok" type="button" value="OK" onclick="hideDialog('WebDialogWindow2', false)" />
    <input id="dialog2cancel" type="button" value="Cancel" onclick="hideDialog('WebDialogWindow2', true)" />
   </Template>
  </ContentPane>
 </ig:WebDialogWindow>
</form>

this seems to be an on going issue with the WDW.

When adding a button control to it, and setting that controls properties to autosubmit =true

ClickOnEnterKey and ClickOnSpaceKey to true... doesn't work..

once the wdw is made visible and modal, it becomes pretty useless in the fact that focus is not on the wdw or any control in it.  Even setting a control to have focus doesn't work.

This makes using this control to be a "logon" control a waste of time, as there is no way to set focus to any other control on it.  I would have thought you guys would have put more thought in building this control...l

nope, doesn't work.

a wdw on a page. wdw is set to show modal, a infragistics button on the wdw,  buttonis set for autosubmit, clickonenter,clickonspace all set to true. still doesn't work.

I wouldn't think I would have to write code around your controls for something that should inherently work.

but if i do, it would be nice if someone could post a usable example.

Hi Daryllenger,

When state of WebDialogWindow is changed, then it does not change currently focused/active element.

However, if application shows dialog and wants to set focus to a particular child of dialog, then it is quite easy to implement. Below is example:

<ig:WebDialogWindow ID="WebDialogWindow1" runat="server" Width="200px" Height="200px" Modal="True" WindowState="Hidden">
 <ContentPane>
  <Template>
   <asp:Button ID="Button1" runat="server" Text="Button" />
  </Template>
 </ContentPane>
</ig:WebDialogWindow>
<script type="text/javascript">
function showDialog()
{
 var dialog = $find('<%=WebDialogWindow1.ClientID%>');
 dialog.show();
 var button = dialog.get_contentPane().findChild('Button1');
 // or
 //var button = $get('<%=Button1.ClientID%>');
 if(button)
 {
  button.focus();
  // if that will not work, then you may use delay:
  //window.setTimeout(function(){button.focus()}, 100);
 }
 else
  alert('no Button1');
}
</script>
<input type="button" value="ShowDialog" onclick="showDialog()" />