This is a migrated thread and some comments may be shown as answers.

RadDatePicker PopUp Position

22 Answers 485 Views

Calendar

This is a migrated thread and some comments may be shown as answers.

22 Answers, 1 is accepted

answered on 17 Apr 2012, 02:38 PM

Hello,

Did anyone solve this issue? I am having a similar problem, but from what Dimo said, there are issues with the DatePicker when placed inside containers with uncommon positioning. I am using position:absolute for a containing div. When I remove position:absolute;top:100px;left:200px;right:0px;bottom:0px;
it works fine but it messes up the layout of my page. I have tried using the EnableScreenBoundaryDetection property but it didn't do anything.

<div style="padding:5px;position:absolute;top:100px;left:200px;right:0px;bottom:0px;overflow:auto;">

<cc2:DTPDatePicker ID="testdatepicker" runat="server"/>

</div>

Does anyone have an idea what I can try? Also let me know what else I can provide.

answered on 20 Apr 2012, 02:23 PM

testPage.zip

Hello Ryan,

I am afraid the issue you are facing is not replicable on our side. I am sending you my test project for your reference. Please let me know if you manage to reproduce what you are getting in this project,
and what steps to follow, so that we can test it too.

Greetings,
Galin
the Telerik team

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.

answered on 21 Sep 2012, 11:52 AM

please find the HTML code followed by C# code



<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="TestPrj._Default" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

</head>

<body>

<form id="form1" runat="server">

<asp:ScriptManager runat="server" ID="scrptCaseMgmnt">

</asp:ScriptManager>

<asp:UpdatePanel ID="upnlAPTPCM" runat="server" UpdateMode="Conditional">

<ContentTemplate>

<table style="width: 100%;" cellpadding="1" cellspacing="1" border="0" id="Table18"

runat="server">

<tr>

<td>

<asp:Panel ID="pnlCMSubject" runat="server" EnableViewState="true" Visible="true"

CssClass="panel">

<table style="width: 100%; table-layout: fixed" cellpadding="1" cellspacing="1" border="0"

id="Table1">

<tr>

<td class="labelBold" style="width: 30%">

Subject:

</td>

<td class="label" style="width: 50%">

<telerik:RadComboBox ID="rdCmbSubject" runat="server" OnSelectedIndexChanged="rdCmbSubject_SelectedIndexChanged"

AutoPostBack="True" DropDownWidth="500px" Width="100%" MaxHeight="150px" CausesValidation="false">

<Items>

<telerik:RadComboBoxItem runat="server" Text="Select" Value="Select" />

<telerik:RadComboBoxItem runat="server" Text="DATE1" Value="DATE1" />

<telerik:RadComboBoxItem runat="server" Text="DATE2" Value="DATE2" />

<telerik:RadComboBoxItem runat="server" Text="NODATE1" Value="NODATE1" />

<telerik:RadComboBoxItem runat="server" Text="NODATE2" Value="NODATE2" />

</Items>

</telerik:RadComboBox>

</td>

<td>

</td>

</tr>

</table>

</asp:Panel>

</td>

</tr>

<tr>

<td>

<asp:Panel ID="pnlCMComment" runat="server" EnableViewState="true" Visible="false"

CssClass="panel">

<table style="width: 100%; table-layout: fixed" cellpadding="1" cellspacing="1" border="0"

id="Table2">

<tr>

<td class="labelBold" style="width: 30%">

Comment:

</td>

<td class="label" style="width: 50%">

<asp:TextBox runat="server" ID="txtComment" onkeydown="javascript:validateME(this,'REQ')"

Width="100%" Height="100px" TextMode="MultiLine" CssClass="textarea" MaxLength="1000">

</asp:TextBox>

</td>

<td>

</td>

</tr>

</table>

</asp:Panel>

</td>

</tr>

<tr>

<td>

<asp:Panel ID="pnlCMSpecialty" runat="server" EnableViewState="true" Visible="false"

CssClass="panel">

<table style="width: 100%; table-layout: fixed" cellpadding="1" cellspacing="1" border="0"

id="Table3">

<tr>

<td class="labelBold" style="width: 30%">

Specialty:

</td>

<td class="label" style="width: 50%">

<telerik:RadComboBox ID="rdCmbSPLSpecialty" runat="server" DropDownWidth="200px"

Width="200px">

</telerik:RadComboBox>

<asp:RequiredFieldValidator ID="RFVSPLSpecialty" runat="server" ControlToValidate="rdCmbSPLSpecialty"

InitialValue="Select" ValidationGroup="btnSubmitCM">*</asp:RequiredFieldValidator>

</td>

<td>

</td>

</tr>

<tr>

<td class="labelBold" style="width: 30%">

Date:

</td>

<td class="label" style="width: 50%">

<telerik:RadDatePicker ID="rdDtSPLDate" runat="server" CssClass="labelText_xx-small"

DateInput-DateFormat="MM/dd/yyyy">

<DateInput ID="DateInput1" runat="server" EnableSingleInputRendering="false">

</DateInput>

</telerik:RadDatePicker>

<asp:RequiredFieldValidator ID="RFVSPLDate" runat="server" ControlToValidate="rdDtSPLDate"

InitialValue="" ValidationGroup="btnSubmitCM">*</asp:RequiredFieldValidator>

</td>

<td>

</td>

</tr>

<tr>

<td class="labelBold" style="width: 30%">

Comment:

</td>

<td class="label" style="width: 50%">

<asp:TextBox runat="server" ID="txtSPLComment" onkeydown="javascript:validateME(this,'REQ')"

Width="100%" Height="100px" TextMode="MultiLine" CssClass="textarea" MaxLength="1000">

</asp:TextBox>

</td>

</tr>

</table>

</asp:Panel>

</td>

</tr>

</table>

</ContentTemplate>

</asp:UpdatePanel>

</form>

</body>

</html>

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using Telerik.Web.UI;

namespace TestPrj

{

public partial class _Default : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

}

private void ProcessControls(Control ctrlContainer)

{

try

{

foreach (Control ctrl in ctrlContainer.Controls)

{

if (ctrl.GetType() == typeof(Panel))

{

((Panel)ctrl).Visible = false;

}

// if a control contains sub controls, they will be processed by this recursive call

if (ctrl.HasControls())

ProcessControls(ctrl);

}

catch (Exception ex)

{

}

private void ClearCMControls(Control ctrlContainer)

{

try

{

foreach (Control ctrl in ctrlContainer.Controls)

{

if (ctrl.GetType() == typeof(TextBox))

{

((TextBox)ctrl).Text = "";

}

if (ctrl.GetType() == typeof(DropDownList))

{

((DropDownList)ctrl).SelectedIndex = -1;

}

if (ctrl.GetType() == typeof(RadComboBox) && ctrl.ID != "rdCmbSubject")

{

((RadComboBox)ctrl).Text = "";

((RadComboBox)ctrl).SelectedIndex = -1;

}

if (ctrl.GetType() == typeof(RadDatePicker))

{

((RadDatePicker)ctrl).Clear();

}

// if a control contains sub controls, they will be processed by this recursive call

if (ctrl.HasControls())

ClearCMControls(ctrl);

}

catch (Exception ex)

{

}

protected void rdCmbSubject_SelectedIndexChanged(object o, RadComboBoxSelectedIndexChangedEventArgs e)

{

ClearCMControls(this);

ProcessControls(this);

pnlCMSubject.Visible = true;

if (rdCmbSubject.SelectedValue.ToString() == "DATE1")

{

ProcessControls(this);

pnlCMSubject.Visible = true;

pnlCMSpecialty.Visible = true;

return;

}

if (rdCmbSubject.SelectedValue.ToString() == "DATE2")

{

ProcessControls(this);

pnlCMSubject.Visible = true;

pnlCMSpecialty.Visible = true;

return;

}

if (rdCmbSubject.SelectedValue.ToString() == "NODATE1")

{

ProcessControls(this);

pnlCMSubject.Visible = true;

pnlCMComment.Visible = true;

return;

}

if (rdCmbSubject.SelectedValue.ToString() == "NODATE2")

{

ProcessControls(this);

pnlCMSubject.Visible = true;

pnlCMComment.Visible = true;

return;

}

answered on 21 Sep 2012, 12:02 PM

please find the HTML code followed by C# Code



<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="TestPrj._Default" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

</head>

<body>

<form id="form1" runat="server">

<asp:ScriptManager runat="server" ID="scrptCaseMgmnt">

</asp:ScriptManager>

<asp:UpdatePanel ID="upnlAPTPCM" runat="server" UpdateMode="Conditional">

<ContentTemplate>

<table style="width: 100%;" cellpadding="1" cellspacing="1" border="0" id="Table18"

runat="server">

<tr>

<td>

<asp:Panel ID="pnlCMSubject" runat="server" EnableViewState="true" Visible="true"

CssClass="panel">

<table style="width: 100%; table-layout: fixed" cellpadding="1" cellspacing="1" border="0"

id="Table1">

<tr>

<td class="labelBold" style="width: 30%">

Subject:

</td>

<td class="label" style="width: 50%">

<telerik:RadComboBox ID="rdCmbSubject" runat="server" OnSelectedIndexChanged="rdCmbSubject_SelectedIndexChanged"

AutoPostBack="True" DropDownWidth="500px" Width="100%" MaxHeight="150px" CausesValidation="false">

<Items>

<telerik:RadComboBoxItem runat="server" Text="Select" Value="Select" />

<telerik:RadComboBoxItem runat="server" Text="DATE1" Value="DATE1" />

<telerik:RadComboBoxItem runat="server" Text="DATE2" Value="DATE2" />

<telerik:RadComboBoxItem runat="server" Text="NODATE1" Value="NODATE1" />

<telerik:RadComboBoxItem runat="server" Text="NODATE2" Value="NODATE2" />

</Items>

</telerik:RadComboBox>

</td>

<td>

</td>

</tr>

</table>

</asp:Panel>

</td>

</tr>

<tr>

<td>

<asp:Panel ID="pnlCMComment" runat="server" EnableViewState="true" Visible="false"

CssClass="panel">

<table style="width: 100%; table-layout: fixed" cellpadding="1" cellspacing="1" border="0"

id="Table2">

<tr>

<td class="labelBold" style="width: 30%">

Comment:

</td>

<td class="label" style="width: 50%">

<asp:TextBox runat="server" ID="txtComment" onkeydown="javascript:validateME(this,'REQ')"

Width="100%" Height="100px" TextMode="MultiLine" CssClass="textarea" MaxLength="1000">

</asp:TextBox>

</td>

<td>

</td>

</tr>

</table>

</asp:Panel>

</td>

</tr>

<tr>

<td>

<asp:Panel ID="pnlCMSpecialty" runat="server" EnableViewState="true" Visible="false"

CssClass="panel">

<table style="width: 100%; table-layout: fixed" cellpadding="1" cellspacing="1" border="0"

id="Table3">

<tr>

<td class="labelBold" style="width: 30%">

Specialty:

</td>

<td class="label" style="width: 50%">

<telerik:RadComboBox ID="rdCmbSPLSpecialty" runat="server" DropDownWidth="200px"

Width="200px">

</telerik:RadComboBox>

<asp:RequiredFieldValidator ID="RFVSPLSpecialty" runat="server" ControlToValidate="rdCmbSPLSpecialty"

InitialValue="Select" ValidationGroup="btnSubmitCM">*</asp:RequiredFieldValidator>

</td>

<td>

</td>

</tr>

<tr>

<td class="labelBold" style="width: 30%">

Date:

</td>

<td class="label" style="width: 50%">

<telerik:RadDatePicker ID="rdDtSPLDate" runat="server" CssClass="labelText_xx-small"

DateInput-DateFormat="MM/dd/yyyy">

<DateInput ID="DateInput1" runat="server" EnableSingleInputRendering="false">

</DateInput>

</telerik:RadDatePicker>

<asp:RequiredFieldValidator ID="RFVSPLDate" runat="server" ControlToValidate="rdDtSPLDate"

InitialValue="" ValidationGroup="btnSubmitCM">*</asp:RequiredFieldValidator>

</td>

<td>

</td>

</tr>

<tr>

<td class="labelBold" style="width: 30%">

Comment:

</td>

<td class="label" style="width: 50%">

<asp:TextBox runat="server" ID="txtSPLComment" onkeydown="javascript:validateME(this,'REQ')"

Width="100%" Height="100px" TextMode="MultiLine" CssClass="textarea" MaxLength="1000">

</asp:TextBox>

</td>

</tr>

</table>

</asp:Panel>

</td>

</tr>

</table>

</ContentTemplate>

</asp:UpdatePanel>

</form>

</body>

</html>

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using Telerik.Web.UI;

namespace TestPrj

{

public partial class _Default : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

}

private void ProcessControls(Control ctrlContainer)

{

try

{

foreach (Control ctrl in ctrlContainer.Controls)

{

if (ctrl.GetType() == typeof(Panel))

{

((Panel)ctrl).Visible = false;

}

// if a control contains sub controls, they will be processed by this recursive call

if (ctrl.HasControls())

ProcessControls(ctrl);

}

catch (Exception ex)

{

}

private void ClearCMControls(Control ctrlContainer)

{

try

{

foreach (Control ctrl in ctrlContainer.Controls)

{

if (ctrl.GetType() == typeof(TextBox))

{

((TextBox)ctrl).Text = "";

}

if (ctrl.GetType() == typeof(DropDownList))

{

((DropDownList)ctrl).SelectedIndex = -1;

}

if (ctrl.GetType() == typeof(RadComboBox) && ctrl.ID != "rdCmbSubject")

{

((RadComboBox)ctrl).Text = "";

((RadComboBox)ctrl).SelectedIndex = -1;

}

if (ctrl.GetType() == typeof(RadDatePicker))

{

((RadDatePicker)ctrl).Clear();

}

// if a control contains sub controls, they will be processed by this recursive call

if (ctrl.HasControls())

ClearCMControls(ctrl);

}

catch (Exception ex)

{

}

protected void rdCmbSubject_SelectedIndexChanged(object o, RadComboBoxSelectedIndexChangedEventArgs e)

{

ClearCMControls(this);

ProcessControls(this);

pnlCMSubject.Visible = true;

if (rdCmbSubject.SelectedValue.ToString() == "DATE1")

{

ProcessControls(this);

pnlCMSubject.Visible = true;

pnlCMSpecialty.Visible = true;

return;

}

if (rdCmbSubject.SelectedValue.ToString() == "DATE2")

{

ProcessControls(this);

pnlCMSubject.Visible = true;

pnlCMSpecialty.Visible = true;

return;

}

if (rdCmbSubject.SelectedValue.ToString() == "NODATE1")

{

ProcessControls(this);

pnlCMSubject.Visible = true;

pnlCMComment.Visible = true;

return;

}

if (rdCmbSubject.SelectedValue.ToString() == "NODATE2")

{

ProcessControls(this);

pnlCMSubject.Visible = true;

pnlCMComment.Visible = true;

return;

}

answered on 03 Oct 2012, 09:48 AM

TestPrjScreen.JPG

Hi Galin, I did the workaround you gave for IE6, but there is still a gap between calender popup and raddatepicker control. please check the screenshot attached.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Extended Reality

Free Tools

Support and Learning

Productivity and Design Tools

RadDatePicker PopUp Position

22 Answers, 1 is accepted