Silk skin

MonthYearPicker - DataBinding

RadMonthYearPicker in EditItemTemplate of GridTemplateColumn

Available dates 
 
03/2010
04/2010

RadMonthYearPicker embedded in RadListView EditItemTemplate

Available dates
03/2010  
 
 
04/2010  
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB
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.
  • DefaultVB.aspx
  • DefaultVB.aspx.vb
  • styles.css
<%@ Page CodeFile="DefaultVB.aspx.vb" Language="vb" Inherits="Telerik.Web.Examples.Calendar.MonthYearPicker.DataBinding.DefaultVB" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<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

Help Us Improve

Was this example helpful?