Load Animation to the Spreadsheet

Environment

Product

Progress® Kendo UI® Spreadsheet for jQuery

Description

How can I add a loading animation to the Spreadsheet when I paste huge clipboard data in the it?

Solution

Implement a jQuery paste event handler. To attach the event, use the render event of the Spreadsheet. Note that you will need to open the Kendo UI Progress Indicator on the spreadsheet element and not on the paste target.

<div id="spreadsheet"></div>

<script>
  $("#spreadsheet").kendoSpreadsheet({
    render: function(e) {
      var spreadsheetView = $('.k-spreadsheet-view');

      spreadsheetView.unbind('paste');

      spreadsheetView.on('paste', function (e) {
        var element = $('.k-spreadsheet');

        kendo.ui.progress(element, true);

        setTimeout(function () {
          kendo.ui.progress(element, false);
        }, 1000);
      });
    }
  });
</script>

See Also

• API Reference of the Spreadsheet
• API Reference of the Progress Method