Color Picker not displaying correctly in AJAX TabContainer

4 posts, 0 answers
  1. Tim
    Tim avatar
    39 posts
    Member since:
    Oct 2010

    Posted 01 Feb 2012 Link to this post

    Hi, I'm adding the RadColorPicker to an existing application that uses the AjaxToolKit  TabContainer / TabPanel. The right border of the color picker is clipped if the tab is not the active tab when the page is loaded. If I make the color tab the active tab, ActiveTabIndex="1" it works ok. If ActiveTabIndex="0" the right border is clipped, class rcpRoundedRight has a height of 0.

    Not sure how to tackle this. Any help is appreciated.

    Thanks.

    <AjaxToolKit:TabContainer ID="TabContainer1" runat="server" Width="650px" Height="400px" ActiveTabIndex="0" >
        <AjaxToolKit:TabPanel ID="WelcomeTab" runat="server" HeaderText="Welcome">
        <ContentTemplate>
            <div style="height:300px; width:300px; background-color:Blue;"></div>
        </ContentTemplate>
        </AjaxToolKit:TabPanel>
        <AjaxToolKit:TabPanel ID="ColorTab" runat="server" HeaderText="Colors">
            <ContentTemplate>
                <telerik:RadColorPicker runat="server" ID="RadColorPicker2" PaletteModes="WebPalette"
                    OnClientColorChange="titleColorChange" SelectedColor="#e96e35" />
            </ContentTemplate>
        </AjaxToolKit:TabPanel>
     
    </AjaxToolKit:TabContainer>

  2. Slav
    Admin
    Slav avatar
    1355 posts

    Posted 03 Feb 2012 Link to this post

    Hello Tim,

    The reason for this behavior is that, when rendered, the RadColorPicker control is within a container that is not displayed, but later in the page execution it is being revealed. You should ensure that after the container is shown you call the repaint method of the color picker control.

    Below I have demonstrated how to achieve this by attaching a handler to the OnClientActiveTabChanged event of TabContainer in order to get the client object of RadColorPicker and to call the repaint() method:
    <script type="text/javascript">
        function OnClientActiveTabChanged() {
            $find("<%=RadColorPicker2.ClientID %>").repaint();
        }
    </script>

    <ajaxtoolkit:TabContainer ID="TabContainer1" runat="server" Width="650px" Height="400px"
        ActiveTabIndex="0" OnClientActiveTabChanged="OnClientActiveTabChanged">
        <ajaxtoolkit:TabPanel ID="WelcomeTab" runat="server" HeaderText="Welcome">
            <ContentTemplate>
                <div style="height: 300px; width: 300px; background-color: Blue;">
                </div>
            </ContentTemplate>
        </ajaxtoolkit:TabPanel>
        <ajaxtoolkit:TabPanel ID="ColorTab" runat="server" HeaderText="Colors">
            <ContentTemplate>
                <telerik:RadColorPicker runat="server" ID="RadColorPicker2" PaletteModes="WebPalette"
                    SelectedColor="#e96e35" />
            </ContentTemplate>
        </ajaxtoolkit:TabPanel>
    </ajaxtoolkit:TabContainer>


    All the best,
    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. Tim
    Tim avatar
    39 posts
    Member since:
    Oct 2010

    Posted 03 Feb 2012 Link to this post

    Hi Slav, thanks that worked if I set PaletteModes to "All" or "WebPalette". If I set it to "HSB", "HSV" or "RBGSlidders" the control doesn't render properly. In HSB mode, I get an error: Cannot read property 'style' of undefined from the method below. My client wants to use HSB and I'm not sure how to get this working.

    Thanks,
    Tim
    _updateHslSliderBackground: function(f, d) {
                var c = this._hslToRgb(f.h, f.s, 0.5);
                var e = d ? this.get_millionCustomColorsSlider() : this.get_millionColorsSlider();
                e._trackElement.style.backgroundColor = this._rgbValuesToHex(c.r, c.g, c.b);
  5. Slav
    Admin
    Slav avatar
    1355 posts

    Posted 08 Feb 2012 Link to this post

    Hi Tim,

    Indeed, a problem occurs when you place a RadColorPicker in an inactive tab of a TabContainer control and its property PaletteModes is set to HSB. This issue will be brought to the attention of our developers, although I cannot provide a firm estimate when a solution will be available. You can track the problem in PITS by following this link.

    For the time being, you can resolve this unexpected behavior by overriding the RadColorPicker client-side method _updateHslSliderBackground. Please add the following script at the end of your page in order to do so:
    <script type="text/javascript">
        Telerik.Web.UI.RadColorPicker.prototype._updateHslSliderBackground = function (hsl, isCustomColor) {
            var color = this._hslToRgb(hsl.h, hsl.s, 0.5);
            var slider = isCustomColor ? this.get_millionCustomColorsSlider() : this.get_millionColorsSlider();
            if (slider._trackElement) {
                slider._trackElement.style.backgroundColor = this._rgbValuesToHex(color.r, color.g, color.b);
            }
        }
    </script>

    Note that you still need to use the repaint() method, as explained in my previous post, to display properly the RadColorPicker control when it is not placed in the initial tab of a TabContainer.

    Regards,
    Slav
    the Telerik team
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
Back to Top