[Solved] Block multiple remote calls simultaneously

[Kris]

I have a Grid (Html version) implemented with CRUD operations that work perfectly. The Grid is bounded to a remote service.

Am looking for a way to block the user from initiating multiple service requests for any of the CRUD operations until a service response, either successful or failure, is received for the first/original request. For example, if the user deleted a row, the service takes a few seconds until completing the request and returns response to the client. If during that time the user tries to delete another row, the Grid actually sends two requests, one for the first row and one for the second row, which causes exception on the service due to the way it's implemented (something related to the SQL database and record is being already deleted along with some other complex logic).

Is there a way to achieve this?

Thanks!

[Matt Barker]

According to the documentation, this should work:

var dataSource = new kendo.data.DataSource({
    transport: {
        read:  {
            url: remoteServiceUrl,
            dataType: 'jsonp'
        },
        update: {
            url: remoteServiceUrl + '/Update',
            dataType: 'jsonp'
        },
        destroy: {
            url: remoteServiceUrl + '/Delete',
            dataType: 'jsonp'
        },
        create: {
            url: remoteServiceUrl + '/Create',
            dataType: "'jsonp'
        }
    },
    requestStart: function() {
        // Show progress, can be the built in one or whatever you want
        kendo.ui.progress($('#grid'), true);
    },
    requestEnd: function() {
        // Hide progress
        kendo.ui.progress($('#grid'), false);
    }
});

http://docs.telerik.com/kendo-ui/api/javascript/ui/ui#methods-progress
http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#events-requestStart

[Alexander Valchev]

Hi guys,

@Matt, thank you for sharing this solution!

@Kris

Matt's solution is correct and recommended as it will give a visual indication to the user that there is a request in progress. In case you do not want to use the build-in Kendo spinning animation but your own one, you may cancel the subsequent requests by calling e.preventDefault() in the requestStart event handler. For example:

var requestInProgress = false;
var dataSource = new kendo.data.DataSource({
  transport: {
    read: {
      url: "http://demos.telerik.com/kendo-ui/service/products",
      dataType: "jsonp"
    }
  },
  requestStart: function(e) {
    if (requestInProgress) {
      e.preventDefault();
    } else {
      requestInProgress = true;
    }
  },
  requestEnd: function(e) {
    requestInProgress = false;
  }
});

Regards,
Alexander Valchev
Telerik