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

unable to view dropdown item in ajax ModalPopupExtender

1 Answer 395 Views

General Discussions

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

Dorababu asked on 28 Jun 2012, 01:25 PM

dropdown.png

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

<html xmlns="http://www.w3.org/1999/xhtml">

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

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

</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();

}

1 Answer, 1 is accepted

answered on 03 Jul 2012, 12:44 PM

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.