List Box Scrolling to Top when checkbox=true

[Inamulhasan]

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>

[Inamulhasan]

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

        });

 

[Ivan Danchev]

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

[Inamulhasan]

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>

 

 

 

 

[Inamulhasan]

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> 

[Nencho]

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

[Shona]

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).

[Nencho]

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