MVC Razor Grid - Detail Expand event Fires After the Row Expands

[Dylan]

Hello,

I have a MVC Razor Hierarchical Grid using ClientDetailTemplates for the Child Grids.  I have the DetailExpand event configured on the top level grid.  Everything works fine the first time that a Row is expanded, ie the row expands and then the DetailExpand event fires.  However if I collapse that row and then expand it a second or more times, the DetailExpand event fires first and the row will not expand until the event is finished.  This essentially makes it a DetailInit event.

I am stuck here because everything works fine the first time.  My guess is that the ClientDetailTemplates are built the first time and everything is processed in proper order, after that, the templates already exist so Kendo UI decides that it will fire the event first and then expand?  Has anyone found an easy way around this?..

If there is an example anywhere of a Razor Hierarchical grid with Child Tempates and the DetailExpand event? 

Thanks in advance.

[Vladimir Iliev]

Hi Dylian,

 
Could you please share more details on what exactly you are trying to achieve and your current Grid setup - that way we will be able to provide you with the best possible solution for your scenario. Also please note that the DetailExpand event is intended to fire every time before the detail row is expanded and the DetailInit event is fired only on detail row initialization.

Kind Regards,
Vladimir Iliev
the Telerik team

[Dylan]

Hello Vladimir,

Thank you for your reply.  What I am trying to do is scroll the selected row in my hierarchical grid to the top of the virtual scroll window by using .scrollTop().  I added code to the DetailExpand event that calculates the position for the scrollTop and everything works fine the very first time the row is expanded because the row actually expands first before the event is fired and the calculation for position is valid.  After the first time, the row expands after the event fires so my calculation are messed up.

To answer your question directly, what I am trying to do is move the selected row to the top of the view window.  The grid is a kendo mvc razor hierarchical grid and everything works fine except for this.  If there is some other way to accomplish this besides using scrollTop and if you have any examples, that would be great!

Thanks

[Vladimir Iliev]

Hi Dylan,

 
You approach to scroll the row to the top of the virtual scrolling window looks valid, however to be able to calculate correctly the position in current scenario you should use the DetailExpand event and execute the calculation function using the SetTimeout JavaScript method.

Kind Regards,
Vladimir Iliev
the Telerik team

[TroyR]

I realize that this is very late, but may be quite useful for others, still.  This is how I accomplished this:
(I'm using C# ASP.NET MVC)
(This assumes that you wish to only expand one detailed row at a time)

At the bottom of my grid configuration, I declare the event-handler function(s) like so,

.Events(events => events.DetailExpand("onDetailExpand").DetailCollapse("nameYourFunctionHere"))

Then I set up a function for that event ("onDetailExpand") and use the following code: 

function onDetailExpand(e)
{
       // AUTO-SCROLL THE EXPANDED ROW TO THE TOP OF THE GRID

       // the ".k-i-collapse" class is for the icon of the newly expanded row (in my version).
       var expandedRow = $(".k-i-collapse").closest("tr");
       var container = $(".k-grid-content");
       container.animate({
              scrollTop: expandedRow.offset().top - container.offset().top + container.scrollTop()
       });
}

I hope this helps others!