Problem in controls that are inside a RadWindow

0 Answers 119 Views
Ajax ComboBox DatePicker Window
Joimer
Top achievements
Rank 1
Joimer asked on 23 Jun 2023, 03:19 PM

Hi, I'm having trouble with a control called RadWindow. I show that control inside a normal asp form. The radwindow has a ContentTemplate inside it, and inside that content template I have all the controls of the form. What happens is that when the window is maximized then when you click on a datepicker or a comobox (both from telerik) the drop-down list of the combobox is not displayed nor the calendar of the radCalendar, which could be?

CODE:

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="frmPruebaApariencia.aspx.vb" Inherits="frmPruebaApariencia" %>

<%@ Register Src="~/Controles/CtrUpload.ascx" TagPrefix="uc1" TagName="CtrUpload" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" Namespace="System.Web.UI" TagPrefix="asp" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Prueba de consulta de trazabilidad</title>
    <style>
        .RadCalendar_Material .rcSelected2 a {
            background-color: #ffd587;
            color: orange;
        }

        .shadowed-div-header {
            background-color: #f1f1f1;
            box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.3);
        }

        .shadowed-div-body {
            background-color: #f1f1f1;
            box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.3);
            width:auto;
        }

    </style>

    <link href="../css/Mensaje.css" rel="stylesheet" />
    <script src="../script/maestro.js"></script>
    <script src="../script/jquery-1.4.1.js"></script>
    <script src="../script/jquery-1.4.1.min.js"></script>
    <script src="../script/mensaje.js"></script>
    <link href="../css/bootstrap.min.css" rel="stylesheet" />
    <link href="../css/bootstrap-icons-1.9.1/bootstrap-icons.css" rel="stylesheet" />
    <link href="../css/fonts.css" rel="stylesheet" />

    <script language="javascript" type="text/javascript">
        function preventBack() { window.history.forward(); }
        setTimeout("preventBack()", 0);
        window.onunload = function () { null };

        function button_click(objTextBox, objBtnID) {

            if (window.event.keyCode == 13) {
                document.getElementById(objBtnID).focus();
                document.getElementById(objBtnID).click();
            }
        }
    </script>



</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="scriptmanager" runat="server" EnableTheming="True" LoadScriptsBeforeUI="False">
            <Scripts>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js"></asp:ScriptReference>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js"></asp:ScriptReference>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js"></asp:ScriptReference>
            </Scripts>
        </asp:ScriptManager>
        <telerik:RadAjaxManager ID="AjaxManager" runat="server" ClientIDMode="Static" EnableTheming="True" LoadScriptsBeforeUI="False">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="AjaxManager">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadAsyncUpload1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <script type="text/javascript">
            function callBackFn(arg) {
                return true;
            }

            function ChangeToUpperCase(sender, args) {
                var inputElement = sender.get_inputDomElement();
                inputElement.style.textTransform = "uppercase";
            }
        </script>

        <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="True" Skin="Material" Visible="true" />
        <telerik:RadFormDecorator RenderMode="Lightweight" ID="FormDecorator1" runat="server" DecoratedControls="all" DecorationZoneID="decorationZone"></telerik:RadFormDecorator>

        <telerik:RadWindowManager ID="Alerta" runat="server" EnableShadow="True" CssClass="radalert" Behaviors=" Close, Move, Resize, Maximize, Minimize, Reload, Pin">
        </telerik:RadWindowManager>

        <telerik:RadWindow RenderMode="Lightweight" ID="RadWindow1" Title="Prueba" AutoSize="false" VisibleOnPageLoad="true"
            runat="server">

            <ContentTemplate>


                <asp:UpdatePanel ID="upPrincipal" runat="server" UpdateMode="Conditional">
                    <Triggers>
                        <asp:AsyncPostBackTrigger ControlID="btnLimpiarFiltros" />
                    </Triggers>
                    <ContentTemplate>
                        <div id="decorationZone">
                            <div style="margin: 20px;">

                                <div id="Header1" class="shadowed-div-header" style="border-radius: 10px; background-color: #A9B586; padding: 15px; display:none;">
                                    <div style="color: white; font-size: 20px">Prueba de Apariencia</div>
                                </div>

                                <div class="shadowed-div-body" style="margin-top: 20px; border-radius: 10px; background-color: white; width: auto">

                                    <div id="divFiltros" style="padding: 10px;">

                                        <div runat="server" id="divConsulta" visible="true">

                                            <div style="margin-top: 5px"></div>
                                            <div>
                                                <asp:Button ID="btnBuscar" Text="Buscar" runat="server" />
                                                <asp:Button ID="btnLimpiarFiltros" Text="Limpiar filtros" runat="server" />
                                            </div>

                                            <div style="border: none; border-top: 1px solid #CFD8DC; margin-top: 10px; margin-bottom: 10px; margin-left: -10px; margin-right: -10px;"></div>

                                            <div class="row p-1">
                                                <div class="col-12 col-md-2 pr-0" style="font-weight: bold">Filtros</div>
                                            </div>

                                            <div class="row p-1">
                                                <div class="col-12 col-md-2">Rango Requerimiento Desde</div>
                                                <div class="col-12 col-md-4">
                                                    <telerik:RadTextBox runat="server" ID="txtRangoRequerimientoDesde" Text="0" InputType="Number" Width="80px" TabIndex="1" RenderMode="Lightweight"></telerik:RadTextBox>
                                                </div>
                                                <div class="col-12 col-md-2">Rango Requerimiento Hasta</div>
                                                <div class="col-12 col-md-4">
                                                    <telerik:RadTextBox runat="server" ID="txtRangoRequerimientohasta" Text="0" InputType="Number" Width="80px" TabIndex="2" RenderMode="Lightweight"></telerik:RadTextBox>
                                                </div>
                                            </div>

                                            <div class="row p-1" runat="server" id="divFecha" visible="true">
                                                <div class="col-12 col-md-2">Fecha Registro Desde</div>
                                                <div class="col-12 col-md-4">
                                                    <telerik:RadDatePicker ID="dtpFechaDesde" runat="server" Width="150px" ZIndex="10000" Culture="es-DO" TabIndex="1" ToolTip="" DatePopupButton-BackColor="#A9B586" DatePopupButton-ForeColor="black" Calendar-SelectedDayStyle-CssClass="rcSelected2" RenderMode="Lightweight">
                                                        <DateInput ID="DateInput1" runat="server" DateFormat="dd/MM/yyyy" ReadOnly="true"></DateInput>
                                                    </telerik:RadDatePicker>
                                                </div>
                                                <div class="col-12 col-md-2">Fecha Registro Hasta</div>
                                                <div class="col-12 col-md-4">
                                                    <telerik:RadDatePicker ID="dtpFechaHasta" runat="server" Width="150px" ZIndex="10000" Culture="es-DO" TabIndex="2" DatePopupButton-BackColor="#A9B586" DatePopupButton-ForeColor="black" Calendar-SelectedDayStyle-CssClass="rcSelected2" RenderMode="Lightweight">
                                                        <DateInput ID="DateInput2" runat="server" DateFormat="dd/MM/yyyy" ReadOnly="false"></DateInput>
                                                    </telerik:RadDatePicker>
                                                </div>
                                            </div>

                                            <div class="row p-1" runat="server" id="divEmpleado" visible="true">
                                                <div class="col-12 col-md-2 pr-0">Empleado</div>
                                                <div class="col-12 col-md-4">
                                                    <telerik:RadComboBox ID="cmbEmpleado" runat="server" Width="100%" ZIndex="10000" ClientIDMode="Static" RenderMode="Lightweight"
                                                        MaxHeight="200px" TabIndex="3" AllowCustomText="True" Sort="Ascending"
                                                        MarkFirstMatch="true" OnClientKeyPressing="ChangeToUpperCase"
                                                        Filter="Contains" DataValueField="Codigo" DataTextField="Nombre" CssClass="combo-full" AppendDataBoundItems="true">
                                                        <Items>
                                                            <telerik:RadComboBoxItem Text="Todos los empleados" Value="0" Selected="true" />
                                                        </Items>
                                                    </telerik:RadComboBox>
                                                </div>
                                                <div class="col-12 col-md-2 pr-0">Posici&oacute;n</div>
                                                <div class="col-12 col-md-4">
                                                    <telerik:RadComboBox ID="cmbPosicion" runat="server" Width="100%" ZIndex="10000" ClientIDMode="Static" RenderMode="Lightweight"
                                                        MaxHeight="200px" TabIndex="4" AllowCustomText="True" Sort="Ascending"
                                                        MarkFirstMatch="true" OnClientKeyPressing="ChangeToUpperCase"
                                                        Filter="Contains" DataValueField="Codigo" DataTextField="Nombre" CssClass="combo-full" AppendDataBoundItems="true">
                                                        <Items>
                                                            <telerik:RadComboBoxItem Text="Todas las posiciones" Value="0" Selected="true" />
                                                        </Items>
                                                    </telerik:RadComboBox>
                                                </div>
                                            </div>
                                            <div class="row p-1" runat="server" id="div1" visible="true">
                                                <div class="col-12 col-md-2">Estatus</div>
                                                <div class="col-12 col-md-4">
                                                    <telerik:RadComboBox ID="cmbEstatusFiltro" runat="server" ZIndex="10000" Width="100%" ClientIDMode="Static" RenderMode="Lightweight"
                                                        MaxHeight="200px" TabIndex="6" AllowCustomText="True" Sort="Ascending"
                                                        MarkFirstMatch="true" OnClientKeyPressing="ChangeToUpperCase"
                                                        Filter="Contains" DataValueField="Codigo" DataTextField="Nombre" CssClass="combo-full" AppendDataBoundItems="true">
                                                        <Items>
                                                            <telerik:RadComboBoxItem Text="Todos los estatus" Value="0" Selected="true" />
                                                            <telerik:RadComboBoxItem Text="En Trámite" Value="1" Selected="true" />
                                                            <telerik:RadComboBoxItem Text="Aprobado" Value="2" Selected="true" />
                                                            <telerik:RadComboBoxItem Text="Anulado" Value="3" Selected="true" />
                                                            <telerik:RadComboBoxItem Text="Cerrado" Value="4" Selected="true" />
                                                        </Items>
                                                    </telerik:RadComboBox>
                                                </div>
                                            </div>
                                        </div>
                                        <div style="margin-top: 20px;">

                                            <telerik:RadGrid RenderMode="Lightweight" ID="RadGrid1" runat="server" Culture="es-DO" BorderColor="White" MasterTableView-Width="100%" Width="100%"
                                                AllowPaging="True" AllowAutomaticUpdates="True" AllowAutomaticInserts="False" MasterTableView-PagerStyle-PageSizeLabelText="Páginas"
                                                AllowAutomaticDeletes="True" AllowSorting="true" MasterTableView-PagerStyle-NextPageToolTip="Siguiente" MasterTableView-PagerStyle-LastPageToolTip="Ultima pagina"
                                                MasterTableView-PagerStyle-FirstPageToolTip="Primera página" MasterTableView-PagerStyle-PrevPageToolTip="Atras"
                                                FooterStyle-ForeColor="Black" HeaderStyle-ForeColor="Black" ItemStyle-ForeColor="Black" AlternatingItemStyle-ForeColor="Black" ZIndex="10000">
                                                <PagerStyle Mode="NextPrevAndNumeric" />
                                                <MasterTableView AutoGenerateColumns="False"
                                                    DataKeyNames="ID" CommandItemDisplay="None">
                                                    <Columns>
                                                        <telerik:GridButtonColumn CommandName="Edit" Text="Editar" HeaderText="Editar" HeaderStyle-ForeColor="GrayText">
                                                        </telerik:GridButtonColumn>
                                                        <telerik:GridBoundColumn DataField="ID" HeaderText="ID" HeaderStyle-Width="5%" ItemStyle-Width="5%"
                                                            UniqueName="ID" Visible="true" MaxLength="5">
                                                        </telerik:GridBoundColumn>

                                                        <telerik:GridBoundColumn DataField="Fecha" HeaderText="Fecha" DataFormatString="{0:dd-MM-yyyy}" HeaderStyle-Width="13%" ItemStyle-Width="13%"
                                                            UniqueName="Fecha">
                                                        </telerik:GridBoundColumn>

                                                        <telerik:GridBoundColumn DataField="DiasTranscurridos" HeaderText="Días Transcurridos" HeaderStyle-Width="5%" ItemStyle-Width="5%" ItemStyle-HorizontalAlign="Center" HeaderStyle-HorizontalAlign="Center"
                                                            UniqueName="DiasTranscurridos">
                                                        </telerik:GridBoundColumn>

                                                        <telerik:GridBoundColumn DataField="Nombre_Solicitante" HeaderText="Nombre Solicitante" HeaderStyle-Width="18%" ItemStyle-Width="15%"
                                                            UniqueName="Nombre_Solicitante">
                                                        </telerik:GridBoundColumn>

                                                        <telerik:GridBoundColumn DataField="Posicion" HeaderText="Posición" HeaderStyle-Width="15%" ItemStyle-Width="15%"
                                                            UniqueName="Posicion">
                                                        </telerik:GridBoundColumn>

                                                        <telerik:GridBoundColumn DataField="Cantidad" HeaderText="Cantidad" HeaderStyle-Width="5%" ItemStyle-Width="5%"
                                                            UniqueName="Cantidad">
                                                        </telerik:GridBoundColumn>

                                                        <telerik:GridBoundColumn DataField="Compania" HeaderText="Compania" HeaderStyle-Width="17%" ItemStyle-Width="17%"
                                                            UniqueName="Compania">
                                                        </telerik:GridBoundColumn>

                                                        <telerik:GridBoundColumn DataField="Facilidad" HeaderText="Facilidad" HeaderStyle-Width="15%" ItemStyle-Width="15%"
                                                            UniqueName="Facilidad">
                                                        </telerik:GridBoundColumn>

                                                        <telerik:GridBoundColumn DataField="Estatus" HeaderText="Estatus" HeaderStyle-Width="12%" ItemStyle-Width="12%"
                                                            UniqueName="Estatus">
                                                        </telerik:GridBoundColumn>
                                                        <telerik:GridButtonColumn Text="Eliminar" CommandName="Delete" HeaderText="Eliminar" HeaderStyle-ForeColor="GrayText" />
                                                    </Columns>
                                                </MasterTableView>
                                            </telerik:RadGrid>

                                        </div>

                                        <div style="border: none; border-top: 1px solid #CFD8DC; margin-top: 25px; margin-bottom: 10px; margin-left: -10px; margin-right: -10px;"></div>


                                        <div>
                                            <div style="font-weight: bold">Otros controles</div>
                                        </div>
                                        <div>
                                            <div style="margin-bottom: 10px">
                                                <telerik:RadCheckBox runat="server" ID="checkbox1" Text="Todos los registros" TabIndex="1" RenderMode="Lightweight"></telerik:RadCheckBox>
                                            </div>

                                            <div style="margin-bottom: 10px;">
                                                <telerik:RadRadioButtonList runat="server" ID="rbtnEstatusEmpleado" RepeatDirection="Horizontal" RepeatColumns="5" TabIndex="1" Direction="Horizontal">
                                                    <Items>
                                                        <telerik:ButtonListItem Value="0" Text="Todos" Selected="True"></telerik:ButtonListItem>
                                                        <telerik:ButtonListItem Value="A" Text="Activo" Selected="False"></telerik:ButtonListItem>
                                                        <telerik:ButtonListItem Value="B" Text="Inactivo"></telerik:ButtonListItem>
                                                    </Items>
                                                </telerik:RadRadioButtonList>
                                            </div>
                                        </div>

                                        <div>
                                            <telerik:RadSlider RenderMode="Lightweight" ID="RadSlider_Items" runat="server" ItemType="item" Width="400px"
                                                Height="70px" AnimationDuration="400" CssClass="ItemsSlider" ThumbsInteractionMode="Free" Style="margin-top: 10px;">
                                                <Items>
                                                    <telerik:RadSliderItem Text="Jan" Value="1"></telerik:RadSliderItem>
                                                    <telerik:RadSliderItem Text="Feb" Value="2"></telerik:RadSliderItem>
                                                    <telerik:RadSliderItem Text="Mar" Value="3"></telerik:RadSliderItem>
                                                    <telerik:RadSliderItem Text="Apr" Value="4"></telerik:RadSliderItem>
                                                    <telerik:RadSliderItem Text="May" Value="5"></telerik:RadSliderItem>
                                                    <telerik:RadSliderItem Text="Jun" Value="6"></telerik:RadSliderItem>
                                                    <telerik:RadSliderItem Text="Jul" Value="7"></telerik:RadSliderItem>
                                                    <telerik:RadSliderItem Text="Aug" Value="8"></telerik:RadSliderItem>
                                                    <telerik:RadSliderItem Text="Sep" Value="9"></telerik:RadSliderItem>
                                                    <telerik:RadSliderItem Text="Oct" Value="10"></telerik:RadSliderItem>
                                                    <telerik:RadSliderItem Text="Nov" Value="11"></telerik:RadSliderItem>
                                                    <telerik:RadSliderItem Text="Dec" Value="12"></telerik:RadSliderItem>
                                                </Items>
                                            </telerik:RadSlider>
                                            <telerik:RadSlider RenderMode="Lightweight" ID="RadSlider_NoItems" runat="server" Height="70px" Width="400px"
                                                AnimationDuration="400" ThumbsInteractionMode="Free" Value="50" Enabled="true">
                                            </telerik:RadSlider>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </ContentTemplate>
                </asp:UpdatePanel>
                <asp:UpdateProgress ID="UPR2" runat="server" AssociatedUpdatePanelID="upPrincipal" DisplayAfter="500">
                    <ProgressTemplate>
                        <div class="cont-prog">
                            <div class="msg-prog">Procesando...</div>
                        </div>
                        </div>
                    </ProgressTemplate>
                </asp:UpdateProgress>
            </ContentTemplate>
        </telerik:RadWindow>
    </form>
</body>
</html>
Rumen
Telerik team
commented on 27 Jun 2023, 10:03 AM

By default, you should not experience such a problem with the default configuration of the Telerik controls. My test with the latest version does not show problems with your code: 

 

What you can do is to examine the stylesheet of the page for any CSS settings which override the default z-index of the combobox and datepicker dropdowns. For example, start to comment these link tags one by one and test the page: 

    <link href="../css/Mensaje.css" rel="stylesheet" />
    <link href="../css/bootstrap.min.css" rel="stylesheet" />
    <link href="../css/bootstrap-icons-1.9.1/bootstrap-icons.css" rel="stylesheet" />
    <link href="../css/fonts.css" rel="stylesheet" />

 

No answers yet. Maybe you can help?

Tags
Ajax ComboBox DatePicker Window
Asked by
Joimer
Top achievements
Rank 1
Share this question
or