New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

DataBinding

RadDatePicker in EditItemTemplate of GridTemplateColumn.

Available dates 
 
Wednesday, March 15, 2006  
 
 
Saturday, April 1, 2006  

RadDatePicker embedded in GridDateTimeColumn.


Available dates 
 
Wednesday, March 15, 2006
 
 
Saturday, April 1, 2006
Binding a RadDatePicker to a data source is easy provided through the DbSelectedDate property.  It works almost like the SelectedDate one, but will not throw an exception when it has been given a null value.

The example demonstrates binding a RadGrid control to a DataTable with dates, containing null values.  Binding the date for the RadDatePicker in template column is done via the DbSelectedDate property:

<EditItemTemplate>
    <telerik:RadDatePicker id="picker1" MinDate="2006/1/1" runat="server" DbSelectedDate='<%# Bind("Dates") %>'>
    </telerik:RadDatePicker>
</EditItemTemplate>

The second Grid in the presented example benefits from the GridDateTimeColumn option so that the markup/code is highly optimized. The GridDateTimeColumn's RadDatePicker uses a "shared" calendar internally.
This demo illustrates how date pickers with shared calendars can be used either as part of a built-in RadGrid GridDateTimeColumn or inside an edit template of a GridTemplateColumn. The second approach can be used for other data bound controls (repeaters, data lists, etc.) as well. Additionally, the DbSelectedDate property of RadDatePicker is of nullable type and hence supports null values.
  • DefaultVB.aspx
  • DefaultVB.aspx.vb
<%@ Page CodeFile="DefaultVB.aspx.vb" Language="vb" Inherits="Telerik.Web.Examples.DatePicker.Functionality.DataBinding.DefaultVB" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div id="Div1" class="demo-containers" runat="server">
        <div class="demo-container" runat="server" id="Div2">
            <div class="demo-container no-bg" style="max-width: 350px; padding-right: 20px">
                <div>
                    <h3>RadDatePicker in EditItemTemplate of GridTemplateColumn.</h3>
                    <label>
                        Shared calendar
                is in use:</label>
                </div>
                <telerik:RadGrid RenderMode="Lightweight" ID="RadGrid1" runat="server" AutoGenerateColumns="False"
                    OnNeedDataSource="RadGrid1_NeedDataSource" OnUpdateCommand="RadGrid1_UpdateCommand"
                    OnItemCreated="RadGrid1_ItemCreated">
                    <MasterTableView EditMode="InPlace">
                        <Columns>
                            <telerik:GridTemplateColumn HeaderText="Available dates" UniqueName="TemplateColumn">
                                <ItemTemplate>
                                    <asp:Label runat="server" ID="date" Text='<%# Eval("Dates", "{0:D}") %>'>
                                    </asp:Label>
                                    &nbsp;
                                </ItemTemplate>
                                <EditItemTemplate>
                                    <telerik:RadDatePicker RenderMode="Lightweight" ID="picker1" MinDate="2006/1/1" runat="server" DbSelectedDate='<%# Bind("Dates") %>'>
                                    </telerik:RadDatePicker>
                                </EditItemTemplate>
                            </telerik:GridTemplateColumn>
                            <telerik:GridEditCommandColumn UniqueName="EditColumn">
                            </telerik:GridEditCommandColumn>
                        </Columns>
                    </MasterTableView>
                </telerik:RadGrid>
                <div style="display: none;">
                    <telerik:RadCalendar RenderMode="Lightweight" ID="sharedCalendar" runat="server" EnableMultiSelect="false">
                    </telerik:RadCalendar>
                </div>
            </div>
            <div class="demo-container no-bg " style="max-width: 350px">
                <div>
                    <h3>RadDatePicker embedded in GridDateTimeColumn. </h3>
                    <br />
                    <label>
                        Internal "shared" calendar is in use:</label>
                </div>
                <telerik:RadGrid RenderMode="Lightweight" ID="RadGrid2" runat="server" AutoGenerateColumns="False"
                    OnNeedDataSource="RadGrid2_NeedDataSource" OnUpdateCommand="RadGrid2_UpdateCommand">
                    <MasterTableView EditMode="InPlace">
                        <Columns>
                            <telerik:GridDateTimeColumn HeaderText="Available dates" DataField="Dates" DataFormatString="{0:D}">
                            </telerik:GridDateTimeColumn>
                            <telerik:GridEditCommandColumn UniqueName="EditColumn">
                            </telerik:GridEditCommandColumn>
                        </Columns>
                    </MasterTableView>
                </telerik:RadGrid>
            </div>
        </div>
    </div>

    </form>
</body>
</html>

Support & Learning Resources

Find Assistance