[Solved] Scroll row/Detail template when expanded?

[jeff]

Two things; can I allow only one detail template expanded at a time AND when it's expanded, can I scroll the row/detail template to the top of the scroll area?

Thank you!

j

[Vladimir Iliev]

Hi Jeff,

You can keep only one row expanded using the grid "detailExpand" event in which to check if there are other expanded rows to collapse them - please check the example below:

• http://dojo.telerik.com/efosU/3

Also you can scroll to given row by getting it's "top" position using jQuery and passing the value to the"scrollTop" method (called from the grid "content" element).

Regards,
Vladimir Iliev
Telerik

 

 

[jeff]

Perfect, thank you very much!

[jeff]

Hi Vladimir,
Thank you, using the detailExpand event worked great; I'm still trying to use it to to scroll the containing 'tr' to the top of the container (.k-grid-content), but still no luck; any tips here?

[Vladimir Iliev]

Hi Jeff,

Could you please provide runable example with the current implementation of the "scroll to row" feature? This would help us get better overview of your current setup and advice you better how to proceed.

Regards,
Vladimir Iliev
Telerik

 

 

[jeff]

Hi Vladimir!
Finally back on this! This is what I'm trying to use to get the row to the top:

function detailInit(e) {
  var detailRow = e.detailRow;
  this.element.find(".k-grid-content").animate({
    scrollTop: this.select().offset().top
  }, 400);
}

..it's scrolling the entire page to top; what am I missing? Thank you!

[Atanas Korchev]

Hi,

We cannot reproduce this problem. Could you please update the demo we've sent you so it starts to behave as in your case?

Regards,
Atanas Korchev
Telerik

 

 

[jeff]

Hi,
Yes, the dojo for displaying only one row expanded was very helpful. However, it was a two-part question, and I haven't figured out a way to get the row displaying the expanded detail template to scroll to the top:

function detailInit(e) {  
var detailRow = e.detailRow;  
this.element.find(".k-grid-content").animate({    
scrollTop: this.select().offset().top  
}, 400);}

..it's scrolling the entire page to top; what am I missing? Thank you!

[Atanas Korchev]

Hello,

We are not sure what is missing because we don't know how to reproduce the problem. Please update the dojo so it shows the issue that you are having.

Regards,
Atanas Korchev
Telerik

 

 

[jeff]

Figured it out; it kept traversing right past the container and scrolling to the top of page, etc.., so I did this:

01.function detailInit(e) {
02.    var detailRow = e.detailRow;
03.    var scrollContentOffset = this.element.find("tbody").offset().top;
04.    var selectContentOffset = detailRow.offset().top;
05.    var distance = selectContentOffset - scrollContentOffset - 29; //the '29' is the height of the row so it is also displayed.
06.
07.    //    animate the scroll
08.    this.element.find(".k-grid-content").animate({
09.        scrollTop: distance
10.    }, 400);
11.}

Thank you!