Fade in data bound items?

3 posts, 1 answers
  1. Don
    Don avatar
    66 posts
    Member since:
    Jun 2012

    Posted 10 Jun 2013 Link to this post

    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.
  2.
  3. Answer
    Alexander Valchev
    Admin
    Alexander Valchev avatar
    2895 posts

    Posted 12 Jun 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Don
    Don avatar
    66 posts
    Member since:
    Jun 2012

    Posted 23 Jun 2013 Link to this post

    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.
Back to Top