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

RadComboBox on modalPopupExtender - z-index issue

15 Answers 420 Views

ComboBox

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

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

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>

answered on 29 Nov 2013, 09:55 AM

comboIssue.png

comboissue-2.JPG

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

answered on 04 Dec 2013, 09:33 AM

ComboInPopupExtenderOverGrid.zip

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.

answered on 04 Dec 2013, 03:37 PM

comboissue-3.JPG

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

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.

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