This is a migrated thread and some comments may be shown as answers.

ColorPicker does not work well with jQuery UI Dialog!

6 Answers 195 Views

ColorPicker

This is a migrated thread and some comments may be shown as answers.

Runat="Server" asked on 20 Nov 2011, 04:53 PM

colorPickerJquery.png

Hi,

1. ColorPicker always behind of jQuery UI Dialog.
2. ColorPicker appears with delay after first opening.

My code here:

<%@ Page Language="C#" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

protected void Page_Load(object sender, EventArgs e)

{

}

</script>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" rel="stylesheet"

type="text/css" />

</head>

<body>

<form id="form1" runat="server">

<asp:ScriptManager ID="ScriptManager1" runat="server">

</asp:ScriptManager>

<div id="myDialog" style="display: none; overflow:hidden;">

<table>

<tr>

<td>

Value: </td>

<td>

<telerik:RadColorPicker

ID="RadColorPicker1"

ShowIcon="true"

style="z-index:5000"

runat="server">

</telerik:RadColorPicker>

</td>

<td>

<input id="Button1" type="button" value="Save" onclick="javascript:saveColor();" />

</td>

</tr>

</table>

</div>

<div id="selectedColor"></div>

<input id="Button2" type="button" value="New color" onclick="javascript:openDialog();" />

</form>

</body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"

type="text/javascript"></script>

<script type="text/javascript">

function saveColor() {

var c = $find("RadColorPicker1");

$("#selectedColor").html("Your selected color is: " + c.get_selectedColor());

$("#myDialog").dialog("close");

}

function openDialog() {

$("#myDialog").dialog({

title: 'Choose color',

width: '250',

draggable: false,

resizable: false,

show: 'slow',

hide: 'slow',

modal: true

});

}

$(document).ready(

function () {

//

}

);

</script>

</html>

Please solve this issue!

Thanks!

6 Answers, 1 is accepted

answered on 21 Nov 2011, 01:26 PM

Hello Arie,

Looking through the issue, it turns out that the reason for this behavior lies not with the RadColorPicker control, but rather with the dialog control from the jQueryUI framework. The container of the dialog with class ui-dialog has overflow set to hidden, thus not allowing any content to go out of its bounds.
Your option could be to set the overflow of the dialog's container in the dialogopen event handler to visible, thus allowing any content to go out of the bounds. Still keep in mind that this may interfere with the normal execution of the dialog and any such change should be very well tested.

Hope this helps.

All the best,
Niko
the Telerik team

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now

answered on 21 Nov 2011, 03:03 PM

Hello Arie,

Using the profiling tools for JavaScript (almost all up-to-date browsers have such) you can check where the most time is sent at. In this case this is the openDialog method. The second time the delay may be due to the numerous DOM operations the dialog control does before showing up and because once the ColorPicker palette has been show it does not gets destroyed, because recreating it is expensive. If the palette has been created it adds quite a lot of extra DOM elements on the page, thus slowing down dialog's calculations. Because the slowness is due to DOM operations, I should assume that you are using IE[6-8]. Their operations with the DOM tree are usually multiple times slower that what can be expected from the latest versions of the mainstream browsers.

Hope this explains the slow opening of the dialog the second time.

All the best,
Niko
the Telerik team

answered on 21 Nov 2011, 03:27 PM

I understand that. But I need a solution. You can optimize this code:

<script type="text/javascript">

var dialog = null;

function saveColor() {

var c = $find("RadColorPicker1");

$("#selectedColor").html("Your selected color is: " + c.get_selectedColor());

$("#myDialog").dialog("close");

}

function openDialog() {

$(dialog).dialog({

title: 'Choose color',

width: '250',

draggable: false,

resizable: false,

show: 'slow',

hide: 'slow',

modal: true

});

}

$(document).ready(

function () {

dialog = $("#myDialog");

}

);

</script>

and provide support?

By the way, others server-side controls makes excellent jumps with JQuery UI Dialog, except the control Telerik ColorPicker!

answered on 22 Nov 2011, 10:52 AM

Hi Arie,

Unfortunately removing the palette from the DOM tree requires too many changes, any of which may break the functionality of the RadColorPicker. At the current state of the matters it is impossible to do this change and even if it is accomplished, the result will be much worse than the way the control behaves at the moment.
Nevertheless after testing the behavior of the jQueryUI dialog it turns out that in most browsers and all up-to-date such the dialog works just fine without any noticeable performance drawback.

Best wishes,
Niko
the Telerik team