Datasource change and error events do not fire

[David]

Hi guys, I'm new to Kendo and am struggling to understand why the change and error event handlers defined in my datasource are not called. I have a grid with popup edit functionality. I would like to display a notification when a record has create, update or delete operations performed on it. Any advice is appreciated.

<div id="grid" style="margin-bottom: 20px"></div>
<!-- Data sources for supporter and supportee AutoComplete. -->
<script type="text/javascript">
  var supporterDataSource = new kendo.data.DataSource({
    transport: {
      read: {
        url: "<%= supporters_admin_customer_support_clients_url + '.json' %>",
        dataType: 'json',
        error: function (xhr) {
          var errors = $.parseJSON(xhr.responseText).errors;
          popupNotification.show(errors);
        }
      },
      schema: {
        user_id: { type: 'number' },
        full_name: { type: 'string' }
      }
    }
  });
  var supporteeDataSource = new kendo.data.DataSource({
    transport: {
      read: {
        url: "<%= supportees_admin_customer_support_clients_url + '.json' %>",
        dataType: 'json',
        error: function (xhr) {
          var errors = $.parseJSON(xhr.responseText).errors;
          popupNotification.show(errors);
        }
      },
      schema: {
        user_id: { type: 'number' },
        full_name: { type: 'string' }
      }
    }
  });
</script>
<!-- Tooltip error template for validation -->
<script id="tooltip-template" type="text/x-kendo-template">
  <span class="k-widget k-tooltip k-tooltip-validation k-invalid-msg">
    <span class="k-icon k-warning"></span>
    #=message#
  </span>
</script>
<!-- Popup editor template for customer support client grid -->
<script id="popup_editor" type="text/x-kendo-template">
  <div id="popServerErrorSummaryPlaceholder" style="display:none"></div>
  <div class="k-edit-label" style="padding-right: 10px">
    <label for="Customer Support Rep">Customer Support Rep</label>
  </div>
  <input name="Customer Support Rep"
     data-bind="value:supporter_name"
     data-value-field="user_id"
     data-text-field="full_name"
     data-source="supporterDataSource"
     data-role="autocomplete"
     required>
  <input type="hidden" name="SupporterID" data-bind="value:supporter_id">
  <div class="clear"></div>
  <div class="k-edit-label" style="padding-right: 10px">
    <label for="Researcher">Researcher</label>
  </div>
  <input name="Researcher"
     data-bind="value:supportee_name"
     data-value-field="user_id"
     data-text-field="full_name"
     data-source="supporteeDataSource"
     data-role="autocomplete"
     required>
  <input type="hidden" name="SupporteeID" data-bind="value:supportee_id">
</script>
<!-- Customer support client grid -->
<% content_for :javascript do %>
  var crudServiceBaseUrl = "<%= admin_customer_support_clients_url %>",
    dataSource = new kendo.data.DataSource({
      transport: {
        read: {
          url: crudServiceBaseUrl + '.json',
          dataType: 'json',
          error: function (xhr) {
            var errors = $.parseJSON(xhr.responseText).errors;
            popupNotification.show(errors);
          }
        },
        create: {
          url: crudServiceBaseUrl + '.json',
          type: "POST",
          dataType: 'json',
          change: function(data) {
            popupNotification.show('Customer support client created successfully');
          },
          error: function (xhr) {
            var errors = $.parseJSON(xhr.responseText).errors;
            popupNotification.show(errors);
          }
        },
        update: {
          url: function (data) {
            return crudServiceBaseUrl + '/' + data.id + '.json';
          },
          type: 'PATCH',
          dataType: 'json',
          change: function (data) {
            popupNotification.show('Customer support client updated successfully');
          },
          error: function (xhr) {
            var errors = $.parseJSON(xhr.responseText).errors;
            popupNotification.show(errors);
          }
        },
        destroy: {
          url: function (data) {
            return crudServiceBaseUrl + '/' + data.id + '.json';
          },
          type: 'DELETE',
          dataType: 'json',
          change: function (data) {
            popupNotification.show('Customer support client deleted successfully');
          },
          error: function (xhr) {
            var errors = $.parseJSON(xhr.responseText).errors;
            popupNotification.show(errors);
          }
        },
        parameterMap: function(options, operation) {
          if (operation !== 'read') {
            return {customer_support_client: kendo.stringify(options)};
          }
        }
      },
      pageSize: 20,
      serverPaging: false,
      serverFiltering: false,
      serverSorting: false,
      schema: {
        model: {
          id: 'id',
          fields: {
            id: {editable: false, nullable: true, type: 'number'},
            supporter_id: {type: 'number'},
            supporter_name: {type: 'string'},
            supportee_id: {type: 'number'},
            supportee_name: {type: 'string'},
            created_at: {editable: false, type: 'date'},
            updated_at: {editable: false, type: 'date'}
          }
        }
      }
    });

  $('#grid').kendoGrid({
    dataSource: dataSource,
    editable: {
      mode: 'popup',
      template: kendo.template($('#popup_editor').html())
    },
    edit: function(e) {
      $(e.container)
        .find('input[name="Customer Support Rep"]')
        .data('kendoAutoComplete')
        .bind('change', function(e) {})
        .bind('select', function(e) {
          var csc = this.dataItem(e.item.index());
          // Note .change is required to update underlying data source.
          $('input[name="SupporterID"]').val(csc.user_id).change();
        });
      $(e.container)
        .find('input[name="Researcher"]')
        .data('kendoAutoComplete')
        .bind('change', function(e) {})
        .bind('select', function(e) {
          var csc = this.dataItem(e.item.index());
          // Note .change is required to update underlying data source.
          $('input[name="SupporteeID"]').val(csc.user_id).change();
        });
      e.sender.editable.validatable._errorTemplate = kendo.template($('#tooltip-template').html());
      // TODO - Chrome Hack - Remove this when jQuery is v1.8 or above.
      $('.k-widget.k-window').css('webkit-transform', 'scale(1)');
    },
    toolbar: ['create'],
    height: 500,
    filterable: true,
    sortable: true,
    pageable: true,
    columns: [{
      field: 'supporter_name',
      title: 'Customer Support Rep',
      type: 'string'
    }, {
      field: 'supportee_name',
      title: 'Researcher',
      type: 'string'
    }, {
      field: 'created_at',
      title: 'Created At',
      type: 'date',
      format: '{0:dd-MMM-yyyy hh:mm tt}',
      parseFormats: ["yyyy-MM-dd'T'HH:mm:ss.zz"]
    }, {
      field: 'updated_at',
      title: 'Updated At',
      type: 'date',
      format: '{0:dd-MMM-yyyy hh:mm tt}',
      parseFormats: ["yyyy-MM-dd'T'HH:mm:ss.zz"]
    }, {
      command: ['edit', 'destroy'],
      title: ' ',
      width: '175px'
    }]
  });

  var popupNotification = $("#popupNotification").kendoNotification().data("kendoNotification");
<% end %>

[Rosen]

Hello David,

Looking at the code you have pasted it seems that the issue is caused by incorrect configuration. As you may know, both error and change are DataSource events, as such their handlers should be declared as part of the DataSource configuration instead of the transport operation as shown in the provided code snippet. 

dataSource = new kendo.data.DataSource({
      error: function (xhr) {
        //..
      },
      change: function() {
        //...
      },
      transport: {
        /*..*/
      },
      pageSize: 20,
      serverPaging: false,
      serverFiltering: false,
      serverSorting: false,
      schema: {
        /*..*/
      }
    });

Also please note that you may find requestEnd or sync events more suitable for the functionality you are trying to implement.

Regards,
Rosen
Telerik