RadComboBox on modalPopupExtender - z-index issue

[Waynen12]

Hi, 

I'm having a strange issue with a radcombobox that is part of a custom control that sits on a modalpopupextender. The combo displays and can be used correctly but it is possible to select items that sit under the popup. For example, if the popup is displayed over a radgrid, it is possible to select the rows of the grid clicking on the combobox. Hovering the mouse over the combobox will also highlight the rows of the grid directly underneath. You can also select the the page size drop down if it happens to line up with the combobox.

This issue only happens in internet explorer 8 (note: you must use a real ie8 install not compatibility mode). Unfortunately our client uses ie8.
I've tried setting the z-index of the combo to a very high number with no success.  
Any suggestions you have would be appreciated. 

Thanks.

<telerik:RadComboBox runat="server" ID="ComboBox"

        CausesValidation="true" AppendDataBoundItems="False"

        OnSelectedIndexChanged="OnSelectedIndexChanged" AutoPostBack="True"

        Filter="Contains" CssClass="combo" EnableTextSelection="True" Width="75%" HighlightTemplatedItems="True" Height="200px"

        DropDownCssClass="select" OnDataBound="OnDataBound" OnItemDataBound="OnItemDataBound" OnClientBlur="OnclientBlurComboBoxHandler"

        OnItemCreated="OnItemCreated" OnClientLoad="ThrottleComboBoxAutoComplete" OnItemsRequested="OnItemsRequested" 

         OnClientItemsRequesting="comboboxOnItemsRequesting" OnClientDropDownOpening="comboboxOnDropDownOpening" OnClientKeyPressing="comboBoxOnClientKeyPressing" Style="z-index: 10000001">

        <ItemTemplate>

            <div style="width: 100%">

                <asp:Label ID="Label1" runat="server" Font-Size="10" Text='<%# DataBinder.Eval(Container, DataValueProperty).ToString() == "0" ?

                DataBinder.Eval(Container, "Text") : string.Empty  %>' />

                <table width="100%" style='display: <%#  DataBinder.Eval(Container, "Value").ToString() != "0" ? "table" : "none" %>'>

                    <tr>

                        <td id="ComboSearchTableCellID" runat="server" style="width: 10%">

                            <asp:Label ID="Label2" runat="server" Text='<%# Eval(DataIDProperty) %>' />

                        </td>

                        <td>

                            <asp:Label ID="Label3" runat="server" Text='<%# Container.DataItem == null ?

                            DataBinder.Eval(Container, "Text") : DataBinder.Eval(Container.DataItem, DataTextProperty) %>' />

                        </td>

                    </tr>

                </table>

            </div>

        </ItemTemplate>

    </telerik:RadComboBox>

function comboboxOnItemsRequesting(combo, eventArgs)
{
    if (combo.watingforClientInput == 1) {
        combo._filterText = "";
        eventArgs.get_context()["Text"] = "";
    } else {
        combo._filterText = combo.get_text();
        eventArgs.get_context()["Text"] = combo.get_text();
    }
}

function comboboxOnDropDownOpening(combo, eventArgs) {
   if (combo.get_enableLoadOnDemand()) {
        combo.watingforClientInput = 1;
        if (combo.get_items().get_count() > 0)
            combo.requestItems(combo.get_text(), false);
    }
}

function comboBoxOnClientKeyPressing(combo, eventArgs) {

    if (combo.get_enableLoadOnDemand())
    if (combo.watingforClientInput == 1) {
        combo.watingforClientInput = 0;
    }
}

function RadComboBoxOnClientBlurHandler(sender, eventArgs) {
    var checkedItems = sender.get_checkedItems();
    switch (checkedItems.length) {
        case 0:
            sender.set_text("");
            break;
        case 1:
            sender.set_text(sender.get_text());
            break;
        default:
            sender.set_text(checkedItems.length + " items checked");
            break;
    }
}

[Nencho]

Hello Wayne,

With using the Style="z-index: 10000001" in the declaration of the RadComboBox, you are specifying the z-index value of the input area of the control but not to the DropDown. Please consider using the ZIndex property of the ComboBox, which would affect the DropDown z-index value.

Regards,
Nencho
Telerik

[Graeme Mc]

Hi, I tried to implement the solution you provided but it doesn't work. Do you have any other suggestions?

[Nencho]

Hello Graeme,

Would you specify what exactly is the problematic behavior at your end? It would be helpful, if you could provide us with the declaration of the RadComboBox and the markup, in order to try to reproduce the faced issue locally and troubleshoot it for you.

Regards,
Nencho
Telerik

[Waynen12]

Hi Nencho,

Graeme was looking at this issue for me last week (sorry for the confusion).

We  tried your suggestion of setting the ZIndex property explicitly but it didn't seem to help the issue. 
The current markup for the control is below. Script is the same as above.

<telerik:RadComboBox runat="server" ID="ComboBox"
       CausesValidation="true" AppendDataBoundItems="False"
       OnSelectedIndexChanged="OnSelectedIndexChanged" AutoPostBack="True"
       Filter="Contains"  EnableTextSelection="False" Width="75%"  Height="200px"
       DropDownCssClass="select" OnDataBound="OnDataBound" OnItemDataBound="OnItemDataBound" OnClientBlur="OnclientBlurComboBoxHandler"
       OnItemCreated="OnItemCreated" OnClientLoad="ThrottleComboBoxAutoComplete" OnItemsRequested="OnItemsRequested"
        OnClientItemsRequesting="comboboxOnItemsRequesting" OnClientDropDownOpening="comboboxOnDropDownOpening" OnClientKeyPressing="comboBoxOnClientKeyPressing" ZIndex="10000001">
       <ItemTemplate>
           <div style="width: 100%">
               <asp:Label ID="Label1" runat="server" Font-Size="10" Text='<%# DataBinder.Eval(Container, DataValueProperty).ToString() == "0" ?
               DataBinder.Eval(Container, "Text") : string.Empty  %>' />
               <table width="100%" style='display: <%#  DataBinder.Eval(Container, "Value").ToString() != "0" ? "table" : "none" %>'>
                   <tr>
                       <td id="ComboSearchTableCellID" runat="server" style="width: 10%">
                           <asp:Label ID="Label2" runat="server" Text='<%# Eval(DataIDProperty) %>' />
                       </td>
                       <td>
                           <asp:Label ID="Label3" runat="server" Text='<%# Container.DataItem == null ?
                           DataBinder.Eval(Container, "Text") : DataBinder.Eval(Container.DataItem, DataTextProperty) %>' />
                       </td>
                   </tr>
               </table>
           </div>
       </ItemTemplate>
   </telerik:RadComboBox>

[Waynen12]

To make the issue clearer I've added some screenshots below. Notice in the first picture that the pagestyle drop down from the grid behind the popup is appearing on the combo.
In the second picture, the grid behind is selecting the row behind the combo when the user hovers the mouse there. The tooltip that is shown is also from the grid.

Thanks,

Wayne

[Nencho]

Hello Wayne,

I have performed some further tests, base on the provided implementation and instructions, but I am afraid, that I was unable to replicate the faced issue. This is the reason why, I have prepared a sample project for you, demonstrating the behavior at my end. Would you give it a try at your end and modify it in a manner so we could observe the issue locally? Find the attached sample.

Regards,
Nencho
Telerik

[Waynen12]

Hi Nencho,

Thanks for the code. I built your sample app and gave it a look. I was able to reproduce the issue without making any changes. 
If you look at the attached screen shot. 
How to reproduce:

Click on the Add new record button to display the filters. 
Open the popup. 

The combo is aligned with the supplier filter. If you click just after Item 1 on the combo, the filter will appear on top of it. 
It may take a few clicks but it does happen. 

Again, You need to use a vanilla install of IE8. Changing the rendering mode of a later version won't produce this issue.

Thanks,

Wayne

[Waynen12]

I modified the code to allow client row selection and also allow enable drag and drop on the popup. With these changes I can now see the row selection and highlighting  when I mouse over and click on the combo. 

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <style type="text/css">
        .BackGround
        {
            background-color: Gray;
            filter: alpha(opacity=70);
            opacity: 0.7;
            z-index: 100 !important;
        }

        .Pop
        {
            z-index: 1001 !important;
            background-color: White;
            width: 400px;
            height: 300px;
            border: 1px solid black;
            border-radius: 10px;
        }

        .RadComboBoxStyle
        {
            margin-left: 20px !important;
            margin-top: -20px !important;
        }

        .RadButtonStyle
        {
            margin-left: 352px !important;
            margin-top: 2px !important;
        }
    </style>
</head>
<body>
    <form id="main" runat="server">
    <ajaxToolkit:ToolkitScriptManager runat="server">
    </ajaxToolkit:ToolkitScriptManager>
    <div id="containter" style="width: 300px; height: 200px">
        <%--  <ajaxToolkit:ModalPopupExtender runat="server" ID="modalExtenderPopup" BackgroundCssClass="BackgroundCssClass" PopupControlID="containter" TargetControlID="ComboBox">
            </ajaxToolkit:ModalPopupExtender>--%>
    </div>
    <asp:LinkButton ID="LinkButton1" runat="server" Text="Click To Show PopUp"></asp:LinkButton>
    <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender" runat="server" PopupControlID="popUpPanel"
        Drag="true" BackgroundCssClass="BackGround" TargetControlID="LinkButton1" CancelControlID="RadButton1">
    </ajaxToolkit:ModalPopupExtender>
    <ajaxToolkit:DragPanelExtender runat="server" DragHandleID="popUpPanel" TargetControlID="popUpPanel"
        EnableViewState="False" ID="DragPanel">
    </ajaxToolkit:DragPanelExtender>
    <asp:Button ID="dummyTarget" Text="" runat="server" Style="display: none" />
    <asp:Button ID="dummyClose" Text="" runat="server" Style="display: none" />
    <asp:Panel ID="popUpPanel" runat="server" CssClass="Pop">
        <div>
            <telerik:RadButton ID="RadButton1" runat="server" Width="44px" Height="45px" CssClass="RadButtonStyle">
            </telerik:RadButton>
            <telerik:RadComboBox runat="server" ID="ComboBox" CausesValidation="true" AppendDataBoundItems="False"
                OnSelectedIndexChanged="ComboBox_SelectedIndexChanged" AutoPostBack="True" Filter="Contains"
                EnableTextSelection="False" Width="25%" Height="200px" DropDownCssClass="select"
                OnDataBound="ComboBox_DataBound" OnItemDataBound="ComboBox_ItemDataBound" OnClientBlur="OnclientBlurComboBoxHandler"
                OnItemChecked="ComboBox_ItemCreated" OnClientLoad="ThrottleComboBoxAutoComplete"
                OnItemsRequested="ComboBox_ItemsRequested" OnClientItemsRequesting="comboboxOnItemsRequesting"
                OnClientDropDownOpening="comboboxOnDropDownOpening" OnClientKeyPressing="comboBoxOnClientKeyPressing"
                ZIndex="10000001">
                <ItemTemplate>
                    <div style="width: 100%">
                        <asp:Label ID="Label1" runat="server" Font-Size="10" Text='<%#DataBinder.Eval(Container, "Text") %>' />
                        <table width="100%" style='display: <%#  DataBinder.Eval(Container, "Value").ToString() != "0" ? "table" : "none" %>'>
                            <tr>
                                <td id="ComboSearchTableCellID" runat="server" style="width: 10%">
                                    <asp:Label ID="Label2" runat="server" Text="DataIDProperty" />
                                </td>
                                <td>
                                    <asp:Label ID="Label3" runat="server" Text='<%# DataBinder.Eval(Container, "Text") %>' />
                                </td>
                            </tr>
                        </table>
                    </div>
                </ItemTemplate>
                <Items>
                    <telerik:RadComboBoxItem Text="item 1" Value="1" />
                    <telerik:RadComboBoxItem Text="item 2" Value="2" />
                    <telerik:RadComboBoxItem Text="item 3" Value="3" />
                </Items>
            </telerik:RadComboBox>
            <asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
                SelectCommand="select ContactName from [Customers]"></asp:SqlDataSource>
        </div>
    </asp:Panel>
    <telerik:RadGrid ID="RadGrid1" GridLines="None" AutoGenerateColumns="false" PageSize="10"
        AllowPaging="true" AllowSorting="true" runat="server" OnItemDataBound="OnItemDataBoundHandler"
        DataSourceID="ProductsDataSource" AllowAutomaticUpdates="true" AllowAutomaticInserts="True"
        ShowStatusBar="true">
        <ClientSettings AllowDragToGroup="True" AllowColumnsReorder="True" ReorderColumnsOnClient="False"
            EnableRowHoverStyle="True">
            <Selecting AllowRowSelect="true" />
            <Scrolling AllowScroll="True" SaveScrollPosition="True" UseStaticHeaders="true" />
            <Resizing AllowColumnResize="true" ClipCellContentOnResize="True" ResizeGridOnColumnResize="True"
                AllowResizeToFit="True" EnableRealTimeResize="False" />
        </ClientSettings>
        <MasterTableView ShowFooter="false" DataKeyNames="ProductID" EditMode="InPlace" CommandItemDisplay="TopAndBottom">
            <Columns>
                <telerik:GridBoundColumn DataField="ProductName" HeaderText="ProductName" HeaderStyle-Width="300px"
                    ItemStyle-Width="300px" />
                <telerik:GridTemplateColumn UniqueName="Supplier" HeaderText="Supplier" SortExpression="CompanyName"
                    ItemStyle-Width="400px">
                    <FooterTemplate>
                        Template footer</FooterTemplate>
                    <FooterStyle VerticalAlign="Middle" HorizontalAlign="Center" />
                    <ItemTemplate>
                        <%#DataBinder.Eval(Container.DataItem, "CompanyName")%>
                    </ItemTemplate>
                    <EditItemTemplate>
                        <telerik:RadComboBox runat="server" ID="RadComboBox1" EnableLoadOnDemand="True" DataTextField="CompanyName"
                            OnItemsRequested="RadComboBox1_ItemsRequested" DataValueField="SupplierID" AutoPostBack="true"
                            HighlightTemplatedItems="true" Height="140px" Width="220px" DropDownWidth="420px"
                            OnSelectedIndexChanged="OnSelectedIndexChangedHandler">
                            <HeaderTemplate>
                                <ul>
                                    <li class="col1">Company</li>
                                    <li class="col2">ContactName</li>
                                </ul>
                            </HeaderTemplate>
                            <ItemTemplate>
                                <ul>
                                    <li class="col1">
                                        <%# DataBinder.Eval(Container, "Text")%>
                                    </li>
                                    <li class="col2">
                                        <%# DataBinder.Eval(Container, "Attributes['ContactName']")%></li>
                                </ul>
                            </ItemTemplate>
                        </telerik:RadComboBox>
                    </EditItemTemplate>
                </telerik:GridTemplateColumn>
                <telerik:GridTemplateColumn HeaderText="Category" ItemStyle-Width="240px">
                    <ItemTemplate>
                        <%#DataBinder.Eval(Container.DataItem, "CategoryName")%>
                    </ItemTemplate>
                    <EditItemTemplate>
                        <telerik:RadComboBox runat="server" ID="RadComboBox2" DataTextField="CategoryName"
                            DataValueField="CategoryID" DataSourceID="CategoriesDataSource" SelectedValue='<%#Bind("CategoryID") %>'>
                        </telerik:RadComboBox>
                    </EditItemTemplate>
                </telerik:GridTemplateColumn>
                <telerik:GridEditCommandColumn FooterText="EditCommand footer" UniqueName="EditCommandColumn"
                    HeaderText="Edit" HeaderStyle-Width="100px" UpdateText="Update">
                </telerik:GridEditCommandColumn>
            </Columns>
        </MasterTableView>
    </telerik:RadGrid>
    <asp:SqlDataSource ID="ProductsDataSource" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString35 %>"
        SelectCommand="SELECT products.[ProductID], products.[ProductName], products.[SupplierID], products.[CategoryID],
                                     suppliers.[CompanyName], suppliers.[ContactName],
                                     categories.[CategoryName]
                                     FROM [Products] AS products
                                     INNER JOIN Suppliers AS suppliers
                                     ON products.SupplierID = suppliers.SupplierID
                                     INNER JOIN Categories AS categories
                                     ON products.CategoryID = categories.CategoryID"
        InsertCommand="INSERT INTO [Products] ([ProductName], [SupplierID], [CategoryID]) VALUES (@ProductName, @SupplierID, @CategoryID)"
        UpdateCommand="UPDATE [Products] SET  [ProductName] = @ProductName, [SupplierID] = @SupplierID, [CategoryID] = @CategoryID WHERE [ProductID] = @ProductID">
        <InsertParameters>
            <asp:Parameter Name="ProductName" Type="String" />
            <asp:SessionParameter SessionField="SupplierID" Name="SupplierID" Type="Int32" />
            <asp:Parameter Name="CategoryID" Type="Int32" />
        </InsertParameters>
        <UpdateParameters>
            <asp:Parameter Name="ProductID" Type="Int32" />
            <asp:Parameter Name="ProductName" Type="String" />
            <asp:SessionParameter SessionField="SupplierID" Name="SupplierID" Type="Int32" />
            <asp:Parameter Name="CategoryID" Type="Int32" />
        </UpdateParameters>
    </asp:SqlDataSource>
    <asp:SqlDataSource ID="CategoriesDataSource" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString35 %>"
        SelectCommand="SELECT [CategoryID], [CategoryName] FROM [Categories]"></asp:SqlDataSource>
    </form>
    <script type="text/javascript">

        function ThrottleComboBoxAutoComplete(sender) {

        }

        function comboboxOnItemsRequesting(combo, eventArgs) {
            if (combo.watingforClientInput == 1) {
                combo._filterText = "";
                eventArgs.get_context()["Text"] = "";
            } else {
                combo._filterText = combo.get_text();
                eventArgs.get_context()["Text"] = combo.get_text();
            }
        }

        function comboboxOnDropDownOpening(combo, eventArgs) {
            if (combo.get_enableLoadOnDemand()) {
                combo.watingforClientInput = 1;
                if (combo.get_items().get_count() > 0)
                    combo.requestItems(combo.get_text(), false);
            }
        }

        function comboBoxOnClientKeyPressing(combo, eventArgs) {

            if (combo.get_enableLoadOnDemand())
                if (combo.watingforClientInput == 1) {
                    combo.watingforClientInput = 0;
                }
        }

        function OnclientBlurComboBoxHandler(sender, eventArgs) {
            var checkedItems = sender.get_checkedItems();
            switch (checkedItems.length) {
                case 0:
                    sender.set_text("");
                    break;
                case 1:
                    sender.set_text(sender.get_text());
                    break;
                default:
                    sender.set_text(checkedItems.length + " items checked");
                    break;
            }
        }


    </script>
</body>
</html>

[Nencho]

Hello Wayne,

Thank you for sharing your solution with the community.

Regards,
Nencho
Telerik

[Waynen12]

Hi Nencho,

My last post there wasn't a solution. Just some changes to you code to show how to reproduce the issue. 
I think you may have a bug in the Combo box control. 

Thanks,

Wayne

[Nencho]

Hello Wayne,

Excuse me for my misunderstanding. I tried to replicate the behavior demonstrated in the attached image, but to no avail. Here is a video, demonstrating the behavior at my end. However, would you try to increase the ZIndex of the ModalPopupExtender.


Regards,
Nencho
Telerik

[Waynen12]

Hi Nencho,

I noticed in your video that you are using IE10 with the developer mode to switch to ie8 rendering.
As I said above, you will NOT be able to reproduce the issue this way. You need a proper install of ie8. The rendering mode is not the same as the full install of the browser. 

I am using a virtual machine install of windows xp with ie 8 installed. I need to do it this way as our clients use ie8 on their machines. 

Thanks, 

Wayne

[Nencho]

Hello Wayne,

Please excuse me for my mistake. I was able to replicate the described issue and I had already forwarded it to our developer team for further investigation. Thank you for pointing that out.

Regards,
Nencho
Telerik

[Stephen]

.

[Waynen12]

Hi Nencho,

Thanks for letting me know. 

Wayne