Home / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > ColorPicker > Color Picker not displaying correctly in AJAX TabContainer

• Tim

  Posted on Feb 1, 2012 (permalink)

  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>

  
  

  Reply

• Slav Slav

  Posted on Feb 3, 2012 (permalink)

  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

  Reply


• Tim

  Posted on Feb 3, 2012 (permalink)

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

  Reply

• Slav Slav

  Posted on Feb 8, 2012 (permalink)

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

  Reply

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > ColorPicker > Color Picker not displaying correctly in AJAX TabContainer