unable to view dropdown item in ajax ModalPopupExtender

2 posts, 0 answers
  1. Dorababu
    Dorababu avatar
    95 posts
    Member since:
    May 2012

    Posted 28 Jun 2012 Link to this post

    Hi all i have designed a ModalPopupExtender with some controls in that rad drop down exists. But when I select on the drop down I am unable to view the items can some one help me

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="modal.aspx.cs" Inherits="modal" %>
     
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head runat="server">
        <title></title>
        <link href="StyleSheet2.css" rel="stylesheet" type="text/css" />
        <link href="TabStrip.WebBlue.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript">
            function ok(sender, e) {
                $find('<%# mpeModalPopUp.ClientID %>').hide();
                __doPostBack('btnModalPopUp', e);
            }
            function cancel(sender, e) {
                $find('<%# mpeModalPopUp.ClientID %>').hide();
            }
            function pageLoad(sender, args) {
                //Note that the OnKeyPress event handler will not work unless you register it with the Microsoft AJAX     //Library. The best place to run this registration code is the pageLoad function, like so:
                $addHandler(document, "keydown", onKeyDown);
            }
            function onKeyDown(args) {
                //Closing the Popup Using the Esc Key
                if (args.keyCode == Sys.UI.Key.esc) {
                    $find('<%# mpeModalPopUp.ClientID%>').hide();
                }
                if (args.keyCode == Sys.UI.Key.enter) {
                    $find('<%# mpeModalPopUp.ClientID%>').hide();
                }
            }
        </script>
        <script type="text/javascript">
            function closepopup1() {
                $find('<%# mpeModalPopUp.ClientID %>').hide();
     
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="script" runat="server">
        </asp:ScriptManager>
        <div>
            <asp:ModalPopupExtender ID="mpeModalPopUp" runat="server" TargetControlID="btnModalPopUp"
                PopupControlID="pnlNoPayroll" CancelControlID="ImgOk" BackgroundCssClass="modalBackground">
            </asp:ModalPopupExtender>
            <div class="text" style="background-color: #ffffff">
                <ul class="formList" id="pWHolding">
                    <asp:Button ID="btnModalPopUp" runat="server" Style="display: none" />
                    <asp:Panel ID="pnlNoPayroll" runat="server" BackColor="White" Height="500px" Width="300px"
                        Style="display: none">
                        <table width="100%" style="border: Solid 2px #999; width: 100%; height: 100%" cellpadding="0"
                            cellspacing="0">
                            <tr style="background-image: url(Images/title.gif)">
                                <td style="height: 10%; color: Black; padding: 2px; font-size: larger; font-family: Calibri"
                                    align="center">
                                    Information
                                </td>
                                <td style="color: White; font-weight: bold; padding: 3px; font-size: larger" align="right">
                                    <a href="javascript:void(0)" onclick="closepopup1()">
                                        <img src="Images/x.png" style="border: 0px" align="right" /></a>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="text" style="background-color: #ffffff">
                                        <ul class="formList" id="Ul1">
                                            <asp:UpdatePanel ID="upWith" runat="server">
                                                <ContentTemplate>
                                                    <asp:Panel ID="pnlpopWithHolding" runat="server">
                                                        <li>
                                                            <asp:Label ID="lblwhpopTaxAuthority1" AssociatedControlID="rdwhpopTaxAuthority1"
                                                                runat="server" Text="Tax Authority" Width="200px"></asp:Label>
                                                            <asp:DropDownList ID="rdwhpopTaxAuthority1" runat="server" AutoPostBack="true" OnSelectedIndexChanged="rdwhpopTaxAuthority1_SelectedIndexChanged">
                                                                <asp:ListItem Text="1" Value="1"></asp:ListItem>
                                                                <asp:ListItem Text="2" Value="2"></asp:ListItem>
                                                            </asp:DropDownList>
                                                        </li>
                                                        <li>
                                                            <asp:Label ID="lblpopwhMaritalStatus1" AssociatedControlID="rdwhpopMartialStatus1"
                                                                runat="server" Text="Marital Status" Width="200px"></asp:Label>
                                                            <telerik:RadComboBox ID="rdwhpopMartialStatus1" Width="200px" runat="server" AutoPostBack="true"
                                                                OnSelectedIndexChanged="rdwhpopMartialStatus1_SelectedIndexChanged">
                                                            </telerik:RadComboBox>
                                                        </li>
                                                        <li><b>Allowances</b> </li>
                                                        <asp:Panel runat="server" ID="pnlpopAllowance" Visible="false">
                                                            <li>
                                                                <asp:Label ID="lblpopAllowances" AssociatedControlID="rdwhpopAllowances" runat="server"
                                                                    Text="Allowance" Width="200px"></asp:Label>
                                                                <telerik:RadNumericTextBox ID="rdwhpopAllowances" NumberFormat-GroupSeparator=""
                                                                    Width="200px" runat="server" Type="Number" IncrementSettings-InterceptMouseWheel="false"
                                                                    IncrementSettings-InterceptArrowKeys="false">
                                                                    <NumberFormat DecimalDigits="0" />
                                                                </telerik:RadNumericTextBox
                                                                <asp:RequiredFieldValidator ID="rqrdpopAllowances" runat="server" ControlToValidate="rdwhpopAllowances"
                                                                    ErrorMessage="Required Allowances" CssClass="error" ValidationGroup="vgPop">
                                                                </asp:RequiredFieldValidator>
                                                            </li>
                                                        </asp:Panel>
                                                        <asp:Panel runat="server" ID="pnlpopPersonal" Visible="false">
                                                            <li>
                                                                <asp:Label ID="lblwhpopTaxAllowances1" AssociatedControlID="rdwhpoptxtAllowances2"
                                                                    runat="server" Text="Personal Allowances" Width="200px"></asp:Label>
                                                                <telerik:RadTextBox ID="rdwhpoptxtAllowances2" runat="server" Width="200px">
                                                                </telerik:RadTextBox>
                                                                <telerik:RadNumericTextBox ID="rdwhpoptxtAllowances1" NumberFormat-GroupSeparator=""
                                                                    IncrementSettings-InterceptMouseWheel="false" IncrementSettings-InterceptArrowKeys="false"
                                                                    Width="200px" runat="server" Type="Number">
                                                                    <NumberFormat DecimalDigits="0" />
                                                                </telerik:RadNumericTextBox
                                                                <asp:RequiredFieldValidator ID="rqrdpopwhAllowances1" runat="server" ControlToValidate="rdwhpoptxtAllowances1"
                                                                    ErrorMessage="Required perosnal Allowances" CssClass="error" ValidationGroup="vgPop">
                                                                </asp:RequiredFieldValidator>
                                                            </li>
                                                        </asp:Panel>
                                                        <asp:Panel runat="server" ID="pnlpopDependent" Visible="false">
                                                            <li>
                                                                <asp:Label ID="lblwhpopDependentAllowances" AssociatedControlID="rdwhpoptxtdepAllowances"
                                                                    runat="server" Text="Dependent Allowances" Width="200px"></asp:Label>
                                                                <telerik:RadNumericTextBox ID="rdwhpoptxtdepAllowances" NumberFormat-GroupSeparator=""
                                                                    Width="200px" runat="server" Type="Number" IncrementSettings-InterceptMouseWheel="false"
                                                                    IncrementSettings-InterceptArrowKeys="false">
                                                                    <NumberFormat DecimalDigits="0" />
                                                                </telerik:RadNumericTextBox
                                                                <asp:RequiredFieldValidator ID="rqrdwhpopdepAllowance" runat="server" ControlToValidate="rdwhpoptxtdepAllowances"
                                                                    ErrorMessage="Required dependent Allowances" CssClass="error" ValidationGroup="vgPop">
                                                                </asp:RequiredFieldValidator>
                                                            </li>
                                                        </asp:Panel>
                                                        <asp:Panel ID="pnlpopAddallowance" runat="server" Visible="false">
                                                            <asp:Label ID="lblAddAllowances" AssociatedControlID="rdtxtpopAdditional" runat="server"
                                                                Text="Additional Allowances" Width="200px"></asp:Label>
                                                            <telerik:RadNumericTextBox ID="rdtxtpopAdditional" NumberFormat-GroupSeparator=""
                                                                Width="200px" runat="server" Type="Number" IncrementSettings-InterceptMouseWheel="false"
                                                                IncrementSettings-InterceptArrowKeys="false">
                                                                <NumberFormat DecimalDigits="0" />
                                                            </telerik:RadNumericTextBox>
                                                        </asp:Panel>
                                                        <asp:Panel runat="server" ID="pnlpopAddWH" Visible="false">
                                                            <li>
                                                                <asp:Label ID="lblpopwhAddWH1" AssociatedControlID="rdwhpoptxtadditionalWH1" runat="server"
                                                                    Text="Additional Withholdings" Width="200px"></asp:Label>
                                                                <telerik:RadNumericTextBox ID="rdwhpoptxtadditionalWH1" NumberFormat-GroupSeparator=""
                                                                    Type="Number" Width="200px" runat="server" IncrementSettings-InterceptMouseWheel="false"
                                                                    IncrementSettings-InterceptArrowKeys="false">
                                                                    <NumberFormat DecimalDigits="0" />
                                                                </telerik:RadNumericTextBox>
                                                            </li>
                                                        </asp:Panel>
                                                        <li>
                                                            <asp:Label ID="lblwhpopExIS" runat="server" Text="Exemption Indicator Status" Width="200px"
                                                                AssociatedControlID="chkpopwhIS">
                                                            </asp:Label>
                                                            <asp:CheckBox ID="chkpopwhIS" runat="server" />
                                                        </li>
                                                        <li>
                                                            <asp:Label ID="lblwhpopEIC" runat="server" Text="Earned Income Credit" AssociatedControlID="chkpopwhEIC"
                                                                Width="200px">
                                                            </asp:Label>
                                                            <asp:CheckBox ID="chkpopwhEIC" runat="server" />
                                                        </li>
                                                        <asp:Panel ID="pnlpopCompensation" runat="server" Visible="true">
                                                            <asp:Label ID="lblpopCompensationRate" AssociatedControlID="rdpopcmbCompensation"
                                                                runat="server" Width="200px" Text="Compensation Rate"></asp:Label>
                                                            <telerik:RadComboBox ID="rdpopcmbCompensation" runat="server" HighlightTemplatedItems="true">
                                                                <Items>
                                                                    <telerik:RadComboBoxItem Text="0.008" />
                                                                    <telerik:RadComboBoxItem Text="0.013" />
                                                                    <telerik:RadComboBoxItem Text="0.018" />
                                                                    <telerik:RadComboBoxItem Text="0.027" />
                                                                    <telerik:RadComboBoxItem Text="0.036" />
                                                                    <telerik:RadComboBoxItem Text="0.046" />
                                                                    <telerik:RadComboBoxItem Text="0.051" />
                                                                </Items>
                                                            </telerik:RadComboBox>
                                                        </asp:Panel>
                                                    </asp:Panel>
                                                </ContentTemplate>
                                            </asp:UpdatePanel>
                                            <br />
                                            <table style="margin-left: 50px;">
                                                <tr>
                                                    <td>
                                                        <telerik:RadButton ID="rdbtnwhSave" runat="server" Text="Save & Next" ValidationGroup="vgPop"
                                                            OnClick="rdbtnclick">
                                                        </telerik:RadButton>
                                                        <br />
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td align="center" style="padding-left: 15px">
                                                        <asp:ImageButton ID="ImgOk" CssClass="Selected" runat="server" ImageUrl="~/images/button_ok.gif" />
                                                    </td>
                                                </tr>
                                            </table>
                                        </ul>
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </asp:Panel>
                </ul>
            </div>
        </div>
        </form>
    </body>
    </html>

    My code

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
     
    public partial class modal : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            //rdpopcmbCompensation.DataBind();
            mpeModalPopUp.Show();
        }
     
        protected void rdwhpopTaxAuthority1_SelectedIndexChanged(object sender, EventArgs e)
        {
            chkpopwhEIC.Checked = true;
        }
     
        protected void rdwhpopMartialStatus1_SelectedIndexChanged(object sender, EventArgs e)
        {
             
        }
     
        protected void rdbtnclick(object sender, EventArgs e)
        {
            mpeModalPopUp.Hide();
        }
    }

  2. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 03 Jul 2012 Link to this post

    Hi Dorababu,

    I tested your code and it seems that the issue that you get is a z-index related one. By applying the following styles however, I was able to get the desired look:
    <style type="text/css">
           div.rcbSlide
           {
               z-index: 600000 !important;
           }
       </style>

    Regards,
    Kate
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top