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

List Box Scrolling to Top when checkbox=true

7 Answers 98 Views
ListBox
This is a migrated thread and some comments may be shown as answers.
Inamulhasan
Top achievements
Rank 1
Inamulhasan asked on 22 Jun 2015, 02:13 PM

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>

7 Answers, 1 is accepted

Sort by
0
Inamulhasan
Top achievements
Rank 1
answered on 23 Jun 2015, 10:00 AM

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();
            

        });

 

0
Ivan Danchev
Telerik team
answered on 23 Jun 2015, 01:45 PM
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
0
Inamulhasan
Top achievements
Rank 1
answered on 30 Jun 2015, 01:04 PM

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>

 

 

 

 

0
Inamulhasan
Top achievements
Rank 1
answered on 30 Jun 2015, 01:06 PM

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> 

0
Nencho
Telerik team
answered on 03 Jul 2015, 02:09 PM
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
0
Shona
Top achievements
Rank 1
answered on 16 Nov 2016, 11:52 AM
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).
0
Nencho
Telerik team
answered on 21 Nov 2016, 08:23 AM
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.
Tags
ListBox
Asked by
Inamulhasan
Top achievements
Rank 1
Answers by
Inamulhasan
Top achievements
Rank 1
Ivan Danchev
Telerik team
Nencho
Telerik team
Shona
Top achievements
Rank 1
Share this question
or