Maintain scroll position with OnClientItemExpand

[ManniAT]

Hi,

it's very easy to make a list of items scrollable - and it works like a charm.
Except one thing - the scroll position.

Assume the users scrolls down and selects an item.
Then he expands another group (SingleSelect mode is set).
Later he expands the previously selected group.
He sees the items list - but the selected one is "somewhere".

The same problem happens with data binding.
Assume a serverside selected item - way down in the scroll area.

So what the user gets is a "where is the item" situation.

My first thought was to use the "OnClientItemExpand" event.
The documentation says:
OnClientItemExpand occurs immediately after an item is expanded

But "after" is not really after as it looks.
My first approach was this:

Snippet created with CBEnhancer
function OnExpand(sender, args) {
    var iTem = args.get_item();
    if (iTem.get_level() != 0) {
        return;    //only interest in top level items
    }
    var items = iTem.get_items();
    for (var i = 0; i < items.get_count(); i++) {
        if (items.getItem(i).get_selected()) {
            items.getItem(i).focus();
            return;
        }
    }
}

This results in a stack overflow - it seems setting the focus calls OnExpand again.
Not really a problem - I locked the function like this:

Snippet created with CBEnhancer
var didFocus = false;
function OnExpand(sender, args) {
    if (didFocus) {
        return;
    }
    var iTem = args.get_item();
    if (iTem.get_level() != 0) {
        return;    //only interest in top level items
    }
    var items = iTem.get_items();
    for (var i = 0; i < items.get_count(); i++) {
        if (items.getItem(i).get_selected()) {
            didFocus = true;
            items.getItem(i).focus();
            didFocus = false;
            return;
        }
    }
}

No more stack overflow - but an error message that an invisible item can't get the focus.
This makes me think the event fires not "after" it is expanded.
My final approach is:

Snippet created with CBEnhancer
var curSelItem;
function DoFocus() {
    curSelItem.focus();
}
function OnExpand(sender, args) {
    var iTem = args.get_item();
    if (iTem.get_level() != 0) {
        return;
    }
    var items = iTem.get_items();
    for (var i = 0; i < items.get_count(); i++) {
        if (items.getItem(i).get_selected()) {
            curSelItem = items.getItem(i);
            setTimeout("DoFocus()", 500);
            return;
        }
    }
}

This works - but I'm not really happy with that approach.
Assume somebody decides to use a longer animation duration or something like this.

If I set "ExpandDelay" to (let's say) 500 - my workaround does no long work.
OnClientItemExpand fires as soon as I click the expand arrow - and not (as documented) "immediately after an item is expanded".

My Question - is there a better approach to solve this problem?
Or did I miss something in the documentation?

Manfred

[Peter]

Hello Manfred,

I am not sure what exactly the problem is. Here is a video capture of the behavior that I can observe and the scroll position is maintained - http://screencast.com/t/Nzc3YTVhZ.

Please, let me know if I am missing something.


Regards,
Peter
the Telerik team

[ManniAT]

Hi Peter,

what you showed me is exactly what I tried to achive.
But for me this looks quite different.
In the attached video I start with a loaded page.
After some seconds the mouse moves up and the content flickers.
That's when I hit reload.
First problem - the element is not visible!

Later I play around with the bits a bit - and you'll notice the "not maintained scroll position".

This was done on Windos 7 Ultimate 64 bit German, VS2010, AJAX Controls Q2 2010 using IE 8.
OK, I see I can't upload a zip - so find it at:
http://manniat.pp-p.net/PBarProblem.wmv

Here is the markup for the page:

Snippet created with CBEnhancer
<%@ Page Title="About Us" Language="C#" MasterPageFile="~/KBSM.master" AutoEventWireup="true" CodeBehind="About.aspx.cs" Inherits="KBSM.About" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="AJPMContent" runat="server" ContentPlaceHolderID="AjaxProxyHolder">
    <telerik:RadAjaxManagerProxy ID="ramProxy" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="lbGroups">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="lbGroups" UpdatePanelHeight="" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManagerProxy>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="LeftContent" runat="server">
    Left here
    <telerik:RadPanelBar ID="rpLeft" runat="server" Width="150">
        <Items>
            <telerik:RadPanelItem runat="server" Text="Root1" ChildGroupHeight="120" Expanded="true">
                <Items>
                    <telerik:RadPanelItem runat="server" Text="Child 1_1">
                    </telerik:RadPanelItem>
                    <telerik:RadPanelItem runat="server" Text="Child 1_2">
                    </telerik:RadPanelItem>
                    <telerik:RadPanelItem runat="server" Text="Child 1_3">
                    </telerik:RadPanelItem>
                    <telerik:RadPanelItem runat="server" Text="Child 1_4">
                    </telerik:RadPanelItem>
                    <telerik:RadPanelItem runat="server" Text="Child 1_5">
                    </telerik:RadPanelItem>
                    <telerik:RadPanelItem runat="server" Text="Child 1_6">
                    </telerik:RadPanelItem>
                    <telerik:RadPanelItem runat="server" Text="Child 1_7">
                    </telerik:RadPanelItem>
                    <telerik:RadPanelItem runat="server" Text="Child 1_8" Selected="true">
                    </telerik:RadPanelItem>
                </Items>
            </telerik:RadPanelItem>
            <telerik:RadPanelItem runat="server" Text="Root Zwei">
                <Items>
                    <telerik:RadPanelItem runat="server" Text="Child 2_1">
                    </telerik:RadPanelItem>
                    <telerik:RadPanelItem runat="server" Text="Child 2_2">
                    </telerik:RadPanelItem>
                </Items>
            </telerik:RadPanelItem>
            <telerik:RadPanelItem runat="server" Text="Root ZweiA">
                <Items>
                    <telerik:RadPanelItem runat="server" Text="Child 2A_1">
                    </telerik:RadPanelItem>
                    <telerik:RadPanelItem runat="server" Text="Child 2A_2">
                    </telerik:RadPanelItem>
                </Items>
            </telerik:RadPanelItem>
            <telerik:RadPanelItem runat="server" Text="Root Drei">
                <Items>
                    <telerik:RadPanelItem runat="server" Text="Child 3_1">
                    </telerik:RadPanelItem>
                    <telerik:RadPanelItem runat="server" Text="Child 3_2">
                    </telerik:RadPanelItem>
                    <telerik:RadPanelItem runat="server" Text="Child 3_1">
                    </telerik:RadPanelItem>
                </Items>
            </telerik:RadPanelItem>
        </Items>
    </telerik:RadPanelBar>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <h2>
        About
    </h2>
    <p>
        Put content here.
    </p>
</asp:Content>

Regards
Manfred

[Peter]

We still cannot replicate the problem shown in the presentation you sent us using your code. Can you open a support ticket and send us a simple working demo (please, include your master page as well).


Best wishes,
Peter
the Telerik team