telerik Combo Box shows different look when scroll down that page

11 posts, 0 answers
  1. Nani
    Nani avatar
    10 posts
    Member since:
    Nov 2011

    Posted 24 Nov 2011 Link to this post

    HI,

        I am using telerik control. when i click on Combobox( Not only Combobox event raddatepicker,radAjaxloading panel....etc) it expand with items.( Here i am attach image  normalImage.png). after i am scrolling my page down /up it showing different . Here i am attaching that different look image ( i.e flying images.png  ) . i am using asp.net webapplication in Cs
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 24 Nov 2011 Link to this post

    Hello,

    I am not quite sure about where you have placed the ComboBox. The same issue occured when ComboBox is placed inside Splitter. Take a look into the following forum thread for more.
    Problem between radcombobox and radsplitter

    Thanks,
    Princy.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Nani
    Nani avatar
    10 posts
    Member since:
    Nov 2011

    Posted 25 Nov 2011 Link to this post

    hi ,
    Thanks for your quick replay . In my applciation i am not using splitter . my code :
    In this code my observation i am given div height is 10000px;

     i am attaching output also as differentLook.png
    <head id="Head1" runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager ID="rdScrptFacilityMgr" runat="server" EnablePageMethods="true">
        </telerik:RadScriptManager>
        <div class="divcontentOut" style="height: 400px; overflow: auto;">
            <fieldset class="fieldset">
                <legend class="legend"><b>
                    <asp:Literal ID="ltlDeal" runat="server" Text="Deal"></asp:Literal></b></legend>
                <div style="height:10000px;background-color:#D5E2F2;padding-top:20px">
     
              
                    <table class="FourColumnTable" cellpadding="1" cellspacing="0">
                        <tr>
                            <td class="ThirdColumn">
                                <span>Content</span><span class="required">*</span>
                            </td>
                            <td style="float: left; width: 80px">
                                <span style="padding-right: 5px">Per</span>
                                <telerik:RadComboBox ID="ddlper" Width="50px" runat="server" Skin="Office2007" Height="150px"
                                    TabIndex="8">
                                    <Items>
                                        <telerik:RadComboBoxItem Value='1' Text='1' />
                                        <telerik:RadComboBoxItem Value='2' Text='2' />
                                        <telerik:RadComboBoxItem Value='3' Text='3' />
                                        <telerik:RadComboBoxItem Value='4' Text='4' />
                                        <telerik:RadComboBoxItem Value='5' Text='5' />
                                        <telerik:RadComboBoxItem Value='6' Text='6' />
                                        <telerik:RadComboBoxItem Value='7' Text='7' />
                                        <telerik:RadComboBoxItem Value='8' Text='8' />
                                        <telerik:RadComboBoxItem Value='9' Text='9' />
                                        <telerik:RadComboBoxItem Value='10' Text='10' />
                                        <telerik:RadComboBoxItem Value='11' Text='11' />
                                        <telerik:RadComboBoxItem Value='12' Text='12' />
                                        <telerik:RadComboBoxItem Value='13' Text='13' />
                                        <telerik:RadComboBoxItem Value='14' Text='14' />
                                        <telerik:RadComboBoxItem Value='15' Text='15' />
                                    </Items>
                                </telerik:RadComboBox>
                            </td>
                        </tr>
                    </table>
                </div>
            </fieldset>
            <br />
        </div>
        </form>
    </body>
    </html>

     

     

     

     


  5. Kalina
    Admin
    Kalina avatar
    918 posts

    Posted 30 Nov 2011 Link to this post

    Hello Nani,

    You can close the "ddlper" RadComboBox dropdown upon control container scrolling in this way:
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager ID="rdScrptFacilityMgr"
            runat="server" EnablePageMethods="true">
        </telerik:RadScriptManager>
        <script type="text/javascript">
            function pageLoad() { 
              $telerik.$("div").scroll(function(){
                var combo = $find("<%=ddlper.ClientID %>");
                if (combo.get_dropDownVisible())
                  combo.hideDropDown();
                });
          }
        </script>
        <div class="divcontentOut" style="height: 400px; overflow: auto;">
            <fieldset class="fieldset">
                <legend class="legend"><b>
                    <asp:Literal ID="ltlDeal" runat="server" Text="Deal"></asp:Literal>
                 </b></legend>
                <div class="a" id="container"
                    style="height: 10000px; background-color: #D5E2F2;
                    padding-top: 20px">
                    <table class="FourColumnTable" cellpadding="1" cellspacing="0">
                        <tr>
                            <td class="ThirdColumn">
                                <span>Content</span><span class="required">*</span>
                            </td>
                            <td style="float: left; width: 80px">
                                <span style="padding-right: 5px">Per</span>
                                <telerik:RadComboBox ID="ddlper"
                                    Width="50px" runat="server" Skin="Office2007" Height="150px"
                                    TabIndex="8">
                                    <Items>
                                        <telerik:RadComboBoxItem Value='1' Text='1' />
                                        <telerik:RadComboBoxItem Value='2' Text='2' />
                                        <telerik:RadComboBoxItem Value='3' Text='3' />
                                        <telerik:RadComboBoxItem Value='4' Text='4' />
                                        <telerik:RadComboBoxItem Value='5' Text='5' />
                                        <telerik:RadComboBoxItem Value='6' Text='6' />
                                        <telerik:RadComboBoxItem Value='7' Text='7' />
                                        <telerik:RadComboBoxItem Value='8' Text='8' />
                                        <telerik:RadComboBoxItem Value='9' Text='9' />
                                        <telerik:RadComboBoxItem Value='10' Text='10' />
                                        <telerik:RadComboBoxItem Value='11' Text='11' />
                                        <telerik:RadComboBoxItem Value='12' Text='12' />
                                        <telerik:RadComboBoxItem Value='13' Text='13' />
                                        <telerik:RadComboBoxItem Value='14' Text='14' />
                                        <telerik:RadComboBoxItem Value='15' Text='15' />
                                    </Items>
                                </telerik:RadComboBox>
                            </td>
                        </tr>
                    </table>
                </div>
            </fieldset>
            <br />
        </div>
        </form>
    </body>

    Regards,
    Kalina
    the Telerik team
    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 their blog feed now
  6. Kumar
    Kumar avatar
    2 posts
    Member since:
    Nov 2011

    Posted 30 Nov 2011 Link to this post

    Hi,

     This very good solution . Thanks for given .....

    Can you please how to optimize the above java script code. Because of in my application having 18 page , each page contain 15 to 20 radcombobox. So that i need write this code lot of time .Can you please how to optimize the code for all controls.
    Thanks
    Kumar
    TCS
  7. Nani
    Nani avatar
    10 posts
    Member since:
    Nov 2011

    Posted 01 Dec 2011 Link to this post

    Hi Kumar,

    function pageLoad() {
               $telerik.$("div").scroll(function () {
                   var comboCollection = $(".FindINCSS_RadComboBox");
                   for (var i = 0; i < comboCollection.length; i++) {
                       var combo = $find(comboCollection[i].id);
                       if (combo.get_dropDownVisible())
                           combo.hideDropDown();
                   }
               });
           }
      <telerik:RadComboBox ID="RadComboBox" runat="server" Skin="Office2007"
                                CssClass="FindINCSS_RadComboBox" TabIndex="1" >
                            </telerik:RadComboBox>
    Write this above code in Master Page  and give all  RadComboBox CSSClass = "FindINCSS_RadComboBox" then its works perfect . i am using this solution.
  8. Kumar
    Kumar avatar
    2 posts
    Member since:
    Nov 2011

    Posted 01 Dec 2011 Link to this post

    hi,
    i have same ( Like as RadComboBox )  problem in RadDatePicker ,RadMonthPicker  can you please help me

    Kumar
    TCS
  9. Ralf
    Ralf avatar
    77 posts
    Member since:
    Jun 2012

    Posted 03 Dec 2011 Link to this post

    Hi all,

    same problem here. All comboboxes dropdowns will be not scrolled if the page will be scrolled up or down. I don't know why. When I check the demo http://demos.telerik.com/aspnet-ajax/combobox/examples/functionality/overlay/defaultcs.aspx the dropdown boxes are scrolling as expected. I'm using the latest Telerik version. And we use the controls in web parts in a SharePoint 2010 context. The SharePoint pages are unsing the html strict mode.
    Any suggestions whey the comboboxes are working different from dhe demo?

    We don't need to add javascript workarounds. Normally the behavior of the comboboex in the demo should be standard.

    Regards,
    Ralf
  10. Vasil
    Admin
    Vasil avatar
    1547 posts

    Posted 05 Dec 2011 Link to this post

    Hello,

    TCS, you could use the same logic for finding the pickers as for the ComboBox, just add to them some class and use similar code just calling the hidePopup() and hideTimePopup() functions.

    Ralf, the problem does not appear on the site because it is used the browser scroll on this pages. The problem comes when you use auto overflow for the div around the ComboBox, since the dropdown is absolute positioned element as explained in this forum thread.

    Greetings,
    Vasil
    the Telerik team
    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 their blog feed now
  11. Ralf
    Ralf avatar
    77 posts
    Member since:
    Jun 2012

    Posted 05 Dec 2011 Link to this post

    Hello Vasil,

    thank you for information.
    there is no auto overflow given at the combobox parent div. Maybe its a problem of the page html stict mode?

    Regards,
    Ralf
  12. Vasil
    Admin
    Vasil avatar
    1547 posts

    Posted 05 Dec 2011 Link to this post

    Hello Ralf,

    The problem could not be because of the strict mode, since it is irrelevant for this case.
    Check all parents of the CheckBox, not only the direct one. None of them should have scrolling if you want to avoid such problem. Scrolling of the page itself should not cause any issue.

    Kind regards,
    Vasil
    the Telerik team
    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 their blog feed now
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017