RadColorPicker doesn't display correctly after switching palette

6 posts, 0 answers
  1. Roman
    Roman avatar
    25 posts
    Member since:
    Sep 2010

    Posted 14 Mar 2012 Link to this post

    Step to reproduce:
    1. open radcolorpicker near to right bottom corner of window.
    2. change(switch) palette
    3. close colorpicker.
    4. Open it again and you can see that color picker doesn't fit to window size.
  2. Slav
    Admin
    Slav avatar
    1356 posts

    Posted 19 Mar 2012 Link to this post

    Hi Roman,

    You can use the following script in order to ensure that the palette of RadColorPicker will remain visible when selecting different tabs. Overall, you should handle the client-side click event when the palette tabs are clicked so that the popup window can be positioned accordingly. Also the height of the previously opened palette is stored in a variable, as it is needed for calculating the position of the popup:
    var prevPaletteHeight = null;
    var popupOpened = false;
     
    function correctPopupPosition(picker, args) { // OnClientPopUpShow event handler
        if (!popupOpened) {
            var tabStrip = picker._tabStrip;
            $telerik.$(tabStrip).find("a").click(function () {
                positionPalette(picker);
            });
        }
        popupOpened = true;
     
        positionPalette(picker);
     
    }
     
    function positionPalette(picker) {
        var tabsHeight = 30;
        var bottomMargin = 30;
        var documentHeight = $telerik.$(document).height();
        var palette = $telerik.$(picker.GetPaletteContainer());
        var paletteHeight = palette.height();
        var paletteOffset = palette.offset();
     
        if (prevPaletteHeight && prevPaletteHeight < paletteHeight) {
            bottomMargin = paletteHeight - prevPaletteHeight;
            if (bottomMargin < 30) bottomMargin = 30;
        }
     
        if (paletteOffset.top + paletteHeight + tabsHeight >= documentHeight)
            palette.css({ top: palette.position().top - bottomMargin });
        prevPaletteHeight = paletteHeight;
    }


    Greetings,
    Slav
    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. Roman
    Roman avatar
    25 posts
    Member since:
    Sep 2010

    Posted 21 Mar 2012 Link to this post

    Hello Slav.

    Thank you for a temporary solution.

    We have plenty of color pickers on different forms. Therefore we cannot use the code you've provided.
    It seems to be a bug of the control, and we really need this issue to be resolved permanently.

    Looking forward to your reply.
    Roman.
  5. Slav
    Admin
    Slav avatar
    1356 posts

    Posted 23 Mar 2012 Link to this post

    Hello Roman,

    Indeed, we are aware of this bug in RadColorPicker's behavior and it will be addressed by our developers, although I cannot provide an exact estimate when a solution will be available.

    For the time being, you can use the following approach:

    1. Reference all the client-side objects of all RadColorPickers on your page by filtering them from the results of the method radControls:
    function get_allRadColorPickers() {
        var allRadColorPickers = [];
        var allRadControls = $telerik.radControls;
        // all RadControls are referenced
     
        for (var i = 0; i < allRadControls.length; i++) {
            var element = allRadControls[i];
     
            if (Telerik.Web.UI.RadColorPicker && Telerik.Web.UI.RadColorPicker.isInstanceOfType(element)) {
                allRadColorPickers.push(element);
            }
        }
        // only the allRadColorPickers are gathered into an array
     
        return allRadColorPickers;
    }
     
    2. Iterate through the client-side objects of the RadColorPickers and attach the handler of the event popUpShow, which was provided in the previous post:
    function pageLoad() {
        var radColorPickers = get_allRadColorPickers();
        for (var i = 0; i < radColorPickers.length; i++) {
            radColorPickers[i].add_popUpShow(correctPopupPosition);
        }
    }


    Greetings,
    Slav
    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.
  6. Roman
    Roman avatar
    25 posts
    Member since:
    Sep 2010

    Posted 02 Apr 2012 Link to this post

    Hello Slav.

    Thanks for solution. It works when you open popup window, but not when you change palette.
    Is it possible to workaround this problem ? 

    Thanks in advance.
    Roman.
  7. Slav
    Admin
    Slav avatar
    1356 posts

    Posted 05 Apr 2012 Link to this post

    Hi Roman,

    The fix that I suggested should cover the repositioning of the palette popup when the mode of the RadColorPicker is changed. Please check the attached sample project and let me know if the problem is reproducible. In case you are still having difficulties, you can describe how do you recreate the issue and modify the attachment so that I can examine the problem locally and modify the solution accordingly. This screen capture tool will also be useful for recording the problem on your end so that I can reproduce it.

    Regards,
    Slav
    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