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

DataBinding

RadMonthYearPicker in EditItemTemplate of GridTemplateColumn

Available dates 
 
03/2010
04/2010

RadMonthYearPicker embedded in RadListView EditItemTemplate

Available dates
03/2010  
 
 
04/2010  
Binding a RadMonthYearPicker to a data source is easily provided through the DbSelectedDate property. It works almost like the SelectedDate one, but will not throw an exception when it is given a null value.

The example demonstrates binding a RadGrid and a RadListView controls to a DataTable with dates, containing null values. Binding the date for the MonthYearPicker in GridTemplateColumn and listview EditItemTemplate is done via the DbSelectedDate property.
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page CodeFile="DefaultCS.aspx.cs" Language="c#" Inherits="Telerik.Web.Examples.Calendar.MonthYearPicker.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>
    <link href="styles.css" rel="Stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadGrid1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1">
                    </telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="ListViewPanel">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="ListViewPanel" LoadingPanelID="RadAjaxLoadingPanel1">
                    </telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
    </telerik:RadAjaxLoadingPanel>

    <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: 40px">
                <div>
                   <h3>RadMonthYearPicker in EditItemTemplate of GridTemplateColumn</h3>
                </div>
                <telerik:RadGrid RenderMode="Lightweight" ID="RadGrid1" runat="server" AutoGenerateColumns="False" OnNeedDataSource="RadGrid1_NeedDataSource"
                    OnUpdateCommand="RadGrid1_UpdateCommand">
                    <MasterTableView EditMode="InPlace">
                        <Columns>
                            <telerik:GridTemplateColumn HeaderText="Available dates" UniqueName="TemplateColumn">
                                <ItemTemplate>
                                    <asp:Label runat="server" ID="date" Text='<%# Eval("Dates", "{0:MM/yyyy}") %>'>
                                    </asp:Label>
                                </ItemTemplate>
                                <EditItemTemplate>
                                    <telerik:RadMonthYearPicker RenderMode="Lightweight" ID="picker1" MinDate="01/2010" runat="server" DbSelectedDate='<%# Bind("Dates") %>'>
                                    </telerik:RadMonthYearPicker>
                                </EditItemTemplate>
                            </telerik:GridTemplateColumn>
                            <telerik:GridEditCommandColumn ButtonType="ImageButton" EditImageUrl="images/Edit.gif"
                                UpdateImageUrl="images/Update.gif" CancelImageUrl="images/Cancel.gif">
                            </telerik:GridEditCommandColumn>
                        </Columns>
                    </MasterTableView>
                </telerik:RadGrid>
            </div>
            <div class="demo-container no-bg " style="max-width: 380px">
                <div>
                    <h3>RadMonthYearPicker embedded in RadListView EditItemTemplate</h3>
                </div>
         
                    <telerik:RadListView ID="RadListView1" runat="server" DataKeyNames="Dates" OnNeedDataSource="RadListView1_NeedDataSource"
                        OnItemCommand="RadListView1_ItemCommand">
                        <LayoutTemplate>
                            <div class="RadListView RadListView_<%# Container.Skin %>">
                                <table class="listViewTable" cellspacing="0" cellpadding="0">
                                    <thead>
                                        <tr class="rlvHeader">
                                            <th>
                                                Available dates
                                            </th>
                                            <th>
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr id="itemPlaceholder" runat="server">
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </LayoutTemplate>
                        <ItemTemplate>
                            <tr class="rlvI">
                                <td>
                                    <asp:Label runat="server" ID="date" Text='<%# Eval("Dates", "{0:MM/yyyy}") %>'>
                                    </asp:Label>
                                </td>
                                <td>
                                    <asp:ImageButton ID="Button1" runat="server" CommandName="Edit" ImageUrl="images/Edit.gif">
                                    </asp:ImageButton>&nbsp;
                                </td>
                            </tr>
                        </ItemTemplate>
                        <AlternatingItemTemplate>
                            <tr class="rlvA">
                                <td>
                                    <asp:Label runat="server" ID="date" Text='<%# Eval("Dates", "{0:MM/yyyy}") %>'>
                                    </asp:Label>
                                </td>
                                <td>
                                    <asp:ImageButton ID="Button1" runat="server" CommandName="Edit" ImageUrl="images/Edit.gif">
                                    </asp:ImageButton>&nbsp;
                                </td>
                            </tr>
                        </AlternatingItemTemplate>
                        <EditItemTemplate>
                            <tr class="rlvIEdit">
                                <td>
                                    <telerik:RadMonthYearPicker RenderMode="Lightweight" ID="picker1" MinDate="01/2010" runat="server" DbSelectedDate='<%# Bind("Dates") %>'>
                                    </telerik:RadMonthYearPicker>
                                </td>
                                <td>
                                    <asp:ImageButton ID="Button1" runat="server" CommandName="Update" AlternateText="Update"
                                        ImageUrl="images/Update.gif"></asp:ImageButton>
                                    <asp:ImageButton ID="Button2" runat="server" CommandName="Cancel" AlternateText="Cancel"
                                        ImageUrl="images/Cancel.gif"></asp:ImageButton>
                                </td>
                            </tr>
                        </EditItemTemplate>
                    </telerik:RadListView>
         
            </div>
        </div>
    </div>

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

Support & Learning Resources

Find Assistance