ColorPicker does not work well with jQuery UI Dialog!

7 posts, 0 answers
  1. Runat="Server"
    Runat="Server" avatar
    14 posts
    Member since:
    Feb 2010

    Posted 20 Nov 2011 Link to this post

    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!
  2. Niko
    Admin
    Niko avatar
    387 posts

    Posted 21 Nov 2011 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Runat="Server"
    Runat="Server" avatar
    14 posts
    Member since:
    Feb 2010

    Posted 21 Nov 2011 Link to this post

    And why after the first color selection is a delay in calling the jQuery dialog?
  5. Runat="Server"
    Runat="Server" avatar
    14 posts
    Member since:
    Feb 2010

    Posted 21 Nov 2011 Link to this post

    And why after the first color selection is a delay in calling the jQuery dialog?
  6. Niko
    Admin
    Niko avatar
    387 posts

    Posted 21 Nov 2011 Link to this post

    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
  7. Runat="Server"
    Runat="Server" avatar
    14 posts
    Member since:
    Feb 2010

    Posted 21 Nov 2011 Link to this post

    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!

  8. Niko
    Admin
    Niko avatar
    387 posts

    Posted 22 Nov 2011 Link to this post

    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
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017