[Solved] Pop-up doesn't show when webusercontrol contains a radDatePicker

[Thomas]

Hi,

I have a RadGrid with popup edit mode enabled. This popup is populated by a WebUserControl that contains asp.net controls et 2 RadDatePicker. The popup doesn't show and I just have an empty row added in the grid (cf attached picture). The popup appears only if I replace the RadDatePickers by textboxes or if I open the popup server-side on page prerender editing an item.

I guess I have an ajax problem but I can't solve this by myself. Please Help !

 

Page with grid :

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="VueGlobaleDossiers.ascx.cs" Inherits="tech.Web.UI.VueGlobaleDossiers" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<style type="text/css">


    #GridViewDossiers tr.rowHover:Hover
    {
        background-color: #6F9702;
        color: Black;
    }

    .HeaderStyle
    {
        border: solid 1px White;
        background-color: #ACD184;
        color:#122246;
        font-size: 11px;
        font-weight: bold;
        text-align: center;
        vertical-align: middle;
        text-shadow: 0px 1px white;
    }
     .RowStyleSelected
    {

        background-color: #AECCF0;
        font-weight: bold;
        color: #333333;
        height: 10px;
    }
    .visibility {Display : none}
</style>

<div >

<div style="float: left;padding:6px;" class="HeaderStyle">
<asp:Label ID="Label1" runat="server" Text="Nombre de lignes :"></asp:Label>
 <asp:DropDownList ID="PageSizeDropDownList" OnSelectedIndexChanged="OnAgenceGlobaleSelectedChanged" runat="server"    AutoPostBack="true"  >
 <asp:ListItem Text="50" Value="50" Selected="True" />
 <asp:ListItem Text="70" Value="70" />
 <asp:ListItem Text="100" Value="100" />
 <asp:ListItem Text="200" Value="200" />
 <asp:ListItem Text="500" Value="500" />
 <asp:ListItem Text="1000" Value="1000" />
 </asp:DropDownList>
 </div>
<div style="float: left;padding:6px;" class="HeaderStyle">
<asp:Label ID="Label3" runat="server" Text="Etat :"></asp:Label>
 <asp:DropDownList ID="DDL_Etat" OnSelectedIndexChanged="OnAgenceGlobaleSelectedChanged" runat="server"    AutoPostBack="true"  >
 <asp:ListItem Text="en cours" Value="en cours" Selected="True" />
 <asp:ListItem Text="rendu" Value="rendu" />
 <asp:ListItem Text="Archive" Value="Archive" />
 <asp:ListItem Text="Tous" Value="" />
 </asp:DropDownList>
 </div>
<div style="float: left;padding:6px;" class="HeaderStyle">
<asp:Label ID="Label4" runat="server" Text="Coordinateur :"></asp:Label>
<asp:TextBox runat="server" ID="TB_Coord" AutoPostBack="true" OnTextChanged="OnAgenceGlobaleSelectedChanged" Width="30px" ></asp:TextBox>
 </div>
    <div style="float: left;padding:6px;" class="HeaderStyle">
<asp:Label ID="Label5" runat="server" Text="Client :"></asp:Label>
<asp:TextBox runat="server" ID="TB_client" AutoPostBack="true" OnTextChanged="OnAgenceGlobaleSelectedChanged" Width="100px" ></asp:TextBox>
 </div>
    <div style="float: left;padding:6px;" class="HeaderStyle">
<asp:Label ID="Label6" runat="server" Text="Nom dossier contient :"></asp:Label>
<asp:TextBox runat="server" ID="TB_StrDossier" AutoPostBack="true" OnTextChanged="OnAgenceGlobaleSelectedChanged" Width="100px" ></asp:TextBox>
 </div>
<div style="float: right;padding:6px;" class="HeaderStyle">
<asp:Label ID="Label2" runat="server" Text="Agence :"></asp:Label>
 <asp:DropDownList ID="AgenceGlobaleDropDownList" OnSelectedIndexChanged="OnAgenceGlobaleSelectedChanged" runat="server"    AutoPostBack="true"  ></asp:DropDownList>
</div>
<div style="clear:both;"></div>
<asp:HiddenField ID="indexTable" runat="server"  Value="-1" />

    <div>

    <telerik:RadCodeBlock ID="RadCodeBlock2" runat="server">
        <script type="text/javascript">
            function RowDblClick(sender, eventArgs) {
                sender.get_masterTableView().editItem(eventArgs.get_itemIndexHierarchical());
            }

            function onPopUpShowing(sender, args) {
                popUp = args.get_popUp();
                var gridWidth = sender.get_element().offsetWidth;
                var gridHeight = sender.get_element().offsetHeight;
                var popUpWidth = popUp.style.width.substr(0, popUp.style.width.indexOf("px"));
                var popUpHeight = popUp.style.height.substr(0, popUp.style.height.indexOf("px"));
                popUp.style.left = ((gridWidth - popUpWidth) / 2 + sender.get_element().offsetLeft).toString() + "px";
                popUp.style.top = ((gridHeight - popUpHeight) / 2 + sender.get_element().offsetTop).toString() + "px";
            }
        </script>
    </telerik:RadCodeBlock>
    <telerik:RadAjaxManager ID="RadAjaxManager2" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadGrid1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel2" runat="server">
    </telerik:RadAjaxLoadingPanel>
    <div id="demo" class="demo-container no-bg">
        <telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="True" ShowFooter="true"
            AllowSorting="True" AutoGenerateColumns="False" ShowStatusBar="true"
            OnNeedDataSource="RadGrid1_NeedDataSource" OnUpdateCommand="RadGrid1_UpdateCommand" OnItemDataBound="RadGrid1_ItemDataBound"
            OnInsertCommand="RadGrid1_InsertCommand" OnDeleteCommand="RadGrid1_DeleteCommand" OnPreRender="RadGrid1_PreRender">
            <ClientSettings>
                <Scrolling AllowScroll="True" SaveScrollPosition="true" ></Scrolling>
            </ClientSettings>
            <MasterTableView Width="100%" CommandItemDisplay="TopAndBottom" DataKeyNames="DossierID" EditMode="PopUp">
                <CommandItemSettings ShowSaveChangesButton="False" ShowCancelChangesButton="False" ShowRefreshButton="False" />
                <EditFormSettings>
                    <PopUpSettings Modal="true" ZIndex="100010" />
                </EditFormSettings>
        <Columns>
            <telerik:GridEditCommandColumn UniqueName="EditCommandColumn">
            </telerik:GridEditCommandColumn>
            <telerik:GridBoundColumn DataField="DossierID" HeaderText="ID"  SortExpression="DossierID" HeaderStyle-ForeColor="Black" />
            <telerik:GridBoundColumn DataField="CodeDossier" HeaderText="Code Dossier" SortExpression="CodeDossier" HeaderStyle-ForeColor="Black" />
            <telerik:GridBoundColumn DataField="Nom" HeaderText="Client" SortExpression="Nom" HeaderStyle-ForeColor="Black"/>
            <telerik:GridBoundColumn DataField="Description" HeaderText="Description" SortExpression="Description" HeaderStyle-ForeColor="Black" />
           <telerik:GridBoundColumn DataField="Coordinateurs" HeaderText="Coordinateurs" SortExpression="Coordinateurs" HeaderStyle-ForeColor="Black" />
            <telerik:GridTemplateColumn HeaderText="Date commande" SortExpression="DateDebutDossier" HeaderStyle-ForeColor="Black">
            <ItemTemplate>
               <asp:Label ID="DateDebut" runat="server" Text='<%# ((DateTime)Eval("DateDebutDossier")).ToShortDateString() %>'></asp:Label>
            </ItemTemplate>
            </telerik:GridTemplateColumn>

            <telerik:GridTemplateColumn HeaderText="Date fin prévue" SortExpression="DateFinTheorique" HeaderStyle-ForeColor="Black">
            <ItemTemplate>
               <asp:Label ID="DateFin" runat="server" Text='<%# ((DateTime)Eval("DateFinTheorique")).ToShortDateString() %>'></asp:Label>
            </ItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridBoundColumn DataField="TempsPrevu" HeaderText="Temps prévu" SortExpression="TempsPrevu"  HeaderStyle-ForeColor="Black"/>
            <telerik:GridBoundColumn DataField="SoldeTemps" HeaderText="Solde Temps" SortExpression="SoldeTemps" HeaderStyle-ForeColor="Black" />

             <telerik:GridTemplateColumn HeaderText="Etat" SortExpression="Fini" HeaderStyle-ForeColor="Black">
            <ItemTemplate>
               <asp:Label ID="Etat" runat="server" Text='<%# ((string)Eval("Fini")) %>'></asp:Label>
            </ItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridBoundColumn DataField="Ville" HeaderText="Agence" SortExpression="Ville" HeaderStyle-ForeColor="Black" />
        </Columns>
                <EditFormSettings UserControlName="~/Dossier/Controls/EditDossier.ascx" EditFormType="WebUserControl" >
                    <EditColumn UniqueName="EditCommandColumn1">
                    </EditColumn>
                </EditFormSettings>
            </MasterTableView>
            <ClientSettings>
                <ClientEvents OnRowDblClick="RowDblClick" OnPopUpShowing="onPopUpShowing" />
            </ClientSettings>
        </telerik:RadGrid>
    </div>

    </div>
</div>

webusercontrol :

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="VueGlobaleDossiers.ascx.cs" Inherits="tech.Web.UI.VueGlobaleDossiers" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<style type="text/css">


    #GridViewDossiers tr.rowHover:Hover
    {
        background-color: #6F9702;
        color: Black;
    }

    .HeaderStyle
    {
        border: solid 1px White;
        background-color: #ACD184;
        color:#122246;
        font-size: 11px;
        font-weight: bold;
        text-align: center;
        vertical-align: middle;
        text-shadow: 0px 1px white;
    }
     .RowStyleSelected
    {

        background-color: #AECCF0;
        font-weight: bold;
        color: #333333;
        height: 10px;
    }
    .visibility {Display : none}
</style>

<div >

<div style="float: left;padding:6px;" class="HeaderStyle">
<asp:Label ID="Label1" runat="server" Text="Nombre de lignes :"></asp:Label>
 <asp:DropDownList ID="PageSizeDropDownList" OnSelectedIndexChanged="OnAgenceGlobaleSelectedChanged" runat="server"    AutoPostBack="true"  >
 <asp:ListItem Text="50" Value="50" Selected="True" />
 <asp:ListItem Text="70" Value="70" />
 <asp:ListItem Text="100" Value="100" />
 <asp:ListItem Text="200" Value="200" />
 <asp:ListItem Text="500" Value="500" />
 <asp:ListItem Text="1000" Value="1000" />
 </asp:DropDownList>
 </div>
<div style="float: left;padding:6px;" class="HeaderStyle">
<asp:Label ID="Label3" runat="server" Text="Etat :"></asp:Label>
 <asp:DropDownList ID="DDL_Etat" OnSelectedIndexChanged="OnAgenceGlobaleSelectedChanged" runat="server"    AutoPostBack="true"  >
 <asp:ListItem Text="en cours" Value="en cours" Selected="True" />
 <asp:ListItem Text="rendu" Value="rendu" />
 <asp:ListItem Text="Archive" Value="Archive" />
 <asp:ListItem Text="Tous" Value="" />
 </asp:DropDownList>
 </div>
<div style="float: left;padding:6px;" class="HeaderStyle">
<asp:Label ID="Label4" runat="server" Text="Coordinateur :"></asp:Label>
<asp:TextBox runat="server" ID="TB_Coord" AutoPostBack="true" OnTextChanged="OnAgenceGlobaleSelectedChanged" Width="30px" ></asp:TextBox>
 </div>
    <div style="float: left;padding:6px;" class="HeaderStyle">
<asp:Label ID="Label5" runat="server" Text="Client :"></asp:Label>
<asp:TextBox runat="server" ID="TB_client" AutoPostBack="true" OnTextChanged="OnAgenceGlobaleSelectedChanged" Width="100px" ></asp:TextBox>
 </div>
    <div style="float: left;padding:6px;" class="HeaderStyle">
<asp:Label ID="Label6" runat="server" Text="Nom dossier contient :"></asp:Label>
<asp:TextBox runat="server" ID="TB_StrDossier" AutoPostBack="true" OnTextChanged="OnAgenceGlobaleSelectedChanged" Width="100px" ></asp:TextBox>
 </div>
<div style="float: right;padding:6px;" class="HeaderStyle">
<asp:Label ID="Label2" runat="server" Text="Agence :"></asp:Label>
 <asp:DropDownList ID="AgenceGlobaleDropDownList" OnSelectedIndexChanged="OnAgenceGlobaleSelectedChanged" runat="server"    AutoPostBack="true"  ></asp:DropDownList>
</div>
<div style="clear:both;"></div>
<asp:HiddenField ID="indexTable" runat="server"  Value="-1" />

    <div>

    <telerik:RadCodeBlock ID="RadCodeBlock2" runat="server">
        <script type="text/javascript">
            function RowDblClick(sender, eventArgs) {
                sender.get_masterTableView().editItem(eventArgs.get_itemIndexHierarchical());
            }

            function onPopUpShowing(sender, args) {
                popUp = args.get_popUp();
                var gridWidth = sender.get_element().offsetWidth;
                var gridHeight = sender.get_element().offsetHeight;
                var popUpWidth = popUp.style.width.substr(0, popUp.style.width.indexOf("px"));
                var popUpHeight = popUp.style.height.substr(0, popUp.style.height.indexOf("px"));
                popUp.style.left = ((gridWidth - popUpWidth) / 2 + sender.get_element().offsetLeft).toString() + "px";
                popUp.style.top = ((gridHeight - popUpHeight) / 2 + sender.get_element().offsetTop).toString() + "px";
            }
        </script>
    </telerik:RadCodeBlock>
    <telerik:RadAjaxManager ID="RadAjaxManager2" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadGrid1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel2" runat="server">
    </telerik:RadAjaxLoadingPanel>
    <div id="demo" class="demo-container no-bg">
        <telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="True" ShowFooter="true"
            AllowSorting="True" AutoGenerateColumns="False" ShowStatusBar="true"
            OnNeedDataSource="RadGrid1_NeedDataSource" OnUpdateCommand="RadGrid1_UpdateCommand" OnItemDataBound="RadGrid1_ItemDataBound"
            OnInsertCommand="RadGrid1_InsertCommand" OnDeleteCommand="RadGrid1_DeleteCommand" OnPreRender="RadGrid1_PreRender">
            <ClientSettings>
                <Scrolling AllowScroll="True" SaveScrollPosition="true" ></Scrolling>
            </ClientSettings>
            <MasterTableView Width="100%" CommandItemDisplay="TopAndBottom" DataKeyNames="DossierID" EditMode="PopUp">
                <CommandItemSettings ShowSaveChangesButton="False" ShowCancelChangesButton="False" ShowRefreshButton="False" />
                <EditFormSettings>
                    <PopUpSettings Modal="true" ZIndex="100010" />
                </EditFormSettings>
        <Columns>
            <telerik:GridEditCommandColumn UniqueName="EditCommandColumn">
            </telerik:GridEditCommandColumn>
            <telerik:GridBoundColumn DataField="DossierID" HeaderText="ID"  SortExpression="DossierID" HeaderStyle-ForeColor="Black" />
            <telerik:GridBoundColumn DataField="CodeDossier" HeaderText="Code Dossier" SortExpression="CodeDossier" HeaderStyle-ForeColor="Black" />
            <telerik:GridBoundColumn DataField="Nom" HeaderText="Client" SortExpression="Nom" HeaderStyle-ForeColor="Black"/>
            <telerik:GridBoundColumn DataField="Description" HeaderText="Description" SortExpression="Description" HeaderStyle-ForeColor="Black" />
           <telerik:GridBoundColumn DataField="Coordinateurs" HeaderText="Coordinateurs" SortExpression="Coordinateurs" HeaderStyle-ForeColor="Black" />
            <telerik:GridTemplateColumn HeaderText="Date commande" SortExpression="DateDebutDossier" HeaderStyle-ForeColor="Black">
            <ItemTemplate>
               <asp:Label ID="DateDebut" runat="server" Text='<%# ((DateTime)Eval("DateDebutDossier")).ToShortDateString() %>'></asp:Label>
            </ItemTemplate>
            </telerik:GridTemplateColumn>

            <telerik:GridTemplateColumn HeaderText="Date fin prévue" SortExpression="DateFinTheorique" HeaderStyle-ForeColor="Black">
            <ItemTemplate>
               <asp:Label ID="DateFin" runat="server" Text='<%# ((DateTime)Eval("DateFinTheorique")).ToShortDateString() %>'></asp:Label>
            </ItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridBoundColumn DataField="TempsPrevu" HeaderText="Temps prévu" SortExpression="TempsPrevu"  HeaderStyle-ForeColor="Black"/>
            <telerik:GridBoundColumn DataField="SoldeTemps" HeaderText="Solde Temps" SortExpression="SoldeTemps" HeaderStyle-ForeColor="Black" />

             <telerik:GridTemplateColumn HeaderText="Etat" SortExpression="Fini" HeaderStyle-ForeColor="Black">
            <ItemTemplate>
               <asp:Label ID="Etat" runat="server" Text='<%# ((string)Eval("Fini")) %>'></asp:Label>
            </ItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridBoundColumn DataField="Ville" HeaderText="Agence" SortExpression="Ville" HeaderStyle-ForeColor="Black" />
        </Columns>
                <EditFormSettings UserControlName="~/Dossier/Controls/EditDossier.ascx" EditFormType="WebUserControl" >
                    <EditColumn UniqueName="EditCommandColumn1">
                    </EditColumn>
                </EditFormSettings>
            </MasterTableView>
            <ClientSettings>
                <ClientEvents OnRowDblClick="RowDblClick" OnPopUpShowing="onPopUpShowing" />
            </ClientSettings>
        </telerik:RadGrid>
    </div>

    </div>
</div>

[Thomas]

Some news : the popup become visible if I add a radDatePicker to the page containing the grid...

So I put a radDatePicker into a div and I set it to display:none to hide it. Not a very stylish idea but I have no other. If you have any suggestions...

[Eyup]

Hello Thomas,

This might be due to a client-side error. Please temporarily disable any AJAX on the page (RadAjaxManager, RadAjaxPanel, UpdatePanel, etc.) and enable your script debugger (FireBug or F12) to see whether there are any script or server errors interfering.

Regards,
Eyup
Telerik