Fade in data bound items?

[Don]

I've spent a lot of time trying to get items that are added to a ListView or "source" bound element (i.e. <div data-bind="source: myData"></div>) to fade in using FX Fade (http://docs.kendoui.com/api/framework/fx/fade) instead of just appearing abruptly.  Unfortunately, I have been unsuccessful.  Can you explain how to do it in *both* cases (i.e. when using a ListView and when using source binding)?

Here is as far as I got when trying it with a ListView:

var myData = [];

$('#MyListView').kendoListView({
  dataSource: myData,
  template: myTemplate,
  dataBinding: function (e) {
    for (var i = 0; i < e.items.length; i++) {
      kendo.fx($('div[data-uid="' + e.items[i].uid + '"]')).fade('in').play();  // THIS DOES NOT WORK.
    }
  }
});

myData.push('Test data item');  // SHOWS UP IN THE DIV, BUT DOES NOT FADE IN.

Your help would be greatly appreciated.  Thanks.

[Alexander Valchev]

Hi Don,

I am afraid that what you would like to achieve is not supported out of the box because when the ListView DataSource changes all the items will be re-rendered.

One possible workaround for this case it to listen for the change event of the DataSource (or Observable Array) and if an item was added to fadeIn only the last item.

For your convenience I prepared a small sample: http://jsbin.com/okeyiz/2/edit
I hope this will help.

Regards,
Alexander Valchev
Telerik

[Don]

Your method seems to work in Kendo UI Web, so thanks for that.  I'm going to mark this as answered.

However, my project runs on both Web and Mobile (via Icenium/Kendo UI Mobile).  Just FYI, your method does not work with Kendo UI Mobile because of an apparent bug with KendoMobileListView.  For the KendoMobileListView, the DataBound even does not fire.  I am unable to report this bug on the Kendo UI Mobile Premium Forums because I do not have a license for Kendo UI Mobile (since I use Icenium, there was no reason for me to purchase a separate Kendo UI Mobile license.  It might make sense if you guys give Icenium subscribers access to the Kendo UI Mobile Premium Forums).  I did, however, report this to Icenium, though it really seems to be a Kendo UI Mobile bug.  The linked bug report also mentions how you can view a working example of this bug in Icenium.