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

Databinding SelectedColor

9 Answers 490 Views
ColorPicker
This is a migrated thread and some comments may be shown as answers.
Achim
Top achievements
Rank 1
Achim asked on 19 Nov 2007, 12:37 PM
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

9 Answers, 1 is accepted

Sort by
0
Obi-Wan Kenobi
Top achievements
Rank 1
answered on 20 Nov 2007, 12:25 PM
This is a problem in RadColorPicker. Instead of this,
you can set the selectedColor from code behind
0
Jim
Top achievements
Rank 1
answered on 21 May 2008, 02:24 AM
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
0
Svetlina Anati
Telerik team
answered on 22 May 2008, 03:18 PM
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
0
Jim
Top achievements
Rank 1
answered on 22 May 2008, 06:26 PM
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>

0
Svetlina Anati
Telerik team
answered on 26 May 2008, 01:40 PM
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
0
rbrooks33
Top achievements
Rank 1
answered on 29 May 2008, 07:31 PM

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
0
Terry Hoiness
Top achievements
Rank 1
answered on 11 Aug 2009, 06:18 AM
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...
0
Kieran Harvey
Top achievements
Rank 1
answered on 16 Oct 2009, 06:11 AM
Thanks Terry your is the only solution that worked for me

thanks for sharing your code.
0
Peter
Top achievements
Rank 1
answered on 25 Jun 2016, 08:23 PM

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") %>' />

Tags
ColorPicker
Asked by
Achim
Top achievements
Rank 1
Answers by
Obi-Wan Kenobi
Top achievements
Rank 1
Jim
Top achievements
Rank 1
Svetlina Anati
Telerik team
rbrooks33
Top achievements
Rank 1
Terry Hoiness
Top achievements
Rank 1
Kieran Harvey
Top achievements
Rank 1
Peter
Top achievements
Rank 1
Share this question
or