List Box Scrolling to Top when checkbox=true

8 posts, 0 answers
  1. Inamulhasan
    Inamulhasan avatar
    4 posts
    Member since:
    Feb 2014

    Posted 22 Jun 2015 Link to this post

    Hello,

     I stuck in a problem, listbox scrolls to top when I set to checkbox=true if works fine when it set to false. and does not fire any client side event

     This happens infrequently some times it works and some time it doesnt.

     I am adding items to list box server side and aslo doing some action on server side on index change.

     

    Below is my code.

                                            <telerik:RadListBox OnClientItemChecked="OnClientItemCheckedHandler" AutoPostBack="true"
                                                OnSelectedIndexChanged="btnViewBasket_OnClick" OnClientSelectedIndexChanged="onClientSelectedIndexChangedHandler"
                                                RenderMode="Native" CheckBoxes="true" CssClass="NoBorder FullWidth RADLISTBOX" ID="listBoxBaskets"
                                                runat="server">

                                           

                                            </telerik:RadListBox>

     

     

    <script>

    function OnClientItemCheckedHandler(sender, eventArgs) {
                // my client side logic
                   
                   
            }

           

            function onClientSelectedIndexChangedHandler(sender, e) {
              // my client side logic
            }

    </script>

  2. Inamulhasan
    Inamulhasan avatar
    4 posts
    Member since:
    Feb 2014

    Posted 23 Jun 2015 in reply to Inamulhasan Link to this post

    Still No reply? 

     Well,

    I had some observations,

     

    When I apply height to the RadListBox and add following JQUERY code(to keep focus on RadListBox), its work better.

     $(document).ready(function () {

                
                $("div.rlbGroup").focus();
                

            });

     

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Ivan Danchev
    Admin
    Ivan Danchev avatar
    835 posts

    Posted 23 Jun 2015 Link to this post

    Hello,

    Could you please provide more details on the steps needed to be performed in order for the issue to be reproduced and on the issue itself?
    1. Does the topmost RadListBox item get highlighted highlighted incorrectly or the problem is the scroll bar position only?
    2. The RadListBox set as in the code you posted in your first post does not display a scroll bar. Are you setting its Height explicitly somewhere in your code?
    3. Please post the custom CSS you are applying to your page and any relevant code that could be affecting the appearance and behavior of the RadListBox. This would help us reproduce the issue and offer a solution.

    Regards,
    Ivan Danchev
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  5. Inamulhasan
    Inamulhasan avatar
    4 posts
    Member since:
    Feb 2014

    Posted 30 Jun 2015 in reply to Ivan Danchev Link to this post

    Thanks for responst here are answers of your questions.

    1. Does the topmost RadListBox item get highlighted highlighted incorrectly or the problem is the scroll bar position only?

         No top most item not get highlighted, whenever I scroll down and click on any item its scrolls up.

    2. The RadListBox set as in the code you posted in your first post does not display a scroll bar. Are you setting its Height explicitly     somewhere in your code?

        No I am not setting hight for tree, I am setting height for tree container.

    3. Please post the custom CSS you are applying to your page and any relevant code that could be affecting the appearance and      behavior of the RadListBox. This would help us reproduce the issue and offer a solution.

     here is custom css class

    .tree_container
    {
    height:675px; 
    overflow:scroll; 
    }

    .NoBorder
    {
        border: none;
    }

    There are no classes defined (Full Width, RadListBox)

    Below is markup of RadListBox with container

     <div class="tree_container" style="width:auto;height:auto;overflow:hidden;">
                                    <div class="table_border">
                                        <div>
                                            
                                            <telerik:RadListBox OnClientItemChecked="OnClientItemCheckedHandler" AutoPostBack="true"
                                                OnSelectedIndexChanged="btnViewBasket_OnClick" OnClientSelectedIndexChanged="onClientSelectedIndexChangedHandler"
                                                CheckBoxes="true" CssClass="NoBorder FullWidth RADLISTBOX" ID="listBoxBaskets"
                                                runat="server">
                                             
                                            </telerik:RadListBox>
                                        </div>
                                    </div>
                                    
                                </div>

     

     

     

     

  6. Inamulhasan
    Inamulhasan avatar
    4 posts
    Member since:
    Feb 2014

    Posted 30 Jun 2015 in reply to Inamulhasan Link to this post

    Corrected Markup

     

    <div class="tree_container" >
                                    <div class="table_border">
                                        <div>
                                            
                                            <telerik:RadListBox OnClientItemChecked="OnClientItemCheckedHandler" AutoPostBack="true"
                                                OnSelectedIndexChanged="btnViewBasket_OnClick" OnClientSelectedIndexChanged="onClientSelectedIndexChangedHandler"
                                                CheckBoxes="true" CssClass="NoBorder FullWidth RADLISTBOX" ID="listBoxBaskets"
                                                runat="server">
                                             
                                            </telerik:RadListBox>
                                        </div>
                                    </div>
                                    
                                </div> 

  7. Nencho
    Admin
    Nencho avatar
    1458 posts

    Posted 03 Jul 2015 Link to this post

    Hello,

    Setting the Height property of the RadListBox should solve the issue that you are experiencing, because of the internal implementation regarding this specific scenario. However, since you are managing its Height by the container where the control is placed - you should implement some custom logic.

    I would suggest you to handle the OnClientLoad client-side event and use the scrollIntoView on the element of the selected item of the RadListBox. Please consider the below implementation:

    <script type="text/javascript">
               function OnClientLoad(sender) {
                   var selectedItem = sender.get_selectedItem();
                   if (selectedItem)
                       selectedItem.get_element().scrollIntoView();
               }
           </script>

    Regards,
    Nencho
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  8. Shona
    Shona avatar
    1 posts
    Member since:
    Nov 2016

    Posted 16 Nov in reply to Inamulhasan Link to this post

    I have a similar problem, but unlike the original poster, I DO have the issue that the topmost item gets highlighted incorrectly. Do you have any suggestions for that case (setting heights doesn't seem to help).
  9. Nencho
    Admin
    Nencho avatar
    1458 posts

    Posted 21 Nov Link to this post

    Hello Shona,

    Could you please provide your current implementation, so we could be able to observe the exact scenario that you have and reproduce the problem. Also, if you have any custom logic applied at your end, please provide it as well.

    Regards,
    Nencho
    Telerik by Progress
    Telerik UI for ASP.NET AJAX is ready for Visual Studio 2017 RC! Learn more.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017