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

RadComboBox on modalPopupExtender - z-index issue

15 Answers 330 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
Waynen12
Top achievements
Rank 1
Waynen12 asked on 14 Nov 2013, 04:40 PM
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;
    }
}

15 Answers, 1 is accepted

Sort by
0
Nencho
Telerik team
answered on 19 Nov 2013, 01:19 PM
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
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 the blog feed now.
0
Graeme Mc
Top achievements
Rank 1
answered on 26 Nov 2013, 09:50 AM
Hi, I tried to implement the solution you provided but it doesn't work. Do you have any other suggestions?
0
Nencho
Telerik team
answered on 29 Nov 2013, 07:50 AM
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
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 the blog feed now.
0
Waynen12
Top achievements
Rank 1
answered on 29 Nov 2013, 09:32 AM
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>


0
Waynen12
Top achievements
Rank 1
answered on 29 Nov 2013, 09:55 AM
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
0
Nencho
Telerik team
answered on 04 Dec 2013, 09:33 AM
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
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 the blog feed now.
0
Waynen12
Top achievements
Rank 1
answered on 04 Dec 2013, 03:37 PM
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
0
Waynen12
Top achievements
Rank 1
answered on 04 Dec 2013, 03:55 PM
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. 

<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>
0
Nencho
Telerik team
answered on 09 Dec 2013, 11:43 AM
Hello Wayne,

Thank you for sharing your solution with the community.

Regards,
Nencho
Telerik
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 the blog feed now.
0
Waynen12
Top achievements
Rank 1
answered on 09 Dec 2013, 11:54 AM
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
0
Nencho
Telerik team
answered on 12 Dec 2013, 11:08 AM
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
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 the blog feed now.
0
Waynen12
Top achievements
Rank 1
answered on 12 Dec 2013, 11:29 AM
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
0
Nencho
Telerik team
answered on 17 Dec 2013, 11:44 AM
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
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 the blog feed now.
0
Stephen
Top achievements
Rank 1
answered on 17 Dec 2013, 11:49 AM
.
0
Waynen12
Top achievements
Rank 1
answered on 17 Dec 2013, 12:02 PM
Hi Nencho,

Thanks for letting me know. 

Wayne
Tags
ComboBox
Asked by
Waynen12
Top achievements
Rank 1
Answers by
Nencho
Telerik team
Graeme Mc
Top achievements
Rank 1
Waynen12
Top achievements
Rank 1
Stephen
Top achievements
Rank 1
Share this question
or