The following examples demonstrate how to add the UIHint property to a DynamicField field of a GridView control. The property is set to use a custom field template DateCalendar to displays a Calendar control for editing the DiscontinuedDate field of the Product table in the AdventureWorksLT database.
The following code snippet shows the page that uses the custom field template.
<%@ Page Language="VB" %>
<script runat="server">
Protected Sub Page_Init(ByVal sender As Object, ByVal e As System.EventArgs)
DynamicDataManager1.RegisterControl(ProductsGridView)
End Sub
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html >
<head id="Head1" runat="server">
<title>UIHint Property Sample</title>
<link href="~/Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div>
<h2><%= ProductsDataSource.TableName%> table</h2>
<asp:DynamicDataManager ID="DynamicDataManager1" runat="server"
AutoLoadForeignKeys="true" />
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true"/>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:GridView ID="ProductsGridView" runat="server" DataSourceID="ProductsDataSource"
AutoGenerateEditButton="true"
AutoGenerateColumns="false"
AllowSorting="true"
AllowPaging="true">
<Columns>
<asp:DynamicField DataField="Name" />
<asp:DynamicField DataField="ProductNumber" />
<asp:DynamicField DataField="DiscontinuedDate" UIHint="DateCalendar" />
</Columns>
<EmptyDataTemplate>
There are currently no items in this table.
</EmptyDataTemplate>
</asp:GridView>
<!-- This example uses Microsoft SQL Server and connects -->
<!-- to the AdventureWorksLT sample database. -->
<asp:LinqDataSource ID="ProductsDataSource" runat="server"
EnableUpdate="true"
TableName="Products"
ContextTypeName="AdventureWorksLTDataContext" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
<%@ Page Language="C#" %>
<script runat="server">
protected void Page_Init(object sender, EventArgs e)
{
DynamicDataManager1.RegisterControl(ProductsGridView);
}
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html >
<head id="Head1" runat="server">
<title>UIHint Property Sample</title>
<link href="~/Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div>
<h2><%= ProductsDataSource.TableName%> table</h2>
<asp:DynamicDataManager ID="DynamicDataManager1" runat="server"
AutoLoadForeignKeys="true" />
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true"/>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:GridView ID="ProductsGridView" runat="server" DataSourceID="ProductsDataSource"
AutoGenerateEditButton="true"
AutoGenerateColumns="false"
AllowSorting="true"
AllowPaging="true">
<Columns>
<asp:DynamicField DataField="Name" />
<asp:DynamicField DataField="ProductNumber" />
<asp:DynamicField DataField="DiscontinuedDate" UIHint="DateCalendar" />
</Columns>
<EmptyDataTemplate>
There are currently no items in this table.
</EmptyDataTemplate>
</asp:GridView>
<asp:LinqDataSource ID="ProductsDataSource" runat="server"
EnableUpdate="true"
TableName="Products"
ContextTypeName="AdventureWorksLTDataContext" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
The following code snippet shows the code behind the custom field template.
<%@ Control Language="VB" Inherits="System.Web.DynamicData.FieldTemplateUserControl" %>
<script runat="server">
Function GetDateString() As String
If Not (FieldValue Is Nothing) Then
Dim dt As DateTime = CType(FieldValue, DateTime)
Return dt.ToShortDateString()
Else
Return String.Empty
End If
End Function
</script>
<%# GetDateString() %>
<%@ Control Language="C#" Inherits="System.Web.DynamicData.FieldTemplateUserControl" %>
<script runat="server">
string GetDateString()
{
if (FieldValue != null)
{
DateTime dt = (DateTime)FieldValue;
return dt.ToShortDateString();
}
else
{
return string.Empty;
}
}
</script>
<%# GetDateString() %>
The following code snippet shows the custom field template.
<%@ Control Language="VB" Inherits="System.Web.DynamicData.FieldTemplateUserControl" %>
<script runat="server">
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
TextBox1.ToolTip = Column.Description
SetUpValidator(RequiredFieldValidator1)
SetUpValidator(RegularExpressionValidator1)
SetUpValidator(DynamicValidator1)
End Sub
Protected Overrides Sub ExtractValues(ByVal dictionary As IOrderedDictionary)
dictionary(Column.Name) = ConvertEditedValue(TextBox1.Text)
End Sub
Public Overrides ReadOnly Property DataControl() As Control
Get
Return TextBox1
End Get
End Property
Protected Sub Calendar1_SelectionChanged(ByVal sender As Object, ByVal e As System.EventArgs)
TextBox1.Text = Calendar1.SelectedDate.ToString("d")
End Sub
Function GetDateString() As String
If Not (FieldValue Is Nothing) Then
Dim dt As DateTime = CType(FieldValue, DateTime)
Return dt.ToShortDateString()
Else
Return String.Empty
End If
End Function
</script>
<asp:TextBox ID="TextBox1" runat="server"
Text='<%# GetDateString() %>'
MaxLength="10">
</asp:TextBox>
<asp:Calendar ID="Calendar1" runat="server"
VisibleDate='<%# IIf(FieldValue Is Nothing, DateTime.Now, FieldValue) %>'
SelectedDate='<%# IIf(FieldValue Is Nothing, DateTime.Now, FieldValue) %>'
OnSelectionChanged="Calendar1_SelectionChanged" />
<asp:RequiredFieldValidator runat="server" ID="RequiredFieldValidator1"
CssClass="droplist" ControlToValidate="TextBox1" Display="Dynamic" Enabled="false" />
<asp:RegularExpressionValidator runat="server" ID="RegularExpressionValidator1"
CssClass="droplist" ControlToValidate="TextBox1" Display="Dynamic" Enabled="false" />
<asp:DynamicValidator runat="server" ID="DynamicValidator1"
CssClass="droplist" ControlToValidate="TextBox1" Display="Dynamic" />
<%@ Control Language="C#" Inherits="System.Web.DynamicData.FieldTemplateUserControl" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e) {
TextBox1.ToolTip = Column.Description;
SetUpValidator(RequiredFieldValidator1);
SetUpValidator(RegularExpressionValidator1);
SetUpValidator(DynamicValidator1);
}
protected override void ExtractValues(IOrderedDictionary dictionary) {
dictionary[Column.Name] = ConvertEditedValue(TextBox1.Text);
}
public override Control DataControl
{
get
{
return TextBox1;
}
}
protected void Calendar1_SelectionChanged(object sender, EventArgs e)
{
TextBox1.Text = Calendar1.SelectedDate.ToString("d");
}
string GetDateString()
{
if (FieldValue != null)
{
DateTime dt = (DateTime)FieldValue;
return dt.ToShortDateString();
}
else
{
return string.Empty;
}
}
</script>
<asp:TextBox ID="TextBox1" runat="server"
Text='<%# GetDateString() %>'
MaxLength="10">
</asp:TextBox>
<asp:Calendar ID="Calendar1" runat="server"
VisibleDate='<%# (FieldValue != null) ? FieldValue : DateTime.Now %>'
SelectedDate='<%# (FieldValue != null) ? FieldValue : DateTime.Now %>'
OnSelectionChanged="Calendar1_SelectionChanged" />
<asp:RequiredFieldValidator runat="server" ID="RequiredFieldValidator1"
CssClass="droplist" ControlToValidate="TextBox1" Display="Dynamic" Enabled="false" />
<asp:RegularExpressionValidator runat="server" ID="RegularExpressionValidator1"
CssClass="droplist" ControlToValidate="TextBox1" Display="Dynamic" Enabled="false" />
<asp:DynamicValidator runat="server" ID="DynamicValidator1"
CssClass="droplist" ControlToValidate="TextBox1" Display="Dynamic" />
To compile the example code, you need the following:
Visual Studio 2008 Service Pack 1 or Visual Developer 2008 Express Edition Service Pack 1.
The AdventureWorksLT sample database. For information about how to download and install the SQL Server sample database, see Microsoft SQL Server Product Samples: Database on the CodePlex site. Make sure that you install the correct version of the sample database for the version of SQL Server that you are running (SQL Server 2005 or SQL Server 2008).
A Dynamic Data Web site. This enables you to create a data context for the database and the class that contains the data field to customize and the methods to override. In addition, it creates the environment in which to use the page described before. For more information, see Walkthrough: Creating a New ASP.NET Dynamic Data Web Site Using Scaffolding.