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

DataBinding

RadDateRangePicker in EditItemTemplate of GridTemplateColumn.
Request NumberRegistered VacationsDays Count  
100045
5  
100115 Sunday, August 15, 2021 -  Tuesday, September 14, 2021 31
100245  - 
100305  - 
100315 Friday, October 1, 2021 -  Friday, October 1, 2021 1
Binding a RadDateRangePicker to a data source is easy provided through the DbRangeSelectionStartDate and DbRangeSelectionEndDate properties.  They work almost like the RangeSelectionStartDate and RangeSelectionEndDate properties, but will not throw an exception when same has been given null values.

The example demonstrates binding a RadGrid control to a DataTable with dates, containing null values.  Binding the dates for the RadDateRangePicker in template column is done via the DbRangeSelectionStartDate and DbRangeSelectionEndDate properties:

<EditItemTemplate>
    <telerik:RadDateRangePicker ID="RadDateRangePicker1" CssClass="RadDateRangePicker" runat="server"
    DbRangeSelectionStartDate='<%# Bind("StartDate") %>'
    DbRangeSelectionEndDate='<%# Bind("EndDate") %>'>
    </telerik:RadDateRangePicker>
</EditItemTemplate>
This demo illustrates how daterangepicker can be used inside an edit template of a GridTemplateColumn. Additionally, the DbRangeSelectionStartDate and DbRangeSelectionEndDate properties of RadDateRangePicker are of nullable type and hence support null values.
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page CodeFile="DefaultCS.aspx.cs" Language="c#" Inherits="Telerik.Web.Examples.DateRangePicker.Functionality.DataBinding.DefaultCS" %>

<%@ 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">
                <div>
                    <h3>RadDateRangePicker in EditItemTemplate of GridTemplateColumn.</h3>
                </div>

                <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
                    <AjaxSettings>
                        <telerik:AjaxSetting AjaxControlID="RadGrid1">
                            <UpdatedControls>
                                <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
                            </UpdatedControls>
                        </telerik:AjaxSetting>
                    </AjaxSettings>
                </telerik:RadAjaxManager>
 
                <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1" />


                <telerik:RadGrid RenderMode="Lightweight" ID="RadGrid1" runat="server" AutoGenerateColumns="False" Width="750"
                    OnNeedDataSource="RadGrid1_NeedDataSource"
                    OnUpdateCommand="RadGrid1_UpdateCommand"
                    OnInsertCommand="RadGrid1_InsertCommand"
                    OnDeleteCommand="RadGrid1_DeleteCommand">
                    <MasterTableView EditMode="InPlace" DataKeyNames="Id" CommandItemDisplay="Top">
                        <Columns>
                            <telerik:GridBoundColumn UniqueName="Id" ReadOnly="true" Visible="true" HeaderText="Request Number" DataField="Id"></telerik:GridBoundColumn>
                            <telerik:GridTemplateColumn HeaderText="Registered Vacations" UniqueName="TemplateColumn">
                                <ItemTemplate>
                                    <asp:Label runat="server" ID="startDate" Text='<%# Eval("StartDate", "{0:D}") %>'>
                                    </asp:Label>&nbsp;-&nbsp;
                                    <asp:Label runat="server" ID="endDate" Text='<%# Eval("EndDate", "{0:D}") %>'>
                                    </asp:Label>
                                </ItemTemplate>
                                <EditItemTemplate>
                                    <telerik:RadDateRangePicker ID="RadDateRangePicker1" CssClass="RadDateRangePicker" runat="server"
                                        DbRangeSelectionStartDate='<%# Bind("StartDate") %>'
                                        DbRangeSelectionEndDate='<%# Bind("EndDate") %>'>
                                        <StartDatePicker>
                                            <DateInput Label="Start date: "></DateInput>
                                        </StartDatePicker>
                                        <EndDatePicker>
                                            <DateInput Label="End date: "></DateInput>
                                        </EndDatePicker>
                                    </telerik:RadDateRangePicker>
                                </EditItemTemplate>
                            </telerik:GridTemplateColumn>
                            <telerik:GridTemplateColumn UniqueName="DaysOffCount" HeaderText="Days Count" ReadOnly="true">
                                <ItemTemplate>
                                    <asp:Label runat="server" ID="Label1" Text='<%# (Eval("EndDate") != DBNull.Value && Eval("StartDate") != DBNull.Value) ? ((Convert.ToDateTime(Eval("EndDate")) - Convert.ToDateTime(Eval("StartDate"))).Days+1).ToString() : "" %>'></asp:Label>
                                </ItemTemplate>
                            </telerik:GridTemplateColumn>
                            <telerik:GridEditCommandColumn UniqueName="EditColumn"></telerik:GridEditCommandColumn>
                            <telerik:GridClientDeleteColumn UniqueName="DeleteColumn"></telerik:GridClientDeleteColumn>
                        </Columns>
                    </MasterTableView>
                </telerik:RadGrid>


            </div>

        </div>
    </div>

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

Support & Learning Resources

Find Assistance