Last Updated: 16 Oct 2020 08:38 by ADMIN
Created on: 15 Oct 2020 15:32
Category: MonthYearPicker
Type: Feature Request
Unexpected behavior when declaring MonthYearNavigationSettings of RadMonthYearPicker inside a GridTemplateColumn

When multiple RadMonthYearPicker controls are rendered in different GridItems, clicking the pop-up button of the first picker opens the Calendar Month View of the last one.

Set up to reproduce:

<telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="True" Width="800px" RenderMode="Lightweight" OnNeedDataSource="RadGrid1_NeedDataSource">
    <MasterTableView AutoGenerateColumns="False">
                    <telerik:RadMonthYearPicker ID="DatePicker" runat="server" RenderMode="Lightweight">
                        <MonthYearNavigationSettings TodayButtonCaption="Heute" />


protected void RadGrid1_NeedDataSource(object sender, Telerik.Web.UI.GridNeedDataSourceEventArgs e)
    (sender as RadGrid).DataSource = Enumerable.Range(1, 6);

Peter Milchev
Posted on: 16 Oct 2020 08:38

Hello Henry,

There is another workaround option and we are sharing it here:

Place/load the following script after the ScriptManager, which will allow you to set the MonthYearNavigationSettings in the Markup without subscribing to the OnLoad event of any MonthYearPicker:


if (Telerik.Web.UI.RadMonthYearPicker) {
    Telerik.Web.UI.RadMonthYearPicker.prototype._initializePopupButton = function () {
        if (this._popupControlID.indexOf(this.get_id()) < 0) {
            var btn = $telerik.$(this.get_dateInput().get_wrapperElement()).find("#" + this._popupControlID);
            this._popupControlID = this.get_id() + "_popupButton";
            btn.attr("id", this._popupControlID);
        this._popupButton = $get(this._popupControlID);
        if (this._popupButton != null) {


Peter Milchev
Progress Telerik

Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive, special prizes, and more, for FREE?! Register now for DevReach 2.0(20).

Posted on: 16 Oct 2020 07:37

Workaround for the issue is to set the MonthYearNavigationSettings programmatically on the server-side Load event of the picker:

<telerik:RadMonthYearPicker ID="DatePicker" runat="server" RenderMode="Lightweight" OnLoad="DatePicker_Load">

C# code:

protected void DatePicker_Load(object sender, EventArgs e)
    var picker = sender as RadMonthYearPicker;
    //set all desired navigation settings here...
    picker.MonthYearNavigationSettings.TodayButtonCaption = "Heute";

Kind regards,
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.