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

Customize Embedded Controls

  • Demo Configurator
Calendar

  • MultiView Display1 row x 2 columns
  • Month Layout7 columns x 6 rows
StartDatePicker


EndDatePicker



Modifying the settings of the child controls provides greater flexibility when configuring the look and feel of the RadDateRangePicker.

You have complete control over the settings of the embedded RadCalendar and the two RadDatePicker components for selecting start and end date.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page CodeFile="DefaultCS.aspx.cs" Language="c#" AutoEventWireup="true" Inherits="Telerik.Web.Examples.DateRangePicker.Functionality.CustomizeEmbeddedControls.DefaultCS" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<!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 class="demo-container" style="max-width: 890px;" runat="server" id="containerDiv">
            <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
                <AjaxSettings>
                    <telerik:AjaxSetting AjaxControlID="RadDateRangePicker1">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="RadDateRangePicker1"></telerik:AjaxUpdatedControl>
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                    <telerik:AjaxSetting AjaxControlID="ConfigurationPanel1">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="RadDateRangePicker1"></telerik:AjaxUpdatedControl>
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                </AjaxSettings>
            </telerik:RadAjaxManager>
            <telerik:RadDateRangePicker RenderMode="Lightweight" ID="RadDateRangePicker1" runat="server" OnPreRender="RadDateRangePicker1_PreRender" Width="60%" style="margin:auto">
                <StartDatePicker DateInput-Label="Start Date: " Width="100%">
                </StartDatePicker>
                <EndDatePicker DateInput-Label="End Date: " Width="100%"></EndDatePicker>
            </telerik:RadDateRangePicker>
        </div>
    <qsf:ConfiguratorPanel ID="ConfigurationPanel1" runat="server" Orientation="Vertical">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Size="Medium">
                    <strong>Calendar</strong><br />
                    <br />
                    <ul class="fb-group custom-styles">
                        <li>
                            <qsf:DropDownList ID="DropDownList1" runat="server" AutoPostBack="true" Label="MultiView Display" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
                                <Items>
                                    <telerik:DropDownListItem Text="1 row x 2 columns" Value="1x2" Selected="True"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Text="1 row x 3 columns" Value="1x3"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Text="2 row x 2 columns" Value="2x2"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Text="3 row x 4 columns" Value="3x4"></telerik:DropDownListItem>
                                </Items>
                            </qsf:DropDownList>
                        </li>
                        <li>
                            <qsf:DropDownList ID="DropDownList2" runat="server" AutoPostBack="true" Label="Month Layout" OnSelectedIndexChanged="DropDownList2_SelectedIndexChanged">
                                <Items>
                                    <telerik:DropDownListItem Text="7 columns x 6 rows" Value="1" Selected="True"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Text="14 columns x 3 rows" Value="2"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Text="21 columns x 2 rows" Value="4"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Text="7 rows x 6 columns" Value="8"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Text="14 rows x 3 columns = 16" Value="16"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Text="21 rows x 2 columns" Value="32"></telerik:DropDownListItem>
                                </Items>
                            </qsf:DropDownList>
                        </li>

                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn2" runat="server" Size="Medium">
                    <strong>StartDatePicker</strong><br />
                    <br />
                    <ul class="fb-group custom-styles">
                        <li>
                            <label for="ComboStartPicker">Date Format</label><br />
                            <qsf:ComboBox AutoPostBack="true" runat="server" ID="ComboStartPicker" Width="200px"
                                OnSelectedIndexChanged="ComboStartPicker_SelectedIndexChanged">
                                <Items>
                                    <telerik:RadComboBoxItem Text="Short Date" Value="d"></telerik:RadComboBoxItem>
                                    <telerik:RadComboBoxItem Text="Long Date" Value="D"></telerik:RadComboBoxItem>
                                    <telerik:RadComboBoxItem Text="Full" Value="f"></telerik:RadComboBoxItem>
                                    <telerik:RadComboBoxItem Text="Custom - MMM d  yyyy" Value="MMM d  yyyy"></telerik:RadComboBoxItem>
                                </Items>
                            </qsf:ComboBox>
                        </li>
                        <li>
                            <span class="checkbox">
                                <asp:CheckBox runat="server" ID="CheckBox1" Checked="false" AutoPostBack="true" OnCheckedChanged="CheckBox1_CheckedChanged"></asp:CheckBox></span>
                            <label for="CheckBox1">Show Popup Button</label>
                        </li>
                        <li>
                            <span class="checkbox">
                                <asp:CheckBox runat="server" ID="CheckBox3" Checked="true" AutoPostBack="true" OnCheckedChanged="CheckBox3_CheckedChanged"></asp:CheckBox></span>
                            <label for="CheckBox1">Show Label</label>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn3" runat="server" Size="Medium">
                    <strong>EndDatePicker</strong><br />
                    <br />
                    <ul class="fb-group custom-styles">
                        <li>
                            <label for="ComboEndPicker">Date Format</label><br />
                            <qsf:ComboBox AutoPostBack="true" runat="server" ID="ComboEndPicker" Width="200px"
                                OnSelectedIndexChanged="ComboEndPicker_SelectedIndexChanged">
                                <Items>
                                    <telerik:RadComboBoxItem Text="Short Date" Value="d"></telerik:RadComboBoxItem>
                                    <telerik:RadComboBoxItem Text="Long Date" Value="D"></telerik:RadComboBoxItem>
                                    <telerik:RadComboBoxItem Text="Full" Value="f"></telerik:RadComboBoxItem>
                                    <telerik:RadComboBoxItem Text="Custom - MMM d  yyyy" Value="MMM d  yyyy"></telerik:RadComboBoxItem>
                                </Items>
                            </qsf:ComboBox>
                        </li>
                        <li>
                            <span class="checkbox">
                                <asp:CheckBox runat="server" ID="CheckBox2" Checked="false" AutoPostBack="true" OnCheckedChanged="CheckBox2_CheckedChanged"></asp:CheckBox></span>
                            <label for="CheckBox1">Show Popup Button</label>
                        </li>
                        <li>
                            <span class="checkbox">
                                <asp:CheckBox runat="server" ID="CheckBox4" Checked="true" AutoPostBack="true" OnCheckedChanged="CheckBox4_CheckedChanged"></asp:CheckBox></span>
                            <label for="CheckBox1">Show Label</label>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    <br />
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance