Radgrid jump to page and scroll to top

I spent way too much time finding a resolution to this issue, but I finally found an ugly way to do it so hopefully this helps someone else.

I’m doing a simple data load with a RadGrid from an SQLDataSource. However due to the nature of the page and data the initial grid is populated with over 1000 records and performance is terrible.

I want to use the Filters within each RadGrid column as my ‘Search Parameters’ rather than building it manually and passing them in to the SELECT statement.

I tried to set the DataSourceID to empty in the NeedDataSource event however I ran into a few obscure issues.

I attached a picture of my issue to this post. As you can see from the image, when I move the row from the top grid to the bottom of the page, the top grid scrolls all the way to the bottom. I would like to freeze the scrolling of that grid as I drag items from it.

Please Help

When the Kendo UI Grid is configured to have endless scrolling and an item is updated on the first page, the scrollbar is reset. If an update is done on a page after the first one, the scroll is correctly persisted.

Reproduction of the problem

1. Set a grid with an endless scroll.
2. Scroll down [without entering the second page].
3. Update an item on the first page.
4. The scroll is reset.

Dojo sample for reference:

//dojo.telerik.com/EcUKIrAK

Environment

• Kendo UI version: 2021.1.330
• jQuery version: 1.12.4
• Browser: [all]

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

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 :

If you have an initially selected item [row] in a scrollable grid, you may want to bring the focus to this item when the page first loads. The following steps describe how to accomplish this:

1. Set one of the items in the control as selected. [The following example selects a row in the same function that moves to the selected row. However, after that, it shows how to move to the selected row even if it were selected in some other way].
2. Provide a handler for the client-side GridCreated event.
   1. In the event handler, locate the selected row using the GridTableView object's get_selectedItems[] method.
   2. Use the RadGrid object's GridDataDiv property to access the DOM element for the scrollable region of the grid.
   3. 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. You may also need to execute the code with a small timeout.

The following example demonstrates this technique:

    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
        setTimeout[function [] {
            scrollArea.scrollTop = scrollArea.scrollTop + [[row.get_element[].offsetTop - scrollArea.scrollTop] +
            row.get_element[].offsetHeight - scrollArea.offsetHeight] + row.get_element[].offsetHeight;
        }, 1000];
        }
        //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;
        }
    }
    }

protected void RadGrid1_PreRender[object sender, EventArgs e]
{
     RadGrid1.MasterTableView.Items[7].Selected = true;
}

Protected Sub RadGrid1_PreRender[ByVal sender As Object, ByVal e As EventArgs]
    RadGrid1.MasterTableView.Items[7].Selected = True
End Sub

How do I enable scrolling in Radgrid?

You can enable scrolling by setting the ClientSettings. Scrolling. AllowScroll property to True [By default its value is False.]

How do I add a horizontal scrollbar in Telerik Radgrid?

In order to enable horizontal and/or vertical scrollbars you need to set the ScrollViewer's attached properties HorizontalScrollBarVisibility and/or VerticalScrollBarVisibility..

Example 1: Set Attached ScrollViewer Properties..

Example 1: Set Attached ScrollViewer Properties..