Databinding SelectedColor

10 posts, 0 answers
  1. Achim
    Achim avatar
    13 posts
    Member since:
    Sep 2007

    Posted 19 Nov 2007 Link to this post

    Hello!

    i try to use the Colorpicker inside a FormView and want to bind property SelectedColor to SqlDataSource using the following code:
    <telerik:RadColorPicker ID="colpickschedule_color" runat="server" Preset="Standard"
     ShowIcon="True" SelectedColor='<%# Bind("color") %>'>
    </telerik:RadColorPicker>
    when opening the form it says "specified cast is not valid".. this happanes when field in database contains some hex-color as string (#cacaca) and for DbNull-Values...

    also tried something with ColorTranslator, but this only works for displaying data, null values throws some other errors..

    can someone please explain how to do this? thank you!
    achim
  2. Obi-Wan Kenobi
    Obi-Wan Kenobi  avatar
    460 posts
    Member since:
    Aug 2007

    Posted 20 Nov 2007 Link to this post

    This is a problem in RadColorPicker. Instead of this,
    you can set the selectedColor from code behind
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Jim
    Jim avatar
    19 posts
    Member since:
    Feb 2008

    Posted 20 May 2008 Link to this post

    I am having problems with this in 2008.1.  Can anyone else confirm this is still a problem?   Does anyone have any code they'd like to post?

    I am trying to make the RadColorPicker work in a grid with inline editing.

    - Jim
  5. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 22 May 2008 Link to this post

    Hi Jim,

    I am not quite sure what is your exact scenario and what exactly does not work.

    Please, open a new support ticket and provide a sample, fully runnable project (including DB, if needed) along with a more detailed explanation of the problem and screenshots if possible.

    Once we receive it, we will do our best to help you.

    Best wishes,
    Svetlina
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  6. Jim
    Jim avatar
    19 posts
    Member since:
    Feb 2008

    Posted 22 May 2008 Link to this post

    Hi Svetlina,
     
    I have updated an existing service ticket with these details, but for benefit of the forum, here is cut-and-paste code that shows the problem.  The code below will generate an error.  If you change the templated binding line below from this SelectedColor='<%# Eval("Color") %>' to this  SelectedColor="#bf00bd", it will work.

    <%

    @ Page Language="C#" AutoEventWireup="true" %>

    <%

    @ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

     

    <

    script runat="server">

    protected void RadGrid1_NeedDataSource(object source, Telerik.Web.UI.GridNeedDataSourceEventArgs e)

    {

    System.Data.

    DataTable dtDummy = new System.Data.DataTable();

    System.Data.

    DataRow newRow;

    dtDummy.Columns.Add(

    "Name", System.Type.GetType("System.String"));

    dtDummy.Columns.Add(

    "Color", System.Type.GetType("System.String"));

    newRow = dtDummy.NewRow();

    newRow[

    "Name"] = "Red";

    newRow[

    "Color"] = "#bf0000";

    dtDummy.Rows.Add(newRow);

    newRow = dtDummy.NewRow();

    newRow[

    "Name"] = "Green";

    newRow[

    "Color"] = "#00ff03";

    dtDummy.Rows.Add(newRow);

    newRow = dtDummy.NewRow();

    newRow[

    "Name"] = "Blue";

    newRow[

    "Color"] = "#0003ff";

    dtDummy.Rows.Add(newRow);

    RadGrid1.DataSource = dtDummy;

    }

    </

    script>

    <

    html xmlns="http://www.w3.org/1999/xhtml">

    <

    head runat="server">

    <title>Bind Color Picker</title>

    </

    head>

    <

    body>

    <form id="form1" runat="server">

    <div>

    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">

    </telerik:RadScriptManager>

    <telerik:RadGrid ID="RadGrid1" runat="server" OnNeedDataSource="RadGrid1_NeedDataSource"

    AutoGenerateColumns="False" GridLines="None">

    <MasterTableView CurrentResetPageIndexAction="SetPageIndexToFirst" Dir="LTR" Frame="Border"

    TableLayout="Auto" CommandItemDisplay="Top" EditMode="InPlace" ShowFooter="True">

    <RowIndicatorColumn Visible="False">

    <HeaderStyle Width="20px"></HeaderStyle>

    </RowIndicatorColumn>

    <ExpandCollapseColumn Visible="False" Resizable="False">

    <HeaderStyle Width="20px"></HeaderStyle>

    </ExpandCollapseColumn>

    <Columns>

    <telerik:GridBoundColumn CurrentFilterFunction="NoFilter" DataField="Name" FilterListOptions="VaryByDataType"

    ForceExtractValue="None" HeaderText="Name" UniqueName="Name">

    </telerik:GridBoundColumn>

    <telerik:GridTemplateColumn HeaderText="TextColor" UniqueName="TextColor">

    <ItemTemplate>

    <telerik:RadColorPicker ID="defaultRadColorPicker1" runat="server" Preset="Standard"

    SelectedColor='<%# Eval("Color") %>'>

    </telerik:RadColorPicker>

    </ItemTemplate>

    </telerik:GridTemplateColumn>

    </Columns>

    <EditFormSettings>

    <PopUpSettings ScrollBars="None"></PopUpSettings>

    </EditFormSettings>

    </MasterTableView>

    </telerik:RadGrid>

    </div>

    </form>

    </

    body>

    </

    html>

  7. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 26 May 2008 Link to this post

    Hi Jim,

    Thank you for provided code and for clarifying your scenario.

    The problem is caused by the fact that only primitive type properties such as string, int, bool are bindable declaratively. Therefore you cannot provide the color through declarative binding.

    What I can suggest is to use the RadGrid's Item_DataBound server event handler and set the selected color  using the code behind where you can do the needed casts as shown below:

     picker.SelectedColor = ColorTranslator.FromHtml((DataBinder.Eval(e.Item.DataItem, "Color").ToString()));   


    Sincerely yours,
    Svetlina
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  8. rbrooks33
    rbrooks33 avatar
    13 posts
    Member since:
    May 2007

    Posted 29 May 2008 Link to this post

    Hi Jim, in case you haven't gotten the answer yet here's mine. I'm saving the "#ffffffff" as the string version of the color in the database.

    To bind to the colorpicker I do this in the grid's ItemBound event:

                        'SET COLOR  
                        Dim cp As Telerik.Web.UI.RadColorPicker = e.Item.FindControl("colorContactColor")  
                        If Not cp Is Nothing Then  
                            If Not e.Item.DataItem Is Nothing Then  
                                cmd = "end_GetOwnerFieldValue " + e.Item.DataItem("ContactID").ToString + ", " + Me.lblGroupID.Text + ", 'Color'"  
                                Dim mycolor As String = Me.ExecuteDBScalar(cmd)  
                                cp.SelectedColor = ColorTranslator.FromHtml(mycolor) ' Color.FromName(e.Item.DataItem("Color").ToString) 'Color.FromName("Green")  
                            End If  
                        End If  
     

    Upon update (on the "ColorSelected" event) I prefix a "#" before saving as so:

                Dim cp As Telerik.Web.UI.RadColorPicker = CType(sender, Telerik.Web.UI.RadColorPicker)  
                Dim selectedcolor As String = cp.SelectedColor.Name  
                cmd = "exec end_AddUpdateOwnerFields " + contactid + ", " + Me.lblGroupID.Text + ", NULL, NULL, NULL, '#" + selectedcolor + "'"  
                Me.ExecuteDB(cmd)  
     

    Hope that helps!

    Regards, Rodney
  9. Terry Hoiness
    Terry Hoiness avatar
    13 posts
    Member since:
    Aug 2008

    Posted 11 Aug 2009 Link to this post

    I beat my head against the wall on this one as well, but with the DetailsView object.

    Here was an alternate solution I came up with for multiple color pickers that may save others some time:

    The Template Field in the DetailsView:
                <asp:TemplateField HeaderText="Top Bar Color" SortExpression="TopColor">  
                    <EditItemTemplate> 
                        <telerik:RadColorPicker ID="txtTopColor" runat="server" ShowIcon="true" PaletteModes="HSB, HSV, RGBSliders" Preset="standard"  style="float:left;" CurrentColorText='<%#Eval("TopColor") %>' OnDataBinding="ColorBind">  
                        </telerik:RadColorPicker> 
                          
                    </EditItemTemplate> 
                </asp:TemplateField> 
     
    Take note of the OnDataBinding event as well as the CurrentColorText property.

    The ColorBind function:
        protected void ColorBind(object sender, EventArgs e)  
        {  
            RadColorPicker rc = (RadColorPicker)sender;  
            if (rc.CurrentColorText!="(Current Color is {0})")  
            {  
                rc.SelectedColor = System.Drawing.ColorTranslator.FromHtml(rc.CurrentColorText);  
            }  
        } 

    ItemUpdating Event of the DetailsView (This includes all 7 of the color pickers I used):
        protected void DetailsView1_ItemUpdating(object sender, DetailsViewUpdateEventArgs e)  
        {  
            e.NewValues["TopColor"] = System.Drawing.ColorTranslator.ToHtml(((RadColorPicker)DetailsView1.FindControl("txtTopColor")).SelectedColor);  
            e.NewValues["Top2Color"] = System.Drawing.ColorTranslator.ToHtml(((RadColorPicker)DetailsView1.FindControl("txtTop2Color")).SelectedColor);  
            e.NewValues["SideColor"] = System.Drawing.ColorTranslator.ToHtml(((RadColorPicker)DetailsView1.FindControl("txtSideColor")).SelectedColor);  
            e.NewValues["SBLinkColor"] = System.Drawing.ColorTranslator.ToHtml(((RadColorPicker)DetailsView1.FindControl("txtSBLinkColor")).SelectedColor);  
            e.NewValues["BgColor"] = System.Drawing.ColorTranslator.ToHtml(((RadColorPicker)DetailsView1.FindControl("txtBgColor")).SelectedColor);  
            e.NewValues["HeaderColor"] = System.Drawing.ColorTranslator.ToHtml(((RadColorPicker)DetailsView1.FindControl("txtHeaderColor")).SelectedColor);  
            e.NewValues["LinkColor"] = System.Drawing.ColorTranslator.ToHtml(((RadColorPicker)DetailsView1.FindControl("txtLinkColor")).SelectedColor);  
            e.Cancel = false;  
              
        } 


    Hope this helps others (including the System.Drawing class would be the more eloquent way of implementing this, but the code provided is strictly for educational purposes)

    It's a hack until there is a more eloquent solution, but it works for now...
  10. Kieran Harvey
    Kieran Harvey avatar
    3 posts
    Member since:
    Sep 2009

    Posted 16 Oct 2009 Link to this post

    Thanks Terry your is the only solution that worked for me

    thanks for sharing your code.
  11. Peter
    Peter avatar
    1 posts
    Member since:
    Jan 2014

    Posted 25 Jun Link to this post

    The easiest way is to create a new control that includes the RadColorPicker control containing a property e.g. DBSelectedColor.

    This will allow you to make direct bind to DataSource.

    .ascx file:

    <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ucRadColorPicker.ascx.cs" Inherits="ucRadColorPicker" %>
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
     
    <telerik:RadColorPicker ID="RadColorPicker1" RenderMode="Lightweight" runat="server" ShowIcon="true" PaletteModes="HSB" Preset="Standard">
    </telerik:RadColorPicker>

    .cs file:

     

    public partial class ucRadColorPicker : UserControl
    {
      public string DBSelectedColor
      {
        get
        {
          return System.Drawing.ColorTranslator.ToHtml(RadColorPicker1.SelectedColor);
        }
        set
        {
          if (value != "")
          {
            RadColorPicker1.SelectedColor = System.Drawing.ColorTranslator.FromHtml(value);
          }
        }
      }
    }

     

    Control usage:

       

    <uc1:ucRadColorPicker runat="server" id="ucRadColorPicker1" DBSelectedColor ='<%# Bind("Color") %>' />

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017