This is a migrated thread and some comments may be shown as answers.

Color Picker not displaying correctly in AJAX TabContainer

4 Answers 134 Views
ColorPicker
This is a migrated thread and some comments may be shown as answers.
Tim
Top achievements
Rank 1
Tim asked on 01 Feb 2012, 07:52 PM
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>

4 Answers, 1 is accepted

Sort by
0
Slav
Telerik team
answered on 03 Feb 2012, 02:16 PM
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
0
Tim
Top achievements
Rank 1
answered on 03 Feb 2012, 03:37 PM
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);
0
Slav
Telerik team
answered on 08 Feb 2012, 09:04 AM
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 >>
0
Graham
Top achievements
Rank 1
answered on 03 Jul 2017, 07:41 AM

<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.

Tags
ColorPicker
Asked by
Tim
Top achievements
Rank 1
Answers by
Slav
Telerik team
Tim
Top achievements
Rank 1
Graham
Top achievements
Rank 1
Share this question
or