RadColorPicker inside a Grid

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

    Posted 01 Jul 2010 Link to this post

    Requirements

    RadControls version

    2009.2 826

    .NET version

    3.5

    Visual Studio version

    2008

    programming language

    VB.net

    browser support

    all browsers supported by RadControls


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

    Instructions:
    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">  
        <title></title>  
    </head> 
    <body> 
        <form id="form1" runat="server">  
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">  
        </telerik:RadScriptManager> 
        <div> 
            <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">  
    <RowIndicatorColumn> 
    <HeaderStyle Width="20px"></HeaderStyle> 
    </RowIndicatorColumn> 
     
    <ExpandCollapseColumn> 
    <HeaderStyle Width="20px"></HeaderStyle> 
    </ExpandCollapseColumn> 
        <Columns> 
            <telerik:GridEditCommandColumn ButtonType="ImageButton" UniqueName="EditCommandColumn" HeaderStyle-Width="32px">  
                <HeaderStyle Width="32px"></HeaderStyle> 
                <ItemStyle HorizontalAlign="Center" /> 
            </telerik:GridEditCommandColumn> 
            <telerik:GridBoundColumn DataField="ID" DataType="System.Int32" HeaderText="ID"   
                ReadOnly="True" SortExpression="ID" UniqueName="ID">  
            </telerik:GridBoundColumn> 
            <telerik:GridBoundColumn DataField="Name" HeaderText="Name"   
                SortExpression="Name" UniqueName="Name">  
            </telerik:GridBoundColumn> 
            <telerik:GridTemplateColumn UniqueName="Color" HeaderText="Color" DataField="myColor" 
                SortExpression="myColor" AllowFiltering="false" HeaderStyle-Width="32px">  
                <ItemTemplate> 
                    <div style='width: 16px; height: 16px; background-color: <%# Eval("myColor") %>'></div> 
                </ItemTemplate> 
                <EditItemTemplate> 
                    <telerik:RadColorPicker runat="server" ShowIcon="true" ID="RadColorPicker1" SelectedColor='<%# HTML2Color(myCStr(Eval("myColor"))) %>' /> 
                </EditItemTemplate> 
            </telerik:GridTemplateColumn> 
            <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" /> 
            </telerik:GridButtonColumn> 
        </Columns> 
    </MasterTableView> 
            </telerik:RadGrid> 
        </div> 
        <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">  
            <DeleteParameters> 
                <asp:Parameter Name="ID" Type="Int32" /> 
            </DeleteParameters> 
            <UpdateParameters> 
                <asp:Parameter Name="Name" Type="String" /> 
                <asp:Parameter Name="myColor" Type="String" /> 
                <asp:Parameter Name="ID" Type="Int32" /> 
            </UpdateParameters> 
            <InsertParameters> 
                <asp:Parameter Name="Name" Type="String" /> 
                <asp:Parameter Name="myColor" Type="String" /> 
            </InsertParameters> 
        </asp:SqlDataSource> 
        </form> 
    </body> 
    </html> 
     

    Codebehind:
    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")  
            Else 
                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
    Admin
    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.

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