Color picker in a grid

8 posts, 0 answers
  1. Samantha
    Samantha avatar
    50 posts
    Member since:
    May 2008

    Posted 06 Oct 2008 Link to this post

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

  2. Todd Anglin
    Todd Anglin avatar
    2040 posts
    Member since:
    Aug 2005

    Posted 06 Oct 2008 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Samantha
    Samantha avatar
    50 posts
    Member since:
    May 2008

    Posted 11 Oct 2008 Link to this post

    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? 
  5. diller_56
    diller_56 avatar
    3 posts
    Member since:
    Dec 2007

    Posted 13 Oct 2008 Link to this post

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

     

    }

    }

  6. Samantha
    Samantha avatar
    50 posts
    Member since:
    May 2008

    Posted 15 Oct 2008 Link to this post

    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?
  7. Yavor
    Admin
    Yavor avatar
    11 posts

    Posted 16 Oct 2008 Link to this post

    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.
  8. Samantha
    Samantha avatar
    50 posts
    Member since:
    May 2008

    Posted 16 Oct 2008 Link to this post

    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?
  9. Yavor
    Admin
    Yavor avatar
    11 posts

    Posted 20 Oct 2008 Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017