This is a migrated thread and some comments may be shown as answers.

Datasource change and error events do not fire

1 Answer 276 Views
Grid
This is a migrated thread and some comments may be shown as answers.
David
Top achievements
Rank 1
David asked on 09 May 2014, 10:02 PM
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 %>


1 Answer, 1 is accepted

Sort by
0
Rosen
Telerik team
answered on 13 May 2014, 11:04 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
David
Top achievements
Rank 1
Answers by
Rosen
Telerik team
Share this question
or