RadColorPicker inside a Grid

2 posts, 0 answers
  1. Dave
    Dave avatar
    26 posts
    Member since:
    Aug 2012

    Posted 01 Jul 2010 Link to this post


    RadControls version

    2009.2 826

    .NET version


    Visual Studio version


    programming language


    browser support

    all browsers supported by RadControls

    The project is a small stand-alone snippet to demonstrate how to include a RadColorPicker in a RadGrid Column with 2-sided link to an MS-SQL database. We are simulating a Product grid with an optional color set.
    Works when loading, creating and modifying records.

    Unzip and use default page.
    Create a database with a table named "Products" with fields;
    ID (PK, int, not null)
    Name (nvarchar(50), not null)
    myColor (nchar(10), null)

    Default page:
    <%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %> 
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml">  
    <head runat="server">  
        <form id="form1" runat="server">  
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">  
            <telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="False" DataSourceID="SqlDataSource1" GridLines="None"   
                AllowAutomaticDeletes="true" AllowAutomaticInserts="true" AllowAutomaticUpdates="true">  
    <MasterTableView DataKeyNames="ID" DataSourceID="SqlDataSource1" CommandItemDisplay="Top">  
    <HeaderStyle Width="20px"></HeaderStyle> 
    <HeaderStyle Width="20px"></HeaderStyle> 
            <telerik:GridEditCommandColumn ButtonType="ImageButton" UniqueName="EditCommandColumn" HeaderStyle-Width="32px">  
                <HeaderStyle Width="32px"></HeaderStyle> 
                <ItemStyle HorizontalAlign="Center" /> 
            <telerik:GridBoundColumn DataField="ID" DataType="System.Int32" HeaderText="ID"   
                ReadOnly="True" SortExpression="ID" UniqueName="ID">  
            <telerik:GridBoundColumn DataField="Name" HeaderText="Name"   
                SortExpression="Name" UniqueName="Name">  
            <telerik:GridTemplateColumn UniqueName="Color" HeaderText="Color" DataField="myColor" 
                SortExpression="myColor" AllowFiltering="false" HeaderStyle-Width="32px">  
                    <div style='width: 16px; height: 16px; background-color: <%# Eval("myColor") %>'></div> 
                    <telerik:RadColorPicker runat="server" ShowIcon="true" ID="RadColorPicker1" SelectedColor='<%# HTML2Color(myCStr(Eval("myColor"))) %>' /> 
            <telerik:GridButtonColumn ConfirmText="Delete this product?" ConfirmDialogType="RadWindow" 
                ConfirmTitle="Delete" ButtonType="ImageButton" CommandName="Delete" Text="Delete" 
                UniqueName="DeleteColumn" HeaderStyle-Width="32px">  
                <HeaderStyle Width="32px"></HeaderStyle> 
                <ItemStyle HorizontalAlign="Center" /> 
        <asp:SqlDataSource ID="SqlDataSource1" runat="server"   
            ConnectionString="<%$ ConnectionStrings:CS_ColorPickingInsideGrid %>"   
            DeleteCommand="DELETE FROM [Products] WHERE [ID] = @ID"   
            InsertCommand="INSERT INTO [Products] ([Name], [myColor]) VALUES (@Name, @myColor)"   
            SelectCommand="SELECT [ID], [Name], [myColor] FROM [Products]"   
            UpdateCommand="UPDATE [Products] SET [Name] = @Name, [myColor] = @myColor WHERE [ID] = @ID">  
                <asp:Parameter Name="ID" Type="Int32" /> 
                <asp:Parameter Name="Name" Type="String" /> 
                <asp:Parameter Name="myColor" Type="String" /> 
                <asp:Parameter Name="ID" Type="Int32" /> 
                <asp:Parameter Name="Name" Type="String" /> 
                <asp:Parameter Name="myColor" Type="String" /> 

    Imports Telerik.Web.UI  
    Imports System.Data  
    Imports System.Drawing  
    Partial Class _Default  
        Inherits System.Web.UI.Page  
        Function HTML2Color(ByVal hex As StringAs Color  
            Return ColorTranslator.FromHtml(hex)  
        End Function 
        Function myCStr(ByVal dbstring As ObjectAs String 
            If IsDBNull(dbstring) Then 
                Return ("#ffffff")  
                Return CStr(dbstring)  
            End If 
        End Function 
        Protected Sub RadGrid1_ItemCommand(ByVal source As ObjectByVal e As GridCommandEventArgs) Handles RadGrid1.ItemCommand  
            Select Case e.CommandName  
                Case RadGrid.UpdateCommandName  
                    Dim editedItem As GridEditableItem = CType(e.Item, GridEditableItem)  
                    SqlDataSource1.UpdateParameters("myColor").DefaultValue = ColorTranslator.ToHtml(CType(editedItem.FindControl("RadColorPicker1"), RadColorPicker).SelectedColor)  
                Case RadGrid.PerformInsertCommandName  
                    Dim insertItem As GridEditableItem = CType(e.Item, GridEditableItem)  
                    SqlDataSource1.InsertParameters("myColor").DefaultValue = ColorTranslator.ToHtml(CType(insertItem.FindControl("RadColorPicker1"), RadColorPicker).SelectedColor)  
            End Select 
        End Sub 
    End Class 
  2. Yavor
    Yavor avatar
    11 posts

    Posted 07 Jul 2010 Link to this post

    Hello David,

    Thank you for contacting us and for providing this code library entry. I have converted it to a forum post, so that other community members can benefit from it as well. Naturally, your Telerik points have been updated for your involvement.

    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Back to Top