Databinding SelectedColor

[Achim]

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

[Obi-Wan Kenobi]

This is a problem in RadColorPicker. Instead of this,
you can set the selectedColor from code behind

[Jim]

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

[Svetlina Anati]

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

[Jim]

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>

[Svetlina Anati]

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

[rbrooks33]

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

[Terry Hoiness]

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

[Kieran Harvey]

Thanks Terry your is the only solution that worked for me

thanks for sharing your code.

[Peter]

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