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
Instead, we want the user to see the details without having to scroll. How?
Steve
8 Answers, 1 is accepted
0
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:
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.
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
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.
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?
When press edit I need autoscroll to expanded row
How?
0
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
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
to
window.scrollTo(0, rowElement.offsetTop + 200);
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
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
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 >>