[Solved] RadDatePicker in Radgrid,the calendar didn't popup

[Charles]

I used RadDatePicker in EditItemTemplate of GridTemplateColumn in a Radgrid, following this demo:
http://demos.telerik.com/aspnet-ajax/calendar/examples/datepicker/databinding/defaultcs.aspx

But when page first loading, the calendar didn't popup if I click the button, if I changed the RadSkinManager option, the calendar will display correctly.
Could you please help me find the issue? Thanks.
I create a visual web part in SharePoint 2013 and use the control in the web part , code is below:

<%@ Assembly Name="$SharePoint.Project.AssemblyFullName$" %>
<%@ Assembly Name="Microsoft.Web.CommandUI, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="asp" Namespace="System.Web.UI" Assembly="System.Web.Extensions, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>
<%@ Import Namespace="Microsoft.SharePoint" %>
<%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="testdatepicker.ascx.cs" Inherits="LRM.Project_Site.testdatepicker.testdatepicker" %>
<%@ Register Assembly="Telerik.Web.UI, Version=2013.3.1114.45, Culture=neutral, PublicKeyToken=121fae78165ba3d4" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>






    <telerik:RadFormDecorator ID="QsfFromDecorator" runat="server" DecoratedControls="All" EnableRoundedCorners="false" />

    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

        <AjaxSettings>

            <telerik:AjaxSetting AjaxControlID="RadGrid1">

                <UpdatedControls>

                    <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1">

                    </telerik:AjaxUpdatedControl>

                    <telerik:AjaxUpdatedControl ControlID="sharedCalendar"></telerik:AjaxUpdatedControl>

                </UpdatedControls>

            </telerik:AjaxSetting>

            <telerik:AjaxSetting AjaxControlID="RadGrid2">

                <UpdatedControls>

                    <telerik:AjaxUpdatedControl ControlID="RadGrid2" LoadingPanelID="RadAjaxLoadingPanel1">

                    </telerik:AjaxUpdatedControl>

                </UpdatedControls>

            </telerik:AjaxSetting>

        </AjaxSettings>

    </telerik:RadAjaxManager>

    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">

    </telerik:RadAjaxLoadingPanel>

    <div class="controls">

        <div>

            <label>

                RadDatePicker in EditItemTemplate of GridTemplateColumn (additional shared calendar

                is in use):</label>

        </div>

        <telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="False" Width="300px"

            OnNeedDataSource="RadGrid1_NeedDataSource" OnUpdateCommand="RadGrid1_UpdateCommand"

            OnItemCreated="RadGrid1_ItemCreated">

            <MasterTableView Width="100%" EditMode="InPlace">

                <Columns>

                    <telerik:GridTemplateColumn HeaderText="Available dates" UniqueName="TemplateColumn">

                        <ItemTemplate>

                            <asp:Label runat="server" ID="date" Text='<%# Eval("Week", "{0:D}") %>'>

                            </asp:Label>



                        </ItemTemplate>

                        <EditItemTemplate>

                            <telerik:RadDatePicker ID="picker1" EnableAjaxSkinRendering ="true"  MinDate="2006/1/1" runat="server" DbSelectedDate='<%# Bind("Week") %>' AutoPostBack="true">

                            </telerik:RadDatePicker>

                        </EditItemTemplate>

                    </telerik:GridTemplateColumn>

                    <telerik:GridEditCommandColumn ButtonType="ImageButton">

                    </telerik:GridEditCommandColumn>

                </Columns>

            </MasterTableView>

        </telerik:RadGrid>

        <div style="display: none;">

            <telerik:RadCalendar ID="sharedCalendar" runat="server" EnableMultiSelect="false" >

            </telerik:RadCalendar>

        </div>

    </div>

    <div class="controls">

        <div>

            <label>

                RadDatePicker embedded in GridDateTimeColumn (internal "shared" calendar is in use):</label>

        </div>

        <telerik:RadGrid ID="RadGrid2" runat="server" AutoGenerateColumns="False" Width="300px"

            OnNeedDataSource="RadGrid2_NeedDataSource" OnUpdateCommand="RadGrid2_UpdateCommand">

            <MasterTableView Width="100%" EditMode="InPlace">

                <Columns>

                    <telerik:GridDateTimeColumn HeaderText="Available dates" DataField="Week" DataFormatString="{0:D}">

                    </telerik:GridDateTimeColumn>

                    <telerik:GridEditCommandColumn ButtonType="ImageButton">

                    </telerik:GridEditCommandColumn>

                </Columns>

            </MasterTableView>

        </telerik:RadGrid>

    </div>

using System;
using System.ComponentModel;
using System.Web.UI.WebControls.WebParts;
using Telerik.Web.UI;
using System.Linq;
using System.Data.Linq;
using System.Data;
using System.Collections;
using Microsoft.SharePoint;
using System.Web.UI.WebControls;

namespace LRM.Project_Site.testdatepicker
{
    [ToolboxItemAttribute(false)]
    public partial class testdatepicker : WebPart
    {
        LinqDataDataContext context = new LinqDataDataContext(Model.ConstList.ConnectionString);
        // Uncomment the following SecurityPermission attribute only when doing Performance Profiling on a farm solution
        // using the Instrumentation method, and then remove the SecurityPermission attribute when the code is ready
        // for production. Because the SecurityPermission attribute bypasses the security check for callers of
        // your constructor, it's not recommended for production purposes.
        // [System.Security.Permissions.SecurityPermission(System.Security.Permissions.SecurityAction.Assert, UnmanagedCode = true)]
        public testdatepicker()
        {
        }

        protected override void OnInit(EventArgs e)
        {
            base.OnInit(e);
            InitializeControl();
        }

        protected void Page_Load(object sender, EventArgs e)
        {
        }




        protected void RadGrid1_NeedDataSource(object source, GridNeedDataSourceEventArgs e)
        {
            RadGrid1.DataSource = context.HealthStatus;
        }

        protected void RadGrid1_UpdateCommand(object source, GridCommandEventArgs e)
        {

            RadDatePicker picker = (RadDatePicker)e.Item.FindControl("picker1");

            picker.EnableAjaxSkinRendering = true;
            object newDate = picker.DbSelectedDate;




        }



        protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
        {

            if (e.Item is GridEditableItem && e.Item.IsInEditMode)
            {

                GridEditableItem editItem = (GridEditableItem)e.Item;

                RadDatePicker picker = (RadDatePicker)editItem.FindControl("picker1");
                picker.EnableAjaxSkinRendering = true;
                picker.SharedCalendar = sharedCalendar;

            }

        }
        protected void RadGrid2_NeedDataSource(object source, GridNeedDataSourceEventArgs e)
        {

            RadGrid2.DataSource = context.HealthStatus;

        }



        protected void RadGrid2_UpdateCommand(object source, GridCommandEventArgs e)
        {

            RadDatePicker picker = ((e.Item as GridEditableItem)["Week"].Controls[0] as RadDatePicker);

            object newDate = picker.DbSelectedDate;





        }
    }
}

[Viktor Tachev]

Hi Charles,

From the provided code it would be hard to pinpoint what is preventing the popup from opening.

Common reason for the popup of RadDatePicker not to open is a JavaScript error on the page. Please ensure that there are no such errors when the page is opened initially.

Also would you try commenting out the RadAjaxManager, RadSkinManager and RadFormDecorator in order to test a more isolated scenario? With what skin is the popup not showing? Would you also try triggering a postback with a button and check if the popup will be shown then?


Regards,
Viktor Tachev
Telerik

[Charles]

Hi,
If I comment out the RadAjaxManager, the datepicker can work properly, the calendar would be popup.

[Viktor Tachev]

Hello Charles,

I tried replicating the issue, however I was unable to. I am sending a sample project, based on the code from your post that I used for testing. The calendar popup is opening as expected on my end. Give it a try and let me know if it is working for you.

In order for us to be able to pinpoint the cause for the described behavior we need to replicate the problem locally. Could you open a support ticket and send a runnable project where the issue is observed? This would allow us to debug the code and look for the cause of the problem.


Regards,
Viktor Tachev
Telerik