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

Detail row Fade in not working

3 Answers 71 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Reid
Top achievements
Rank 2
Reid asked on 23 Jan 2017, 09:36 AM

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" }
  }
 });
 }

 

3 Answers, 1 is accepted

Sort by
0
Dimiter Topalov
Telerik team
answered on 25 Jan 2017, 09:04 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Reid
Top achievements
Rank 2
answered on 04 Feb 2017, 03:12 PM

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

0
Dimiter Topalov
Telerik team
answered on 07 Feb 2017, 04:07 PM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Grid
Asked by
Reid
Top achievements
Rank 2
Answers by
Dimiter Topalov
Telerik team
Reid
Top achievements
Rank 2
Share this question
or