RadComboBox on modalPopupExtender - z-index issue

16 posts, 0 answers
  1. Waynen12
    Waynen12 avatar
    15 posts
    Member since:
    Aug 2009

    Posted 14 Nov 2013 Link to this post

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

  2. Nencho
    Admin
    Nencho avatar
    1458 posts

    Posted 19 Nov 2013 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Graeme Mc
    Graeme Mc avatar
    17 posts
    Member since:
    Aug 2009

    Posted 26 Nov 2013 Link to this post

    Hi, I tried to implement the solution you provided but it doesn't work. Do you have any other suggestions?
  5. Nencho
    Admin
    Nencho avatar
    1458 posts

    Posted 29 Nov 2013 Link to this post

    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.
  6. Waynen12
    Waynen12 avatar
    15 posts
    Member since:
    Aug 2009

    Posted 29 Nov 2013 Link to this post

    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>


  7. Waynen12
    Waynen12 avatar
    15 posts
    Member since:
    Aug 2009

    Posted 29 Nov 2013 Link to this post

    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
  8. Nencho
    Admin
    Nencho avatar
    1458 posts

    Posted 04 Dec 2013 Link to this post

    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.
  9. Waynen12
    Waynen12 avatar
    15 posts
    Member since:
    Aug 2009

    Posted 04 Dec 2013 Link to this post

    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
  10. Waynen12
    Waynen12 avatar
    15 posts
    Member since:
    Aug 2009

    Posted 04 Dec 2013 Link to this post

    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>
  11. Nencho
    Admin
    Nencho avatar
    1458 posts

    Posted 09 Dec 2013 Link to this post

    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.
  12. Waynen12
    Waynen12 avatar
    15 posts
    Member since:
    Aug 2009

    Posted 09 Dec 2013 Link to this post

    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
  13. Nencho
    Admin
    Nencho avatar
    1458 posts

    Posted 12 Dec 2013 Link to this post

    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.
  14. Waynen12
    Waynen12 avatar
    15 posts
    Member since:
    Aug 2009

    Posted 12 Dec 2013 Link to this post

    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
  15. Nencho
    Admin
    Nencho avatar
    1458 posts

    Posted 17 Dec 2013 Link to this post

    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.
  16. Stephen
    Stephen avatar
    1 posts
    Member since:
    Aug 2013

    Posted 17 Dec 2013 Link to this post

    .
  17. Waynen12
    Waynen12 avatar
    15 posts
    Member since:
    Aug 2009

    Posted 17 Dec 2013 Link to this post

    Hi Nencho,

    Thanks for letting me know. 

    Wayne
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017