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

RadColorPicker inside a Grid

1 Answer 128 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Dave
Top achievements
Rank 2
Dave asked on 01 Jul 2010, 02:38 PM

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 
 

1 Answer, 1 is accepted

Sort by
0
Yavor
Telerik team
answered on 07 Jul 2010, 07:07 AM
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
Tags
Grid
Asked by
Dave
Top achievements
Rank 2
Answers by
Yavor
Telerik team
Share this question
or