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

您可以使用窗口滚动事件并使用Telerik的方法，如 toggleDropDown（）或hideDropDown（），以切换或隐藏 的radcombobox控件控制的下拉列表。

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