0

I have the following implementation, it works and functional. However I would like to add a loading animation with setup a 4 seconds.

requestStart: function () {
 kendo.ui.progress($("#loading"), true);
},
requestEnd: function () {
  kendo.ui.progress($("#loading"), false);
}

CURRENT IMPLEMENTATION

I have came across the following fiddle, however I could not able to find a way to make it work.

casillas
  • 16,351
  • 19
  • 115
  • 215

1 Answers1

1

You need to delay the reading of the data for 4 seconds:

var theDataSource = new kendo.data.DataSource({
    transport: {
         read: function (op) {
             setTimeout(function () {
                 op.success(data);
             }, 4000);
         }
    },
    group: {
        field: "series"
    },
    sort: {
         field: "category",
         dir: "asc"
     },
     requestStart: function () {
        kendo.ui.progress($("#loading"), true);
      },
     requestEnd: function () {
          kendo.ui.progress($("#loading"), false);
     }
});

Updated DEMO

ezanker
  • 24,628
  • 1
  • 20
  • 35
  • Thanks a lot Ezanker, I wonder how could I implement same loading animation as follows http://dojo.telerik.com/IQeVU – casillas Jun 10 '15 at 21:00
  • 1
    @AndreaBanderas The image is from the class k-loading-image. In your fiddle it is coming from kendo.material.min.css which is the theme you have chosen. You could override the background image and get the one from the default theme that you like. – ezanker Jun 10 '15 at 21:11
  • 1
    @AndreaBanderas you can find the default image here: http://cdn.kendostatic.com/2015.1.429/styles/Default/loading.gif – ezanker Jun 10 '15 at 21:14
  • Thanks a lot Ezanker. I really appreciate your all help. – casillas Jun 10 '15 at 21:23
  • I know I need to show loading animation image first time when I initialize data; however how could I achieve persistency not to show loading animation everythime? – casillas Jun 10 '15 at 23:28
  • @AndreaBanderas maybe set a boolean to true on first load and check it on subsequent loads. It is hard to say as I don't know your exact situation. – ezanker Jun 11 '15 at 12:50