Maintain scroll position with OnClientItemExpand

4 posts, 0 answers
  1. ManniAT
    ManniAT avatar
    877 posts
    Member since:
    Nov 2003

    Posted 17 Aug 2010 Link to this post

    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
  2. Peter
    Admin
    Peter avatar
    6637 posts

    Posted 20 Aug 2010 Link to this post

    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
    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 Public Issue Tracking system and vote to affect the priority of the items
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. ManniAT
    ManniAT avatar
    877 posts
    Member since:
    Nov 2003

    Posted 20 Aug 2010 Link to this post

    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
  5. Peter
    Admin
    Peter avatar
    6637 posts

    Posted 27 Aug 2010 Link to this post


    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
    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 Public Issue Tracking system and vote to affect the priority of the items
Back to Top