在页面滚动中禁用 RadComboBox 的下拉滚动

Question

我的项目使用 Telerik 控件，其中 RadComboBox 有问题。

我在 model popup 中打开的面板中设置了 RadComboBox。现在我的问题是，当我打开模型弹出窗口并滚动我的页面时，RadcomboBox 的 Dropdowm 会随着页面的滚动而移动。我有办法解决这个问题，但没有得到想要的结果。

任何人都可以解决建议我一些方法来解决这个问题。

这是我的 HTML 代码：

   <asp:UpdatePanel ID="upShare" runat="server" UpdateMode="Conditional">
    <ContentTemplate>

        <telerik:RadWindowManager ID="rdShare" runat="server">
        </telerik:RadWindowManager>
        <asp:Button ID="btnShare" runat="Server" Style="display: none" />
        <ajaxToolkit:ModalPopupExtender ID="mpeShare" runat="server" TargetControlID="btnShare"
            PopupControlID="pnlShare" CancelControlID="btnCancelShare" BackgroundCssClass="fade"
            Drag="false">
        </ajaxToolkit:ModalPopupExtender>

        <asp:Panel Style="display: none; width: 500px;overflow:hidden;" CssClass="modalPopup" ID="pnlShare"
            DefaultButton="btnsaveShare" runat="server">
            <div class="changeclienttitleReports" width="100%" style="background: #515151 !important;">
                <span id="ctl00_Label3">Share Report</span>
            </div>
            <table class="myForm" style="position: relative;">
                <tr>
                    <td style="width: 25%">
                        Report Name:
                    </td>
                    <td class="input" style="width: 75%">
                        <asp:TextBox ID="txtSharedReportName" runat="server" Width="300px" MaxLength="205"  
                        onKeyUp="Count(this,200,'Report Name')" onChange="Count(this,200,'Report Name')" ></asp:TextBox><br />
                    </td>
                </tr>
                <tr>
                    <td>
                        Share With:
                    </td>
                    <td>
                    <div id="head">
                      <telerik:RadComboBox ID="RdShareUsers"  EnableVirtualScrolling="false" style="" 
                                RenderMode="Lightweight" DataValueField="USERNAME" DataTextField="NAME"
                                Filter="StartsWith" DropDownWidth="307px" Width="87%" MaxHeight="200px" runat="server"
                                EmptyMessage="Select User" CheckBoxes="true">
                            </telerik:RadComboBox>
                     </div>
                    </td>
                </tr>
                <tr>
                    <td style="width: 25%">
                        Message:
                    </td>
                    <td class="input" style="width: 75%">
                        <asp:TextBox ID="txtMessage" runat="server" Width="300px" TextMode="MultiLine" Rows="3" onKeyUp="Count(this,500,'Message')" onChange="Count(this,500,'Message')"></asp:TextBox><br />
                          <span style="font-size: 11px; padding-left: 65px;">(Message must not exceed 500
                                                            characters)</span>
                    </td>
                </tr>
                <tr>
                    <td colspan="2" align="center">
                        <asp:UpdateProgress ID="UpdateProgress11" runat="server">
                            <ProgressTemplate>
                                <div style="text-align: center">
                                    <img src="../Images/loader.gif" />
                                </div>
                            </ProgressTemplate>
                        </asp:UpdateProgress>
                    </td>
                </tr>
                <tr>
                    <td>
                        &nbsp;
                    </td>
                    <td class="input">
                        <asp:Button ID="btnsaveShare" runat="server" Text="Share" CssClass="btn
btn-small btn-blue" OnClick="btnsaveShare_click" OnClientClick="return CheckValues();" />
                        &nbsp;&nbsp;
                        <asp:Button ID="btnCancelShare" runat="server" CausesValidation="false" Text="Cancel"
                            OnClientClick="ClearSharedControls();" CssClass="btn btn-small btn-blue" />
                    </td>
                </tr>
            </table>
        </asp:Panel>
         </div>
    </ContentTemplate>
</asp:UpdatePanel>

CSS 文件:

     .changeclienttitleReports
    {
        /* background: transparent -moz-linear-gradient(center top , #6a6a6a 0%, #515151 2%, #2e2e2e 100%) repeat scroll 0 0 !important; */
        color: white;
        font-size: 15px;
        font-weight: 500;
        height: 33px;
        line-height: 31px;
        padding-left: 10px;
    }
    .modalPopup
    {
        z-index: 1000;
    }


    #mpeRequest
    {
        z-index: 999;
    }

    #mpeShare
    {
        z-index: 999;
    }

    #ctl00_MainContent_pnlShare
    {
        z-index: 1000 !important;
    }
    #ctl00_MainContent_mpeShare_backgroundElement
    {
        z-index: 0 !important;
    }
    .form .field-group .field
    {
        width: 100%;
        margin-right: 0px !important;
    }
    #ctl00_MainContent_ddlBanners
    {
        width: 99% !important;
    }
    #ctl00_MainContent_ddlSubBanners
    {
        width: 99% !important;
    }
    #ctl00_MainContent_ddlCustomHierarchy
    {
        width: 93% !important;
    }

    #ctl00_MainContent_ddlcustomlevel1
    {
        width: 93% !important;
    }

    #ctl00_MainContent_ddlcustomlevel2
    {
        width: 93% !important;
    }

    #ctl00_MainContent_ddlcustomlevel3
    {
        width: 93% !important;
    }

    #ctl00_MainContent_ddlBrands
    {
        width: 93% !important;
    }

    #ctl00_MainContent_ddlProductSizeDesc
    {
        width: 93% !important;
    }
    #ctl00_MainContent_ddlWeekView
    {
        width: 70% !important;
    }
    .RadComboBoxDropDown_Default
    {
        width: 200px !important;
    }
    #ctl00_MainContent_ddlFiscalYear, #ctl00_MainContent_ddlFiscalQuarter
    {
        width: 99% !important;
    }
    #ctl00_MainContent_txtVendorNumber_wrapper
    {
        width: 99% !important;
    }
    .RadComboBoxDropDown .rcbItem > label, .RadComboBoxDropDown .rcbHovered > label, 
    .RadComboBoxDropDown .rcbDisabled > label, .RadComboBoxDropDown .rcbLoading > label, 
    .RadComboBoxDropDown .rcbCheckAllItems > label, .RadComboBoxDropDown .rcbCheckAllItemsHovered > label
    {
        font-size: 12px !important;
     }
    .RadComboBoxDropDown .rcbItem > label, .RadComboBoxDropDown .rcbHovered > label, .RadComboBoxDropDown .rcbDisabled > label, .RadComboBoxDropDown .rcbLoading > label, .RadComboBoxDropDown .rcbCheckAllItems > label, .RadComboBoxDropDown .rcbCheckAllItemsHovered > label
    {
        font-size: 12px !important;
    }

    .RadComboBox table
    {
        width: 99% !important;
    }
    .RightLogo
    {
        width: auto;
        height: 60px;
        float: right;
        margin-right: 6%;
        margin-bottom: 5px;
    }
    .RadComboBoxDropDown .rcbItem, .RadComboBoxDropDown .rcbHovered, .RadComboBoxDropDown .rcbDisabled, .RadComboBoxDropDown .rcbLoading, .RadComboBoxDropDown .rcbCheckAllItems, .RadComboBoxDropDown .rcbCheckAllItemsHovered
    {
        font-size: 12px !important;
    }
    .RadComboBoxDropDown .rcbCheckBox, .RadComboBoxDropDown .rcbCheckAllItemsCheckBox
    {
        opacity: 100 !important;


    }
    #ctl00_MainContent_txtrepdate_txtCalendar1
    {
        width: 100px !important;
    }

    #ctl00_MainContent_ChkMonthlyDays tbody
    {
        font-size: 11px !important;
    }

提前致谢！！

Answer 1

You could use the window scroll event and use Telerik methods like the toggleDropDown() or hideDropDown(), in order to toggle or hide the dropdown of the RadComboBox control.

    <script type="text/javascript">
        window.onscroll = function onPagescroll() {
            $find('#yourDropdownId').toggleDropDown(); 
            // $find('#yourDropdownId').hideDropDown();  //to hide dropdown
        };
     </script>

在页面滚动中禁用 RadComboBox 的下拉滚动

Disable RadComboBox's Dropdown scroll within page scrolls

html

asp.net

radcombobox