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 |