Forums Ultimate UI for ASP.NET Web Forms
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Carlos
480
Strange focus behaviour
posted

Hi,

I'm using Infragistics4.Web.v12.1 WebDropDown in my application.

There is a strange behaviour with the focus on my jQuery Dialogs. I've set them up to have the "No" option selected by default.

I have overriden the __doPostBack function to show a confirm dialog before actually doing the postback. Everithing works ok when the postback is fired by a standard asp dropdown, but when using the infragistics webdropdown there is something that switches back the focus to the "Yes" button. You can actually see the "No" selected a split second before switching back to "Yes".

Is there something in the WebDropDown messing with the focus?

My page:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestDropDowns.aspx.cs"
Inherits="eRec.Web.UI.TestDropDowns" %>
<%@ Register Assembly="Infragistics4.Web.v12.1, Version=12.1.20121.2072, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb"
Namespace="Infragistics.Web.UI" TagPrefix="ig" %>
<%@ Register Assembly="Infragistics4.Web.v12.1, Version=12.1.20121.2072, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb"
Namespace="Infragistics.Web.UI.ListControls" TagPrefix="ig" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link rel="stylesheet" type="text/css" href="styles/jquery/jquery-ui-1.10.3.custom.css" />
<link rel="stylesheet" type="text/css" href="styles/jquery/jquery-ui-1.10.3.custom.min.css" />
<script type="text/javascript" src="scripts/jquery-1.9.1.js"></script>
<script type="text/javascript" src="scripts/jquery-ui-1.10.3.custom.js"></script>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<ig:WebScriptManager ID="WebScriptManager1" runat="server" EnablePageMethods="true" />
<div>
<asp:DropDownList ID="ddtest" runat="server" AutoPostBack="true"
OnSelectedIndexChanged="ddlTest_SelectedIndexChanged">
<asp:ListItem Text="1" Value="1" />
<asp:ListItem Text="2" Value="2" />
</asp:DropDownList>
<ig:WebDropDown ID="wddTest" runat="server" AutoPostBack="true" Width="50px" DropDownContainerWidth="50px"
OnSelectionChanged="wddTest_SelectedIndexChanged">
<Items>
<ig:DropDownItem Text="1" Value="1" />
<ig:DropDownItem Text="2" Value="2" />
</Items>
</ig:WebDropDown>
</div>
<script type="text/javascript" src="TestDropDowns.js"></script>
<script type="text/javascript">
$(function () {
TestDropDowns.doPostBack();
});
</script>
</form>
</body>
</html>

My .js:

$.confirm = function (p) {
$(String.format('<div id="sys-message-confirm">{0}</div>', p.message)).dialog({
modal: true,
width: 450,
resizable: false,
title: (p.title) ? p.title : 'message',
buttons: [
{
text: 'Yes',
click: function () {
if (typeof (p.yesFn) == 'function') {
p.yesFn();
}
$(this).dialog('close');
}
},
{
text: 'No',
class: 'default-button',
click: function () {
if (typeof (p.noFn) == 'function') {
p.noFn();
}
$(this).dialog('close');
}
}
],
open: function () {
$(this).siblings('.ui-dialog-buttonpane').find('button.default-button').focus();
$(this).parent().css({ "z-index": "9999" });
}
});
};

var TestDropDowns = {
postBack: null,
doPostBack: function () {
if (typeof __doPostBack == 'function') {
TestDropDowns.postBack = __doPostBack;
__doPostBack = function (Arg1, Arg2) {
$.confirm({
message: 'Your changes will be lost. Do you want to continue without saving?',
yesFn: function () {
TestDropDowns.postBack(Arg1, Arg2);
},
noFn: function () {

}
});
};
}
}
}

Parents
  • 2895
    Suggested Answer
    posted

     Hello Carlos,

    Thank you for using our forum.

    I have investigated the case. Infragistics WebDropDown control has its own focus management and the focus changes when the combo control closes. To accomplish the seeking functionality you can use the ClientEvents-DropDownClosed event instead of SelectionChanged and handle your function from it.

             <ig:WebDropDown ID="wddTest" runat="server" Width="50px" DropDownContainerWidth="50px" ClientEvents-DropDownClosed="wddTest_SelectedChanged">

            function wddTest_SelectedChanged() {

                $.confirm("No");

            }

     Another option is to disable the closing of the web drop down using the EnableClosingDropDownOnSelect property and setting it to false.

    EnableClosingDropDownOnSelect="false"

    Please let me know how my suggestions work for you.

Reply Children
No Data