Scrollbar Postion in PanelBar ItemTemplate

[Rob]

I have a PanelBar control on the master page for navigation.  The PanelBar has 2 root items.  Both root items each have 1 child item.  Both child items contain 1 TreeView control each.  The PanelBar's ExpandMode="FullExpandedItem".

Here's my situation.  Let's say a user selects one of the PanelBar's root items.  The associated TreeView control will get populated with completely collapsed nodes and only one of the PanelBar's root items is visible at a time.  When the TreeView gets expanded enough that it's height is greater than the height of the PanelBar, a scrollbar will appear on the righthand side of the control and the user can scroll all the way down to see the bottommost nodes of the TreeView.  When the user expands another treenode, the scrollbar shoots up to the top of the PanelBar in it's original position.

What I want to be able to accomplish is to capture the position of the scrollbar after it has been moved and then set that same position on the reload of the page after the postback such as expanding a treenode.

How can I accomplish this?

I've had success with just a DIV tag and the TreeView, but I'm stumped how to accomplish this functionality with the PanelBar control. 

[Rob]

OK, I put a <div> tag in the <ItemTemplate> tag around my treeview and set the height just a little bit less than template area so that the <div> tag's scrollbar kicks in before the PanelBar's does.  This is good.  I'm also capturing the scrollbar position when it changes.  The problem now is when I go to set the scrollbar coords in the JavaScript onLoad() event after a postback, I can't get a reference to the <div> tag even though it is visible.  I'm guessing that I'm in the wrong event.  Please help!

[Rob]

I forgot to mention, here is my code that is failing onLoad():

          var panelBar = $find('ctl100_pbOrderReview');
            if(panelBar != null) {
                var item = panelBar.get_selectedItem();
                if(item.get_index() == 0) {
                    alert(0);
                } else {
                    alert(1);
                }
            }

By default, the first PanelItem has Selected="True", but when this code is executed onLoad() the "item" variable is null.  That's my real problem.  When I execute the same code in any other event after the page is loaded, it seems to work just fine.  Please explain.  I'm new to AJAX and RadControls.

[Paul]

Hi Rob,

The var panelBar = $find('ctl100_pbOrderReview'); code is correct (although it would be better if you use var panelBar = $find('<%= pbOrderReview.ClientID %>'); ), but if placed directly on the page, it results in null. This happens, because of the specifics of the ASP.NET AJAX convention - controls are created in a special page event, named init. The easiest way to add some code to be executed in the very beginning is to move it to the body of a pageLoad function - this is a shortcut handler for the Sys.Application.add_load event.

Greetings,
Paul
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Rob]

Hi Paul,

Thanks for responding.

I changed my code per your suggestion to the following:

function pageLoad(sender, args) {
    var panelBar = $find('<%=pbOrderReview.ClientID %>');
    if(panelBar != null) {
        var item = panelBar.get_selectedItem();
        if(item.get_index() == 0) {
            alert(0);
        } else {
            alert(1);
        }
    }
}

Before the code change, just the selectedItem() was returning null.  Now the panelBar is returning null.  I tried both the shortcut and the .add_load() and get the same results. 

I guess for starters, I would like to determine which root panel item is selected when the page loads.  Seems like it shouldn't be this difficult.  If the page is already loaded and a JavaScript event happens (no postback) the same code works flawlessly.  I guess I don't know enough about the AJAX client side life cycle yet, so this is where I need some help.  Next, I need to execute the same code when returning from a postback.  Here is my markup:

<telerik:RadPanelBar ID="pbOrderReview" runat="server" Skin="Web20" BackColor="LightSteelBlue" OnClientLoad="storePanelBarClientObject" OnClientItemClicked="OnClientItemClicked" ExpandMode="FullExpandedItem" Height="480px">
    <CollapseAnimation Duration="100" Type="None" />
    <Items>
        <telerik:RadPanelItem runat="server" Text="Replenish By Store" Selected="True">
            <Items>
                <telerik:RadPanelItem runat="server">
                    <ItemTemplate>
                        <div id="DivTreeViewRepl" runat="server" class="divtreeview_H415_W250" onscroll="SetDivPosition()">
                            <asp:TreeView ID="tvReplenishment" runat="server" SkinID="TreeViewNavigation" OnTreeNodeExpanded="tvReplenishment_TreeNodeExpanded"></asp:TreeView>
                        </div>
                    </ItemTemplate>
                </telerik:RadPanelItem>
            </Items>
        </telerik:RadPanelItem>
        <telerik:RadPanelItem runat="server" Text="Order Review">
            <Items>
                <telerik:RadPanelItem runat="server">
                    <ItemTemplate>
                        <div id="DivTreeViewOR" runat="server" class="divtreeview_H415_W250" onscroll="SetDivPosition()">
                            <asp:TreeView ID="tvOrderReview" runat="server" SkinID="TreeViewNavigation"></asp:TreeView>
                        </div>
                    </ItemTemplate>
                </telerik:RadPanelItem>
            </Items>
        </telerik:RadPanelItem>
    </Items>
    <ExpandAnimation Duration="100" Type="None" />
</telerik:RadPanelBar>

[Peter]

Hello Rob,

Your code is correct. Please, test our sample page which shows that it works as expected. What is different with your case?


All the best,
Peter
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Rob]

Peter,

Thanks for sending your code.  I did get it to work your way and now the difference between the way you have the code working and my code is painfully obvious.

You put a script block with my code directly underneath the ScriptManager in the HTML code.  I didn't mention that I'm emitting my JavaScript code via ClientScriptManager.RegisterClientScriptBlock(), so my code appears above the ScriptManager when viewing the source from IE.

I even tried this and got the same unsuccessful results:

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
    <Scripts>
        <asp:ScriptReference Path="Includes/AJAXInit.js" />
    </Scripts>
</telerik:RadScriptManager>

I am using a master page and a content page and all of my JavaScript is in a class explicitly for emitting from the CSM, so I ask you, "How do I emit my JS using the CSM and get it to appear below the ScriptManager in the HTML?"

[Rob]

OK, I answered my own question.  The answer is:

ClientScriptManager.RegisterStartupScript()

for that function only to get it to work on page load.  Now I just need to get the same function to execute on normal postbacks like when a tree node gets expanded.

[Rob]

Without changing any of my code from the previous post, it works on normal postbacks too.

Thanks for all the help!