Scrolling web page to opened row in RadGrid

[Sophie]

Hello, i have been searching a while about this issue. I'm trying to scroll my page when i expand a row in my RadGrid (I don't want to scroll the Grid). I want the newly opened row to appear on the top of the web page.
I have HierarchyExpanded, but this triggers when i click on the row, not when the data is flully loaded.
I'm currently working on it but i am not an expert in javascript so i can't get this to work.
I already looked at http://www.telerik.com/help/aspnet-ajax/grid-scroll-to-selected-item.html but doesn't seem to work.
(My grid allow multiple selection, so i need to keep a reference to the last opened row.)
Anything i could do? Tips? Thanks.

[Sophie]

Ok I managed to do something. Not working completly. I still need help on this one.
I register a script on page load, and call it when the grid is hierarchyExpanded(). This works really well.
WHat happens after, the row loads (takes about 2 seconds to DB) then the page comes back to the top of the page. But without this window.scrollTo, my page was not scrolling at all, but now it does when it's not suposed to.
(WHat I do in my javascript, i get the mouse position, and add the scroll length on y axis.):

var top = event.clientY + document.documentElement.scrollTop;
window.scrollTo(0, top);

Any ideas on this?

[Eyup]

Hi Sophie,

You have several options to prevent the grid to lose focus when a row is expanded:

• Ajaxify the grid:

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="RadGrid1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>

• Enable the following property:

<%@ Page ... MaintainScrollPositionOnPostback="true" %>

• Modify the window's scroll position after the postback:

protected void RadGrid1_ItemCommand(object sender, GridCommandEventArgs e)
{
    if (e.CommandName == RadGrid.ExpandCollapseCommandName)
    {
        if (!e.Item.Expanded)
        {
            ScriptManager.RegisterStartupScript(Page, typeof(RadGrid), "myScript", "scrollItemToTop('" + e.Item.ClientID + "');", true);
        }
    }
}

JavaScript:

function scrollItemToTop(itemID) {
    window.scrollTo(0, $telerik.$($get(itemID)).offset().top);
}

That should do the trick. Please give it a try and let me know if it works for you.
Kind regards,
Eyup
the Telerik team

[Sophie]

Hey Eyup,
Thanks for your reply.
Unfortunatly i already passed 2 days on this issue XD But i'm definitly writing this down to try it as soon as i have more time or if my boss doesn't like my code hehe. But it should work fine with your code. I'll come back and confirm if that's the case :)
Thanks again!
Sophie

[Sophie]

Hey Eyup,
I had time this afternoon. This is really weird, i can't get the ItemCommand function to trigger...

Private Sub MyRadGrid_ItemCommand(ByVal sender As Object, ByVal e As Telerik.Web.UI.GridCommandEventArgs) Handles MyRadGrid.ItemCommand
  'Breakpoint on this first If doesn't even come here
  If e.CommandName Is RadGrid.ExpandCollapseCommandName Then
    If Not e.Item.Expanded Then
                        ....
    End If
  End If
End Sub

Plus, when I click on the row to expand it, It loads (loading message over it) then close back... And if i click again (another or the same), i get a "Microsoft JScript runtime error: 'undefined' is null or not an object" in my javascript here:

function MyRadGrid_HierarchyExpanded(sender, args) {

  var myUserControl = args.get_item().MyRadTabStripControl;

  //Here, myUserControl is null


  ...

}

I just remembered something... i think the programmer who created this page prevented the postback for optimization issues (Can't verify that, the guy left). And I have:

<telerik:RadGrid ...>
  <ClientSettings>
    <ClientEvents OnHierarchyExpanded="MyRadGrid_HierarchyExpanded" ... />
  </ClientSettings>
  <MasterTableView ... HierarchyLoadMode="Client" ...>
  ...
  </MasterTableView>
<telerik:RadGrid>

Could this be related?

[Sophie]

Ok i did it!
Here's the code if anyone is interested.
In my Radgrid there's a RadStrip. So on the client load function, i added this:

function myRadStrip_ClientLoad(sender, args){
  var tabStrip = $("#" + sender.get_id());
  if(tabStrip != undefined && tabStrip.offset() != undefined){
    var positionY = tabStrip.offset().top - 40;
    $('html, body').animate( {scrollTop: positionY }, 500);
  }
}

and if the row is already loaded, ClientLoad won't trigger, so, i use this in the Hierarchy expanded function:

function MyRadGrid_HierarchyExpanded(sender, args){
  var tabStrip = args.get_item().myCustomUserControl;
  if(tabStrip.get_isLoaded()) {
    var positionY = (event.clientY + document.documentElement.scrollTop) - 15;
    $('html, body').animate( {scrollTop: positionY }, 500);
  }
}

Works on loading and when the row is loaded. It works, i don't touch this code anymore. eheh Thanks for the help!
Sophie