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

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

2 Answers 83 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Thomas
Top achievements
Rank 1
Thomas asked on 22 Feb 2016, 06:30 PM

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 Answers, 1 is accepted

Sort by
0
Thomas
Top achievements
Rank 1
answered on 23 Feb 2016, 08:58 AM

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

0
Eyup
Telerik team
answered on 25 Feb 2016, 12:32 PM
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
Tags
Grid
Asked by
Thomas
Top achievements
Rank 1
Answers by
Thomas
Top achievements
Rank 1
Eyup
Telerik team
Share this question
or