Intersoft Community - WebGrid Enterprise - Auto Scroll Selected Row Into View On Page Load

Auto Scroll Selected Row Into View On Page Load

PRISMAY — Fri, 14 Oct 2011 09:05:49 GMT

I already knew how to set the scroll position as we do that in our custom controls. I just needed a way to do it with the grid without ALWAYS having to tinker and muck with the control for features that should already exist.

Please forward this as a feature as I shouldn't have to scroll down to the grid when a row is pre-selected when loading the grid.

Below is the solution I used which works for those that may be in the same situation we are and need help. Unfortunately I couldn't use the grid's OnPostRender client event handler because it doesn't work (I opened another thread on this issue).

function OnPostRender(controlId,rowKeyValue)
{
   var bRet = true;
   var oGrid = HaveGrid(controlId);
   if (typeof oGrid=='undefined') return bRet;

   if (typeof rowKeyValue != 'undefined' && rowKeyValue != "")
   {
      try
      {
         var oRow = oGrid.RootTable.GetRowByKeyValue(rowKeyValue);
         oRow.Select(); // not really needed as we do this on the server side
                        // but it's how you'd do it on client as well
         var oRowEl = oGrid.RootTable.GetElement(WG40.BODY, WG40.HTMLDIV);

         if (oRowEl != 'undefined') oRowEl.scrollTop = oRow.RowElement.offsetTop;
      }
      catch (e) { }
   }

   return bRet;
}

Note that the above OnPostRender is a custom client side handler that is registered and executed after the page loads. In order to work correctly, it must be run delayed via setTimeout. We use 500ms which works great.

Auto Scroll Selected Row Into View On Page Load

hendrik — Fri, 14 Oct 2011 02:35:14 GMT

Hello Yousif,

It's true that my sample can only work in postback, not full postback to load the page. But at least, I showed how to set scrollbar position by setting Scroll positiion in WebGrid element object that you tried to.

I think if you want to adjust its position, you would need to save the position before FullPostback load and load it. You might try to save it in session or hidden value. Then, send it by passing parameter and call script to set scrollbar position.

regards,

Hendrik

Auto Scroll Selected Row Into View On Page Load

PRISMAY — Thu, 13 Oct 2011 09:02:14 GMT

Thanks Hendrik. I'll give the sample a try. I did specifcially mention that we are NOT posting back so we need to accomplish this with a full page load and NOT post backs, yet your sample is using post backs. Can you clarify that your solution will work on a full page load too before I spend any time on it?

We use the scrollTop method in our custom controls to scroll selections into view and they work great, but I need to make sure we can do it on an object, like the grid, for which we don't control the code. Thanks again.

Auto Scroll Selected Row Into View On Page Load

hendrik — Thu, 13 Oct 2011 03:27:39 GMT

Hi,

To select the row and bring it into the view as you mean, you can use scrolltop property. Set the value with the last position of selected row . I enclosed one simple sample that shows how to manually configure the vertical scroll position.

Please have the attached sample tested on your end and let us know whether it helps or not.

Auto Scroll Selected Row Into View On Page Load

PRISMAY — Wed, 12 Oct 2011 19:47:20 GMT

Our customers need a feature in our grid but I can't find how to scroll into view the selected item. We can't use RestoreRowSelection because this only works on fly post backs.

In our case, the user selects a row, clicks Edit on our menu and is taken to an edit page where they can save or cancel after which they're taken back to the grid/list.

I've been able to select the row they selected when they come back by tracking the key value of the item and then setting row object's Selected property to true when I match the key value in the OnInitializeRow. However, the grid selects the row, but does NOT bring it into view.

I can't find a way to do this and need help ASAP please as we need to get this working by tomorrow. Thank you.