Scrolling to the Selected Item

[Brian]

Hello,

I am trying to implement the Telerik sample Scrolling to the Selected Item. I modifed my ASP.NET page based on this sample. Within the sample, function GridCreated() has the following (second command-line within the function):

    var row = this.MasterTableView.SelectedRows[0];

When my ASP.NET page calls function GridCreated(), it fails on the second command-line, and throws the following error:

    Microsoft JScript runtime error:
    Unable to get value of property 'SelectedRows':
    Object is null or undefined.

The RadGrid on my page has AllowPaging="false" and AllowScroll="true". The grid contains 100 rows, but only 20 rows are visible at any given time. You have to scroll up or down to see the other 80 rows. This is exactly how I want the grid to behave. And every row in the grid is assigned a unique number (numbers from 1 to 100). There is a textbox above the grid and when a row number between 1 and 100 is entered into the textbox, the Textbox_TextChanged() programmatically locates the row within the grid, and automatically highlights (selects) that row (that all works fine).

If you are viewing rows 1 - 20 at the time you enter 85 into the textbox, row 85 is programmatically selected, but you have to manually scroll down to see highlighted row 85. This is why I am trying to use the above sample (http://www.telerik.com/help/aspnet/grid/grdscrolltotheselecteditem.html). I do not want to filter the grid. I want the grid to automatically scroll to the row that was programmatically selected. How do I resolve the above error? Do I need to provide more info?

Thank you,
Steven

[Vasil]

Hello Steven,

You are following the old help documentation for the classic ASP RadControls and because of this it is not working as expected.
Please check this help topic about the same functionality for RadGrid for ASP.NET AJAX:
http://www.telerik.com/help/aspnet-ajax/grid-scroll-to-selected-item.html

Kind regards,
Vasil
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Mihail]

I tried to apply this [ RadControls for ASP.NET AJAX Documentation: Scrolling to the Selected Item. Article: http://www.telerik.com/help/aspnet-ajax/grid-scroll-to-selected-item.html ], but it doesn't work.
I have two grids on the page. While the row in the second grid is properly selected based on the row clicked (selected) in the first grid, the actual scrolling to that row in the second grid doesn't work.
I tried this in IE6, IE8 and latest Firefox.
Is there a working example/demo available (not just article)?

[Vasil]

Hello Mihail,

In  the example the code is attached on grid's created event. As opposite of that you need to attach it on ItemSelected, if you want to scroll after newly selected item. Or to call the code just after selecting an item.

Regards,
Vasil
the Telerik team

[Mihail]

Thank you Vasil. I was able to make it work.

[Bonifacio]

Hi vasil,

I have an issue with the scroll to selected item in a runtime defined columns radgrid, I have applied the steps in the documentation explained in the following link, http://www.telerik.com/help/aspnet-ajax/grid-scroll-to-selected-item.html.

This works fine for Firefox, but not for IE8, in the case of my company the IE8 is the standard browser...

My client settings are...

   <ClientSettings EnableRowHoverStyle="true" EnablePostBackOnRowClick="true">
            <Selecting CellSelectionMode="None" AllowRowSelect="True"></Selecting>
            <Scrolling AllowScroll="True" UseStaticHeaders="True" SaveScrollPosition="true" ScrollHeight="100%"  />
            <ClientEvents  OnGridCreated="GridCreated" />
            <Selecting AllowRowSelect="true" />
            </ClientSettings>
        <MasterTableView EnableViewState="False" AllowSorting="False">


I hope you could help!

Note.

I'm not using view state 'coz I'm firying, events in controls placed in itemtemplate columns, and I have a ajax panel behind.


regards!

[Vasil]

Hello Bonifacio,

When EnablePostBackOnRowClick="true" , clicking on the grid makes post-back before the row gets selected. In our case you may want to perform Ajax on row selected client event. Check this code library for example:
http://www.telerik.com/community/code-library/aspnet-ajax/grid/select-row-with-ajaxrequest-and-automatically-scroll-to-detailsview.aspx
This one could be also in help:
http://www.telerik.com/community/code-library/aspnet-ajax/grid/save-radgrid-scroll-position-when-leaving-page.aspx

All the best,
Vasil
the Telerik team