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 () {

}
});
};
}
}
}