[Solved] Editform+position raddatepicker popup

[Larevenge]

Hello there,

I have an editform in a RadGrid, i use a template and in this template i placed a raddatepicker, but when i push on the little calender field to popup the calendar it shows a big way to the left. Sometimes out of the screen and sometimes just in depending on the position of the editform. How can i make the raddatepicker show up just like normally under the field?

Btw i tried to use a datepicker under the div and that one just worked fine, it only goes wrong when i use it within the editform.

Below my code:

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ucKlantMutatie.ascx.cs"
    Inherits="VEGAS.Klanten.ucKlantToevoegen" %>
<link href="../App_Themes/hypotheekVegas/shHypotheek.css" rel="stylesheet" type="text/css" />
<link href="../App_Themes/vegas/forms-algemeen.css" rel="stylesheet" type="text/css" />
<div style="border-style: outset; width: 700px; border-color: Gray;">
    <telerik:RadGrid ID="RGKlantMutatie" runat="server" OnNeedDataSource="RGKlantMutatie_NeedDataSource"
        OnUpdateCommand="RGKlantMutatie_UpdateCommand"
        OnItemCommand="RGKlantMutatie_ItemCommand" GridLines="None"
        Skin="Web20" AutoGenerateColumns="False"
        OnItemDataBound="RGKlantMutatie_ItemDataBound">
        <MasterTableView EditMode="PopUp" CommandItemSettings-RefreshText="Vernieuw">
<CommandItemSettings AddNewRecordText="Voeg nieuwe datumcontrole toe" RefreshText="Vernieuw"></CommandItemSettings>
            <Columns>
                <telerik:GridBoundColumn DataField="intKlantID" Visible="True" SortExpression="intKlantID"
                    UniqueName="intKlantID" HeaderText="Klant ID">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="strNaam" Visible="True" SortExpression="strNaam"
                    UniqueName="strNaam" HeaderText="Naam">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="strVoorletters" HeaderText="Voorletters" SortExpression="strVoorletters"
                    UniqueName="strVoorletters" Visible="True">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="strTussenvoegsel" HeaderText="Tussenvoegsel"
                    SortExpression="strTussenvoegsel" UniqueName="strTussenvoegsel" Visible="True">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="strStraat" HeaderText="Straat" SortExpression="strStraat"
                    UniqueName="strStraat" Visible="True">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="strHuisnummer" HeaderText="Huisnr." SortExpression="strHuisnummer"
                    UniqueName="strHuisnummer" Visible="True">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="strToevoeging" HeaderText="Toevoeging" SortExpression="strToevoeging"
                    UniqueName="strToevoeging" Visible="True">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="strPlaats" HeaderText="Plaats" SortExpression="strPlaats"
                    UniqueName="strPlaats" Visible="True">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="strPostcode" HeaderText="Postcode" SortExpression="strPostcode"
                    UniqueName="strPostcode" Visible="True">
                </telerik:GridBoundColumn>
                <telerik:GridCheckBoxColumn DataField="blnAdresVerouderd" DataType="System.Boolean"
                    HeaderText="Adres verouderd" SortExpression="blnAdresVerouderd" UniqueName="blnAdresVerouderd">
                </telerik:GridCheckBoxColumn>
                <telerik:GridBoundColumn DataField="strEmail" HeaderText="E-mail" SortExpression="strEmail"
                    UniqueName="strEmail" Visible="True">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="intNationaliteitID" HeaderText="Nationaliteit"
                    SortExpression="intNationaliteitID" UniqueName="intNationaliteitID" Visible="True">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="strGeslacht" HeaderText="Geslacht" SortExpression="strGeslacht"
                    UniqueName="strGeslacht" Visible="True">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="strBurgelijkestaat" HeaderText="Burgerlijke staat"
                    SortExpression="strBurgelijkestaat" UniqueName="strBurgelijkestaat" Visible="True">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="strBSN" HeaderText="BSN" SortExpression="strBSN"
                    UniqueName="strBSN" Visible="True">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="strRekeningnummer" HeaderText="Rekeningnummer"
                    SortExpression="strRekeningnummer" UniqueName="strRekeningnummer" Visible="True">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="intLegitimatietypeID" HeaderText="Legitimatietype"
                    SortExpression="intLegitimatietypeID" UniqueName="intLegitimatietypeID" Visible="True">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="strLegitimatienummer" HeaderText="Legitimatienummer"
                    SortExpression="strLegitimatienummer" UniqueName="strLegitimatienummer" Visible="True">
                </telerik:GridBoundColumn>
                <telerik:GridEditCommandColumn EditText="Wijzig" UniqueName="EditCommandColumn">
                </telerik:GridEditCommandColumn>
            </Columns>
            <EditFormSettings EditFormType="Template" PopUpSettings-Height="460px" PopUpSettings-Width="800px">
<EditColumn UniqueName="EditCommandColumn1"></EditColumn>
                <FormTemplate>
                    <table id="Table2" cellspacing="2" cellpadding="1" width="1000" border="0" rules="none"
                        style="border-collapse: collapse; background: white;">
                        <tr>
                            <td colspan="2" style="font-size: small">
                                <b>SubTrajectstap details</b>
                            </td>
                        </tr>
                            </table>
            <table class="tblMain-form" cellspacing="2" cellPadding="0" border="0">
                <tr>
                    <td class="form-label" width="100">Naam:</td>
                    <td width="250"><asp:textbox id="txtNaam" Width="250px" MaxLength="30" runat="server" CssClass="pers-textbox"></asp:textbox></td>
                    <td class="form-label" width="100">Voorletters:</td>
                    <td width="75"><asp:textbox id="txtVoorletters" Width="75" MaxLength="10" runat="server" CssClass="pers-textbox"></asp:textbox></td>
                    <td class="form-label" width="100">Tussenvoegsel:</td>
                    <td width="75"><asp:textbox id="txtTussenvoegsel" Width="75" MaxLength="10" runat="server" CssClass="pers-textbox"></asp:textbox></td>
                </tr>
            </table>
            <table class="tblMain-form" cellspacing="2" cellPadding="0" border="0">
                <tr>
                    <td class="form-label" width="100">Straat:</td>
                    <td width="250"><asp:textbox id="txtAdres" Width="250" MaxLength="30" runat="server" CssClass="pers-textbox"></asp:textbox></td>
                    <td class="form-label" width="100">Huisnummer:</td>
                    <td width="75"><asp:textbox id="txtHuisnummer" Width="75" MaxLength="5" runat="server" CssClass="pers-textbox"></asp:textbox></td>
                    <td class="form-label" width="100">Toevoeging:</td>
                    <TD width="75"><asp:textbox id="txtToevoeging" Width="75" MaxLength="10" runat="server" CssClass="pers-textbox"></asp:textbox></td>
                </tr>
            </table>
            <table class="tblMain-form" cellspacing="2" cellPadding="0" border="0">
                <tr>
                    <td class="form-label" width="100">Plaats:</td>
                    <td width="250"><asp:textbox id="txtPlaats" Width="250" MaxLength="30" runat="server" CssClass="pers-textbox"></asp:textbox></td>
                    <td class="form-label" width="100">Postcode:</td>
                    <td width="75"><asp:textbox id="txtPostcode" Width="75" MaxLength="7" runat="server" CssClass="pers-textbox"></asp:textbox></td>
                    <td class="form-label" width="100" nowrap>Adres verouderd:</td>
                    <td width="75"><telerik:RadComboBox ID="cboVerouderd" Runat="server"
                            Enabled="False" Width="75">
                        </telerik:RadComboBox></td>
                </tr>
            </table>
            <table class="tblMain-form" cellspacing="2" cellPadding="0" border="0">
                <tr>
                    <td class="form-label" width="100">Telefoon:</td>
                    <td width="100"><asp:textbox id="txtTelefoon" Width="100" MaxLength="15" runat="server" CssClass="pers-textbox"></asp:textbox></TD>
                    <td class="form-label" width="100">Mobiel:</td>
                    <td width="100"><asp:textbox id="txtMobiel" Width="100" MaxLength="15" runat="server" CssClass="pers-textbox"></asp:textbox></TD>
                </tr>
            </table>
            <table class="tblMain-form" cellspacing="2" cellPadding="0" border="0">
                <tr>
                    <td class="form-label" width="100">Email:</td>
                    <TD width="500"><asp:textbox id="txtEmail" Width="500" MaxLength="50" runat="server" CssClass="pers-textbox"></asp:textbox></td>
                </tr>
            </table>
            <table class="tblMain-form" cellspacing="2" cellPadding="0" border="0">
                <tr>
                    <td class="form-label" width="100">Geboortedatum:</td>
                    <td width="200">
                        <telerik:RadDatePicker ID="dtpGeboortedatum" runat="server" Calendar-CultureInfo="nl-NL" Enabled="True" DateInput-MinDate="1-1-1900 0:00:00" MinDate="1-1-1900 0:00:00" DateInput-ForeColor="#666666" DatePopupButton-Visible="True" DateInput-DateFormat="dd-MM-yyyy" DateInput-DisplayDateFormat="dd-MM-yyyy">
                        </telerik:RadDatePicker>
                    </td>
                    <td class="form-label" style="WIDTH: 100px" width="100">Overlijdensdatum:</td>
                    <td width="200">
                        <telerik:RadDatePicker ID="dtpOverlijdensdatum" runat="server" Calendar-CultureInfo="nl-NL" Enabled="True" DateInput-MinDate="1-1-1900 0:00:00" MinDate="1-1-1900 0:00:00" DateInput-ForeColor="#666666" DatePopupButton-Visible="True" DateInput-DateFormat="dd-MM-yyyy" DateInput-DisplayDateFormat="dd-MM-yyyy">
                        </telerik:RadDatePicker>
                    </td>
                    <td class="form-label" style="WIDTH: 100px" noWrap width="100">Nationaliteit:</td>
                    <td width="100"><telerik:RadComboBox ID="cboNationaliteit" Runat="server" >
                        </telerik:RadComboBox>
                        </td>
                </tr>
            </table>
            <table class="tblMain-form" cellspacing="2" cellPadding="0" border="0">
                <tr>
                    <td class="form-label" style="WIDTH: 100px" width="100">Geslacht:</td>
                    <td width="100"><telerik:RadComboBox ID="cboGeslacht" Runat="server" Width="82px">
                        </telerik:RadComboBox></td>
                    <td class="form-label" style="WIDTH: 108px" noWrap width="108">Burgerlijke staat:</td>
                    <td width="200"><telerik:RadComboBox ID="cboBurgelijkestaat" Runat="server" >
                        </telerik:RadComboBox>
                        </td>
                </tr>
            </table>
            <table class="tblMain-form" cellspacing="2" cellPadding="0" border="0">
                <tr>
                    <td class="form-label" width="100">Sofinummer:</td>
                    <td width="90"><asp:textbox id="txtSofinummer" Width="90" MaxLength="9" runat="server" CssClass="pers-textbox"
                            ></asp:textbox></td>
                    <td class="form-label" width="160">Rekeningnummer:</td>
                    <td width="100"><asp:textbox id="txtRekening" Width="100" MaxLength="10" runat="server" CssClass="pers-textbox"
                            ></asp:textbox></td>
                </tr>
            </table>
            <table class="tblMain-form" cellspacing="2" cellPadding="0" border="0">
                <tr>
                    <td class="form-label" width="100">Legitimatie:</td>
                    <td width="120"><telerik:RadComboBox ID="cboLegitimatie" Runat="server"
                            Width="130px">
                        </telerik:RadComboBox></td>
                    <td class="form-label" width="130">Nummer:</td>
                    <td width="100"><asp:textbox id="txtLegitimatieNummer" Width="100" MaxLength="10" runat="server" CssClass="pers-textbox"></asp:textbox></td>
                </tr>
            </table>
<table>
                        <tr>
                            <td align="left" colspan="2">
                                <asp:Button ID="btnUpdate" Text='<%# (Container is GridEditFormInsertItem) ? "Toevoegen" : "Opslaan" %>'
                                    runat="server" CommandName='<%# (Container is GridEditFormInsertItem) ? "PerformInsert" : "Update" %>'
                                    CausesValidation="true" ValidationGroup="submit"></asp:Button>&nbsp;
                                <asp:Button ID="btnCancel" Text="Annuleer" runat="server" CausesValidation="False"
                                    CommandName="Cancel"></asp:Button>
                            </td>
                        </tr>
                    </table>

                </FormTemplate>
            </EditFormSettings>
        </MasterTableView>
        <ClientSettings>
            <Scrolling AllowScroll="True" UseStaticHeaders="True" ScrollHeight="50px" />
        </ClientSettings>
    </telerik:RadGrid>
</div>

[Yavor]

Hi Corné,

This issue may be caused by some additional visual settings on the site. However, based on this information it is hard to tell. If the problem persists, you can open a formal support ticket, and send us the problematic code, in the form of a small project. We will review it locally, and advise you further.

Greetings,
Yavor
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.