Detail row Fade in not working

[Reid]

I have grid working with a detail row. The following code does not fade in the row:

 function detailInit(e) {
 var detailRow = e.detailRow;
 debugger;
 detailRow.find(".grid").kendoGrid({
  animation: {
   open: { effects: "fadeIn" }
  }
 });
 }

 

[Dimiter Topalov]

Hello Reid,

The Kendo UI Grid does not expose an "animation" option in its public API:

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid

You can use the detailExpand event handler to apply the animations, provided by Kendo UI (or custom ones), on the DOM element, containing the detail Grid (available via e.detailRow), e.g.:

http://dojo.telerik.com/IyAGu

FX methods used:

http://docs.telerik.com/kendo-ui/api/javascript/effects/fade

http://docs.telerik.com/kendo-ui/api/javascript/effects/common#duration

I hope this helps.

Regards,
Dimiter Topalov
Telerik by Progress

[Reid]

I implemented as mention here per your suggestion:
http://dojo.telerik.com/IyAGu

I added the "nova" css.  The result does not fade in the detail row.  Rather there is a pause but it just pops in and does not fade in.

 

Reid

[Dimiter Topalov]

Hi Reid,

The described effect happens the first time a Grid row is expanded, because the fading in of the detail Grid coincides with the loading of its data.

You can observe that the next time the row is collapsed and expanded again, the detail Grid fades in more smoothly, as it already exists and does not have to be created again. Increasing the animation duration will make the process easier for observing:

http://dojo.telerik.com/IyAGu/2

Here is a screencast of what I am observing on my end:

https://www.screencast.com/t/6daPiaDKH

Regards,
Dimiter Topalov
Telerik by Progress