New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

How to Display RadDropDownList Dropdown Popup in AjaxControlToolkit ModalPopup Window


Property Value
Product RadDropDownList for ASP.NET AJAX
Version all


When using an AjaxControlToolkit modalpopup window, the RadDropDownList dropdown popup may not be displayed correctly.


To address this issue and ensure that the RadDropDownList dropdown popup is displayed correctly within the AjaxControlToolkit modalpopup window, you can follow these steps:

  1. Add the following JavaScript code to your page:
    function popupOpening(sender, args) {
        var popup = sender.get_dropDownElement();
        setTimeout(function () {
  'z-index', '103000', 'important');
  1. Modify your RadDropDownList control by adding the OnClientDropDownOpening attribute and set it to the popupOpening JavaScript function:
<telerik:RadDropDownList ID="ddlMatch" runat="server" OnClientDropDownOpening="popupOpening">
        <telerik:DropDownListItem Value="1" Text="Item1" />
        <telerik:DropDownListItem Value="2" Text="Item2" />
        <telerik:DropDownListItem Value="3" Text="Item 3" />

By implementing these steps, you will increase the z-index of the RadDropDownList dropdown popup, allowing it to be displayed correctly within the AjaxControlToolkit modalpopup window.

In this article