Color Picker not displaying correctly in AJAX TabContainer

[Tim]

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>

[Slav]

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

[Tim]

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);

[Slav]

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

[Graham]

<script type="text/javascript">
    function OnClientActiveTabChanged() {
        $find("<%=RadColorPicker2.ClientID %>").repaint();
    }
</script>

 

Does this still apply because when I try this in 2016.2.607.40 the $find returns null and there doesn't seem to be a repaint method.