Removing the animation

22 posts, 0 answers
  1. Steve
    Steve avatar
    1851 posts
    Member since:
    Dec 2008

    Posted 01 Apr 2012 Link to this post

    Can I somehow kill the fade animation on the listview?  I don't see anything in the documentation on it....
  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2594 posts

    Posted 02 Apr 2012 Link to this post

    Hi Steve,

    I am not quite sure if I understand your question because by design Kendo UI ListView does not support any type of animation. Could you please give more details about your scenario?


    Greetings,
    Iliana Nikolova
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Steve
    Steve avatar
    1851 posts
    Member since:
    Dec 2008

    Posted 02 Apr 2012 Link to this post

    Hmm you know what, I might just have assumed that from clicking onto the listview demos page it faded in which is what I seem to be experiencing.

    Ok, so knowing that, heres what I have on my page
    - 1 combobox (functioning as remote bound autocomplete)
    - 2 dropdown (don't have a ds until the combo item is selected)
    - 2 listview (load on $document.ready)

    Ok so when the page loads the entire screen is a transparent white, and I see the "k-loading-image" in the middle of the page...then it disappears and the page is ready...sometimes happens so fast its hard to see the loading icon....but I don't NEED this loading icon functionality...I just don't know how to turn it off :)

    Steve
  5. Steve
    Steve avatar
    1851 posts
    Member since:
    Dec 2008

    Posted 02 Apr 2012 Link to this post

    Here, have a look...I have to keep hitting refresh, but it's visible at about 3 seconds in

    http://screencast.com/t/7MW9uRCj3ZS

  6. Steve
    Steve avatar
    1851 posts
    Member since:
    Dec 2008

    Posted 02 Apr 2012 Link to this post

    Actually here's another one...app pool was recycling when it loaded so you can see as the kendo DS objects are querying the services for the json I have a white screen with a loading icon...


    http://screencast.com/t/kLEbybJw31QG
  7. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2594 posts

    Posted 04 Apr 2012 Link to this post

    Hi Steve,

    In order to remove the loading icon functionality from your application you should hook to the request start of the dataSource and then to call kendo.ui.progress(element, false)

    I hope this helps.

    Greetings,
    Iliana Nikolova
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  8. Steve
    Steve avatar
    1851 posts
    Member since:
    Dec 2008

    Posted 05 Apr 2012 Link to this post

    Ok, I'll try....any plans to fix that?

    I mean it's crazy annoying, I can't imagine why anyone would want their entire page to glaze over white everytime the DS talks back?
  9. Steve
    Steve avatar
    1851 posts
    Member since:
    Dec 2008

    Posted 05 Apr 2012 Link to this post

    I can't get this to work, what am I doing wrong?

    var dataSource = new kendo.data.DataSource({
        transport: {
            read: {
                url: _webservicePath + "/GetMyFoods",
                type: "POST",
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                data: {
                    userid: getCurrentUserID(),
                    sortOrder: getSortOrder()
                }
            },
            parameterMap: function (options) {
                return kendo.stringify(options); // kendo.stringify serializes to JSON string
            }
        },
        schema: {
            data: "d"
        },
        change: function (e) {
            //alert("changed");
        }
    });
     
    $("#myfoods-list").kendoListView({
        dataSource: dataSource,
        template: myFoodsTemplate
    });
    kendo.ui.progress($("#myfoods-list"), false)
  10. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2594 posts

    Posted 06 Apr 2012 Link to this post

    Hello Steve,

    Regarding your question - "any plans to fix that" - actually, the loading image in Kendo UI ListView is not a bug, this is by design and it is over the ListView element only, not over the entire page.

    To your last post - I examined your code snippet and I observe that you call kendo.ui.progress(element,false) after your ListView is rendered. In order to remove the loading image you need to call the above mentioned function before the data is loaded. For example: 
    var dataSource = new kendo.data.DataSource({
      transport: {
          ...
          },
          parameterMap: function (options) {
          kendo.ui.progress($("#myfoods-list"), false),
              return kendo.stringify(options); // kendo.stringify serializes to JSON string
          }
      },
      ...
    });

    I hope this helps.

     

    Greetings,
    Iliana Nikolova
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  11. Steve
    Steve avatar
    1851 posts
    Member since:
    Dec 2008

    Posted 06 Apr 2012 Link to this post

    Sorry by plans I mean either give us a property that reads better than "kendo.ui.progress($("#myfoods-list"), false), " or give us a property to specify duration before the animation would showup.  I like the duration idea way better :)

    Got news for you though...it's over the entire page
    http://dev dot gourmetsleuth  dot com/calc.aspx (dont want this indexed)

  12. Steve
    Steve avatar
    1851 posts
    Member since:
    Dec 2008

    Posted 06 Apr 2012 Link to this post

    Hmmm, this doesn't seem to work, throws script errors

    parameterMap: function (options) {
          kendo.ui.progress($("#myfoods-list"), false),
              return kendo.stringify(options); // kendo.stringify serializes to JSON string
          }
  13. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2594 posts

    Posted 09 Apr 2012 Link to this post

    Hi Steve,

    To your last post - I am sorry, but my syntax is wrong. The JavaScript syntax need ";" at the end of the row. The correct one is: 
    parameterMap: function (options) {
          kendo.ui.progress($("#myfoods-list"), false);
          return kendo.stringify(options); // kendo.stringify serializes to JSON string
    }

    I hope this helps.

    Regarding your previous post - currently such functionality for the loading image is not supported and we do not plan to implement it. I would suggest to submit this as a feature request in Kendo's UserVoice so the community can evaluate and vote for it.

     

    Regards,
    Iliana Nikolova
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  14. Steve
    Steve avatar
    1851 posts
    Member since:
    Dec 2008

    Posted 09 Apr 2012 Link to this post

    Ok thanks I'll try that

    What about the animation taking up the fullscreen though, bug?
  15. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2594 posts

    Posted 10 Apr 2012 Link to this post

    Hi Steve,

    I tried to reproduce such behavior of the loading image over both - our demos and your web site, but to no avail. I am afraid that without any sample code I am not able to say where the problem comes from, because by design the loading image is set only over the Kendo UI widget.
    Here are the screencasts from my tests:

    Could you please check them and let me know if I missed anything?

    Regards,

    Iliana Nikolova
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  16. Steve
    Steve avatar
    1851 posts
    Member since:
    Dec 2008

    Posted 17 Apr 2012 Link to this post

    Have a look: http://screencast.com/t/XcRruO4q6pF

    Its just a small div, but the entire parent is blocked while it's loading.

    Also on the "Your Site" video, you need to create an account and log in, otherwise you don't get any remote bound listviews...then search for like "Bread", not "aaaa" :)

    I'm also using FF...

    Here's a fiddle of the demo page code http://jsfiddle.net/stevescotthome/EfDKJ/

    You can see it happen there as well...the loading icon is centered in the page not the listview container...although the results come back really fast :)
  17. Luc
    Luc avatar
    42 posts
    Member since:
    Jul 2012

    Posted 19 Apr 2012 Link to this post

    I seem to be experiencing the same "over page" situation with the animation.

    I use a ListView bound to a DataSource through MVVM, and the animation is located over the page, not over the ListView only.

    Regards
  18. Steve
    Steve avatar
    1851 posts
    Member since:
    Dec 2008

    Posted 19 Apr 2012 Link to this post

    @Luc
      Sucks eh :)

    ...until they acknowledge it as a bug this'll fix you up

    /* LOADING IMAGE */
    .k-loading-mask{
      display:none; //Hide for now
    }

    If you need need a loading icon, the datasource has a requestStart event to hook into to show one, and the listview has a databound you can use to hide it.
  19. Luc
    Luc avatar
    42 posts
    Member since:
    Jul 2012

    Posted 19 Apr 2012 Link to this post

    @Steve,

    Thanks for the tip.

    It's really unfortunate that KendoUI has such a sloppy way of handling simple tasks. Who the hell came up with the idea to use the requestStart event of the DataSource to get rid of the animation ?

    And it's not even yet clear if it's the requestStart or the transport's parameterMap that one must handle. I have tried handling the requestStart event to set the animation off, but it didn't work as first advertised by the kendo team rep. I had to implement parameterMap for it to not show.

    My impressions with KendoUI so far is that they still have a lot of work to put in. Especially with regards to the documentation. I'm getting really frustrated that I paid for this product, but they still treat legitimate requests like we're bothering them.

    Some people have asked questions many days ago without an answer yet. I'm really getting to a point where I'm thinking of asking for a refund.

    @KendoUI,

    Time to deliver on your promises of being a "one stop" for web development !

    Please lose the attitude when we present you with legitimate concerns, and realise that your product is far from perfect.
  20. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 20 Apr 2012 Link to this post

    Hello Steve and Luc,

    I can confirm there is a bug involved here - we missed to set position: relative on the ListView's container, so that the loading icon can be constrained to it. As it is now the loading overlay will cover the entire screen or the closest positioned element. I fixed it and the fix will be available in the next internal build and the service pack. I'll see to it that the build is uploaded soon on the site.

    As a workaround you can just add this rule to your stylesheet:
    .k-listview {
        position: relative;
    }


    This will also hide the loading icon on initial load since the ListView doesn't have dimensions yet. If you want the icon to be visible, you can set the ListView min-height as seen in the Steve's updated jsFiddle here:


    Now to clarify the requestStart issue - it cannot be used to hide the loading icon reliably, since the loading icon is shown during this event and may or may not be initialized already at this exact moment. I'm sorry that we misguided you about this. Hiding the loading icon with CSS (as Steve pointed out) should be the way to go for now. We will see to it that it is better documented.

    Greetings,
    Kamen Bundev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  21. Luc
    Luc avatar
    42 posts
    Member since:
    Jul 2012

    Posted 20 Apr 2012 Link to this post

    Kamen,

    Thanks a lot for acknowledging the issue(s).

    By the way, is it possible for us to embed jsfiddles in our posts ?

    Regards
  22. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 20 Apr 2012 Link to this post

    Hello Luc,

    No, not possible in a forum post or support ticket, because you will need to embed an iframe with the fiddle - check the Share dropdown on the jsFiddle site.

    Kind regards,
    Kamen Bundev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  23. Luc
    Luc avatar
    42 posts
    Member since:
    Jul 2012

    Posted 20 Apr 2012 Link to this post

    Ok Kamen,

    I just thought since you guys (kendoui team) do it, that it would be possible for us too ;-)

    If needed, I'll just post the fiddle link.

    Cheers
Back to Top
Kendo UI is VS 2017 Ready