Removing the animation

[sitefinitysteve]

Can I somehow kill the fade animation on the listview?  I don't see anything in the documentation on it....

[Iliana Dyankova]

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

[sitefinitysteve]

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

[sitefinitysteve]

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

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

[sitefinitysteve]

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

[Iliana Dyankova]

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

[sitefinitysteve]

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?

[sitefinitysteve]

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)

[Iliana Dyankova]

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

[sitefinitysteve]

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)

[sitefinitysteve]

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

      }

[Iliana Dyankova]

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

[sitefinitysteve]

Ok thanks I'll try that

What about the animation taking up the fullscreen though, bug?

[Iliana Dyankova]

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:

• Our demos screencast;
• Your web site screencast. 

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

Regards,

Iliana Nikolova
the Telerik team

[sitefinitysteve]

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 :)

[Luc]

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

[sitefinitysteve]

@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.

[Luc]

@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.

[Kamen Bundev]

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

[Luc]

Kamen,

Thanks a lot for acknowledging the issue(s).

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

Regards

[Kamen Bundev]

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

[Luc]

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