[Solved] Scroll expanded child table into view

[Polaris431]

I have HierarchyLoadMode set to ServerBind. When there are many rows in the grid and a vertical scrollbar is shown to allow the user to scroll the rows, if the user expands a row that is near the buttom of the viewable area of the grid, the child grid will be created and expand but the user is required to scroll to see the child rows. Is there a way I can intercept the expand event on the client-side, access the row that was expanded and scroll it to the top of the viewable area? I have to set HierarchyLoadMode to ServerBind due to the large number of records that need to get displayed.

[Shinu]

Hi,

You may intercept the Expand event on client side and access the expanded row as shown below.

ASPX:

<ClientEvents  OnHierarchyExpanding="OnHierarchyExpanding" OnRowCreated="OnRowCreated" />

JS:

function OnHierarchyExpanding(sender, eventArgs)
 {
  var row=eventArgs.get_gridDataItem();
 }

Refer the following help article which explains how to scroll to the selected item. You may alter the logic accordingly.
Scrolling to the selected item

Thanks
Shinu.

[Polaris431]

I was aware of the solution you presented. However, the OnHierarchyExpanding event is only valid for HierarchyLoadMode set to client-side loading. I need a way to intercept the expanding when HierarchyLoadMode is set to ServerBind mode.

[Princy]

Hi Polaris,

Try adding the client OnClick event to the ExpandCollapse button in the code behind and then set the scroll position as shown below.

CS:

 protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
    {
        if (e.Item is GridDataItem)
        {
            GridDataItem item = (GridDataItem)e.Item;
            item["ExpandColumn"].Attributes.Add("OnClick","Expand('"+item.ClientID+"');");
        }
  }

 

JS:

<script type="text/javascript" >

function Expand(itemID)
{
var Grid=$find('<%=RadGrid1.ClientID %>')
var scrollArea = Grid.GridDataDiv;


 var rowElement =document.getElementById(itemID);
 alert(rowElement)
  //check if the selected row is below the viewable grid area
   if((rowElement.offsetTop - scrollArea.scrollTop) +
       rowElement.offsetHeight + 20 > scrollArea.offsetHeight)
   {

      //scroll down to selected row
      scrollArea.scrollTop = scrollArea.scrollTop +
        (rowElement.offsetTop - scrollArea.scrollTop) +
        (rowElement.offsetHeight - scrollArea.offsetHeight) +
        rowElement.offsetHeight;
   }
   //chck if the selected row is above the viewable grid area
   else if((rowElement.offsetTop - scrollArea.scrollTop) < 0)
   {
      //scroll the selected row to the top
      scrollArea.scrollTop = rowElement.offsetTop;

   }


}

</script>

Regards
Princy.

[Michael Love]

Hi there.

I have a similar problem. My HierarchyLoadMode is set to ServerOnDemand mode and I have purposefully removed the expand/collapse column so that whenever a user selects the row, the details expand. So, right now, inside of my grid's ItemCommand method, I expand/collapse when the command is "RowClick". With that situation, can I call the "Expand" client function from within my ItemCommand handler? If so, how?

Thanks, Mike

[Princy]

Hello Mike,

You can try out the following code to invoke the client function from the ItemCommand event side event:
c#:

 protected void RadGrid1_ItemCommand(object source, GridCommandEventArgs e)
    {
        if (e.CommandName == "RowClick")
        {
            GridDataItem item = (GridDataItem)e.Item;
            Page.ClientScript.RegisterStartupScript(GetType(), "key", "<script type='text/javascript'>Expand('" + item.ClientID + "');</script>", false);

       }
    }

Thanks
Princy.