Skip Navigation LinksHome / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > ColorPicker > ColorPicker does not work well with jQuery UI Dialog!

Not answered ColorPicker does not work well with jQuery UI Dialog!

Feed from this thread
  • Runat="Server" avatar

    Posted on Nov 20, 2011 (permalink)

    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!
    Attached files

    Reply

  • Niko Niko admin's avatar

    Posted on Nov 21, 2011 (permalink)

    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

    Reply

  • Runat="Server" avatar

    Posted on Nov 21, 2011 (permalink)

    And why after the first color selection is a delay in calling the jQuery dialog?

    Reply

  • Runat="Server" avatar

    Posted on Nov 21, 2011 (permalink)

    And why after the first color selection is a delay in calling the jQuery dialog?

    Reply

  • Niko Niko admin's avatar

    Posted on Nov 21, 2011 (permalink)

    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

    Reply

  • Runat="Server" avatar

    Posted on Nov 21, 2011 (permalink)

    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!

    Reply

  • Niko Niko admin's avatar

    Posted on Nov 22, 2011 (permalink)

    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

    Reply

Back to Top

Skip Navigation LinksHome / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > ColorPicker > ColorPicker does not work well with jQuery UI Dialog!
Related resources for "ColorPicker does not work well with jQuery UI Dialog!"

[  ASP.NET ColorPicker Features  |  Documentation  |  Demos  |  Telerik TV  |  Self-Paced Trainer  |  Step-by-step Tutorial  ]