This is a migrated thread and some comments may be shown as answers.

Automatically scroll to details

8 Answers 394 Views
Grid
This is a migrated thread and some comments may be shown as answers.
John Davis
Top achievements
Rank 2
John Davis asked on 07 Jun 2010, 02:40 PM
When the user expands a row, then the grid refreshes. The detail rows are not visible because they are displayed below the screen. The user must scroll down to see the details.

Instead, we want the user to see the details without having to scroll.  How?

Steve

8 Answers, 1 is accepted

Sort by
0
Radoslav
Telerik team
answered on 09 Jun 2010, 04:20 PM
Hi John,

To achieve the desired functionality you could try the following approach:
On RadGrid.ItemCommand you could check it the command name is ExpandCollapse. If it is, you could register startup script which scroll to the detail table's item:
protected void RadGrid1_ItemCommand(object source, GridCommandEventArgs e)
{
    if (e.CommandName == RadGrid.ExpandCollapseCommandName)
    {
        if (e.Item is GridDataItem)
        {
            GridDataItem item = (GridDataItem)e.Item;
            ScriptManager.RegisterStartupScript(Page, Page.GetType(), "scroll", "setTimeout(function(){ Expand('" + item.ClientID + "');}, 100);", true);
        
    }
}
<telerik:RadCodeBlock runat="server">
 
        <script type="text/javascript">
 
            function Expand(itemID)
            {
                var Grid = $find('<%=RadGrid1.ClientID %>')
                var scrollArea = Grid.GridDataDiv;
                var rowElement = document.getElementById(itemID);
                scrollArea.scrollTop = rowElement.offsetTop;
            }
        </script>
 
    </telerik:RadCodeBlock>

Additionally I am sending you a simple example which demonstrates the desired functionality.

I hope this helps.

Regards,
Radoslav
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
0
John Davis
Top achievements
Rank 2
answered on 09 Jun 2010, 05:34 PM

Thank you for sending a solution.  I added your code.
On the last line of the following script I get the error:  'null' is null or not an object

<script type="text/javascript">

    function Expand(itemID) {
        var Grid = $find('ctl00_ContentPlaceHolderMainArea_RadGrid1')
        var scrollArea = Grid.GridDataDiv;
        var rowElement = document.getElementById(itemID);
        scrollArea.scrollTop = rowElement.offsetTop;
    }
</script>


John (Steve)

0
Radoslav
Telerik team
answered on 10 Jun 2010, 01:14 PM
Hi John,

I could not reproduce the described issue. Could you please send us a small runnable project which demonstrates the problem. You could open a formal support ticket from your Telerik account and attach a ZIP file there. Thus we will be able to we debug the project and provide you with more to-the-point answer.

Greetings,
Radoslav
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
0
Stanislav Dudnyk
Top achievements
Rank 1
answered on 15 Jul 2010, 08:53 AM
I have grid with edit column, EditFormType="WebUserControl"
When press edit I need autoscroll to expanded row

How?
0
Radoslav
Telerik team
answered on 20 Jul 2010, 12:20 PM
Hi Stanislav,

By default the RadGrid auto scrolls to the edited item. I am sending you a simple example which demonstrates the RadGrid editing with EditFormType="WebUserControl" and turned on scrolling. Please check it out and let me know what differs in your case.

Best wishes,
Radoslav
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Stanislav Dudnyk
Top achievements
Rank 1
answered on 20 Jul 2010, 12:35 PM
Thanks.
I am already found solution http://www.telerik.com/community/forums/aspnet-ajax/grid/automatically-scroll-to-details.aspx
but I change
scrollArea.scrollTop = rowElement.offsetTop;

to
window.scrollTo(0, rowElement.offsetTop + 200);
0
Chris
Top achievements
Rank 2
answered on 02 Feb 2012, 07:59 PM
Is there a sample for MVC? (or would it be much different)
0
Radoslav
Telerik team
answered on 06 Feb 2012, 12:26 PM
Hello Chris,

Unfortunately we do not have the same example in MVC, however you could check out the following links:
http://www.telerik.com/community/forums/aspnet-mvc/grid/scroll-to-a-specific-row-in-the-grid.aspx
http://www.telerik.com/community/forums/aspnet-mvc.aspx

I hope this helps.

All the best,
Radoslav
the Telerik team
Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
Tags
Grid
Asked by
John Davis
Top achievements
Rank 2
Answers by
Radoslav
Telerik team
John Davis
Top achievements
Rank 2
Stanislav Dudnyk
Top achievements
Rank 1
Chris
Top achievements
Rank 2
Share this question
or