Jump to row in RadGrid

Question

I have a RadGrid in with all rows in EditForm mode. This Radgrid has virtual scrolling. I need to jump (scroll) to a specific row.

I've tried several options. To put a row in select is not applicable in this case. I now have tried:

RadScriptManager.RegisterStartupScript(Page, typeof(RadGrid), "myScript", "scrollItemToTop('" + e.Item.ClientID + "');", true);

in the ItemDataBound, but the :

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

does not seem to work.

Any thoughts on how to best tackle this?

Answer 1

try this Scrolling to the Selected Item

I select the item in the code behind in the databound event.

   Set one of the items in the control as selected.

Provide a handler for the client-side GridCreated event.

    In the event handler, locate the selected row using the GridTableView object's get_selectedItems() method.

    Use the RadGrid object's GridDataDiv property to access the DOM element for the scrollable region of the grid.

    Use the DOM element for the row to check if it is visible in the scrollable region. If it is not, set the scrollTop property of the scrollable region to scroll the grid so that the selected row is showing. 

The following example demonstrates this technique: CopyJavaScript

<script type="text/javascript">
function GridCreated(sender, eventArgs) {
    //gets the main table scrollArea HTLM element  
    var scrollArea = document.getElementById(sender.get_element().id + "_GridData");
    var row = sender.get_masterTableView().get_selectedItems()[0];

    //if the position of the selected row is below the viewable grid area  
    if (row) {
        if ((row.get_element().offsetTop - scrollArea.scrollTop) + row.get_element().offsetHeight + 20 > scrollArea.offsetHeight) {
            //scroll down to selected row  
            scrollArea.scrollTop = scrollArea.scrollTop + ((row.get_element().offsetTop - scrollArea.scrollTop) +
            row.get_element().offsetHeight - scrollArea.offsetHeight) + row.get_element().offsetHeight;
        }
        //if the position of the the selected row is above the viewable grid area  
        else if ((row.get_element().offsetTop - scrollArea.scrollTop) < 0) {
            //scroll the selected row to the top  
            scrollArea.scrollTop = row.get_element().offsetTop;
        }
    }
}

Notice : The function does not work on page postbacks. you should triger directly from javascript (i notice that the ongridcreated event of the grid is not fired on the Telerik example). So a better way is to handle the scrolling with JQuery like this :

1) Create a function for a specific grid

2) At the telerik code replace the sender with var sender = $find("<%= RadGrid1.ClientID%>");

3) $(window).load(function () { thefunctiontoscrollthegrid();});