How to bind and ajax spinner when kendo grid datasource read

Let’s think we want to bind an ajax spinner into kendo grid data Source before and after calling the request. Here is how we do it.

I have an kendo grid names as grid. Now with jQuery I am going to bind two events into grid’d data source.

$(document).ready(function () {

        function start() {
         // load spinner
        }

        function end() {
            //close spinner
        }

        $("#grid").data("kendoGrid").dataSource.bind('requestStart', start);
        $("#grid").data("kendoGrid").dataSource.bind('requestEnd', end);
});

So when you call data source like below, it will automatically display your ajax spinner.

$("#grid").data("kendoGrid").dataSource.read({ foo: Math.random() });