This is a migrated thread and some comments may be shown as answers.

[Solved] RadColorPicker inside a Grid

1 Answer 230 Views

Grid

This is a migrated thread and some comments may be shown as answers.

Dave asked on 01 Jul 2010, 02:38 PM

colorpickinginsidegrid.zip

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 String) As Color  
        
                    Return ColorTranslator.FromHtml(hex)  
        
                End Function 
        
                Function myCStr(ByVal dbstring As Object) As String 
        
                    If IsDBNull(dbstring) Then 
        
                        Return ("#ffffff")  
        
                    Else 
        
                        Return CStr(dbstring)  
        
                    End If 
        
                End Function 
        
                Protected Sub RadGrid1_ItemCommand(ByVal source As Object, ByVal 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

[Solved] RadColorPicker inside a Grid

1 Answer, 1 is accepted