Color picker in a grid

[Samantha]

I want to put a color picker in an edit template in a rad grid.  I need to populate the picker with colors from a database.

I know I can add the items like this:

radColor.Items.Add(

new Telerik.Web.UI.ColorPickerItem(ColorTranslator.FromHtml("#cccccc")));


And I know I can set the selected color with:

 

picker.SelectedColor =

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

 

 

What is the code I need to populate each color picker in the gridview though (from sql)?

[Todd Anglin]

Samantha-

I think you should be able to handle this scenario using a RadGrid Template Column (to hold your color picker control at design time) and the RadGrid ItemDataBound event. This even fires when each row of your grid is bound to data, so you can use it to properly intialize your RadColorPicker. When the event fires, you'll use the FindControl method to locate your color picker in the grid row and then set the SelectedColor with your DB value.

Alternatively, you can use ASP.NET Bind syntax to simply bind the RadColorPicker to your selcted color at design-time in the GridTemplateColumn (assuming your color value is in your Grid's bound data set):

<telerik:GridTemplateColumn HeaderText="Color">
  <EditItemTemplate>
    <telerik:RadColorPicker id="editCp" runat="server"
     SelectedColor='<%# Bind("Color") %>'>
    </telerik:RadColorPicker>
  </EditItemTemplate>
  <ItemTemplate>
     <telerik:RadColorPicker id="defaultCp" runat="server"
     SelectedColor='<%# Eval("Bool") %>'>
   </telerik:RadColorPicker>
  </ItemTemplate>
</telerik:GridTemplateColumn>

Hope that helps.

-Todd

[Samantha]

Thanks this seems to be working almost.  However, in the item template, the color picker is still able to be expanded (edited) - can I turn that off? 

[diller_56]

The way I did it was the following:

<

 

telerik:GridTemplateColumn HeaderText="Calendar Text Color">

 

 

<ItemTemplate>

 

 

<telerik:RadColorPicker runat="server"

 

 

ID="RadColorPicker2"

 

 

ShowIcon="true"

 

 

Enabled="false"

 

 

ShowEmptyColor="false" />

 

 

</ItemTemplate>

 

 

<HeaderStyle HorizontalAlign="Center" />

 

 

</telerik:GridTemplateColumn>

 

then in the code behind...:

protected

 

void RadGrid1_ItemDatabound(object sender, GridItemEventArgs e)

 

{

 

if (e.Item is GridDataItem && e.Item.IsDataBound)

 

{

System.Drawing.

ColorConverter cc = new System.Drawing.ColorConverter();

 

 

RadColorPicker cp1 = (RadColorPicker)e.Item.FindControl("RadColorPicker1");

 

cp1.SelectedColor = (System.Drawing.

Color)cc.ConvertFromString(DataBinder.Eval(e.Item.DataItem, "BackColor").ToString());

 

}

}

[Samantha]

Am I correct in assuming that if I want to send a color value (ie #cc0000) back to a database that I cannot use automatic updates/inserts?

[Yavor]

Hi Samantha,

In this case you cannot, because you need to convert from the bit presentation to a value like "red", where the color converter is used.

Sincerely yours,
Yavor
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Samantha]

I have the title of the color picker set to the hex value that I want to send back to the database - would there be a way I could use the title property with automatic updates/inserts to send it back to the database?

[Yavor]

Hello Samantha,

Can you please post the declaration of the color picker, as well as the code used to set the color value?

Kind regards,
Yavor
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.