Kendo Grid: how to make datasource trigger update and create events

Question

I am starting to look at how I would get my grid edits back to a service via the datasource.

Following the documentation, I have set a local test data source as follows..

function getDataSource() {
var gridData = [
{
  col1: new CellData('1', 'data1-1'),
  col2: new CellData('2', 'data1-2')
  },
{
  col1: new CellData('3', 'data2-1'),
  col2: new CellData('4', 'data2-2')
  },
];

var dataSrc = new kendo.data.DataSource({
batch: true,

transport: {
  read: function (e) {
    e.success(gridData);
  },

  update: function (e) {
    // batch is enabled
    var updateItems = e.data.models;

    // This is not called

    // on success
    e.success();
  },

  create: function (e) {
    e.success(e.data);
  },
  destroy: function (e) {
    e.success();
  }
 }
});

 return dataSrc;
}

I have a toolbar setup (with the "Save Changes"), and this is calling the SaveChanges configuration event, how ever, just cannot see what else I need to do to get the following to occur..

1. Have the data sources update called
2. Mark the grid "on dirty" so that the red "edited" indicators on the edited cells disappear

I am having the same problem with the Add New record (though I can't get the grids "addRow" even to fire here)

I have the running example here

Any help would be great appreciated!

Answer 1

You need to specify the DataSource schema for this to work:

var dataSrc = new kendo.data.DataSource({
    batch: false, // true would mean transport functions get multipe models  in e.data 
    transport: {
        // ....
    },
    schema: {
        data: function (response) {
            return response;
        },
        model: {
            id: "id",
            fields: {
                id: {
                    editable: false,
                    defaultValue: 0 // 0 == new / unsaved row
                },
                col1: {
                    editable: true,
                    // new items would have that using default add button
                    defaultValue: {
                        id: 0,
                        CategoryName: ""
                    }, 
                    fields: { id: { editable: true }, display: { editable: true }
                },
                col2: {
                    editable: true,
                    fields: { id: { editable: true }, display: {  editable: true } }
                }
            }
        }
    }
});

Also note:

• grid.saveChanges will sync the DS, so you don't need to do anything in the event
• There is no addRow event.
• The default "create" button will try to add an empty object; since you work with nested objects, you need to add the row yourself so you can initialize the properties; thus you need a custom button and bind your action manually

( demo )