Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

ColorPicker does not work well with jQuery UI Dialog!

6 Answers 114 Views
ColorPicker
This is a migrated thread and some comments may be shown as answers.
Runat="Server"
Top achievements
Rank 2
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>
<head runat="server">
    <title></title>
        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>
    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

Sort by
0
Niko
Telerik team
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
0
Runat="Server"
Top achievements
Rank 2
answered on 21 Nov 2011, 01:48 PM
And why after the first color selection is a delay in calling the jQuery dialog?
0
Runat="Server"
Top achievements
Rank 2
answered on 21 Nov 2011, 01:48 PM
And why after the first color selection is a delay in calling the jQuery dialog?
0
Niko
Telerik team
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
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
0
Runat="Server"
Top achievements
Rank 2
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!

0
Niko
Telerik team
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
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
Tags
ColorPicker
Asked by
Runat="Server"
Top achievements
Rank 2
Answers by
Niko
Telerik team
Runat="Server"
Top achievements
Rank 2
Share this question
or