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

3 posts, 0 answers
  1. Thomas
    Thomas avatar
    2 posts
    Member since:
    Mar 2015

    Posted 22 Feb Link to this post

    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>
  2. Thomas
    Thomas avatar
    2 posts
    Member since:
    Mar 2015

    Posted 23 Feb in reply to Thomas Link to this post

    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...

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Eyup
    Admin
    Eyup avatar
    3015 posts

    Posted 25 Feb Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top