Remote Transport CRUD Implementation Q&A

[Brett]

I'm having quite a few small issues with implementing a remote transport using Kendo Grid, with Node/Express backend. I basically want to build a simple backend catering to Kendo. I made a simple table on the server called Todo, with two fields: TodoID and TodoItem. I'm using this just to try and create a REST based CRUD using Kendo Grid.

Here's my datasource and grid definition:

var dataSource = new kendo.data.DataSource({
        autoSync: true,
        batch: true,
        schema: {
            model: {
                id: "TodoID",
                TodoID: {editable: false, nullable: true}
            }
        },
        transport: {
            create: {
                url: "http://localhost:3000/todo/create",
                contentType: 'application/json',
                dataType: "json"
            },
            read: {
                url: "http://localhost:3000/todo/read",
                contentType: 'application/json',
                dataType: "json"
            },
            update: {
                url: "http://localhost:3000/todo/update",
                contentType: 'application/json',
                dataType: "json"
            },
            destroy: {
                url: "http://localhost:3000/todo/delete",
                contentType: 'application/json',
                dataType: "json"
            },
            parameterMap: function(options, operation) {
                if (operation !== "read" && options.models) {
                    return {models: kendo.stringify(options.models)};
                }
            }
        }
    });

 

And here's the grid:

$("#grid").kendoGrid({
        dataSource: dataSource,
        height: 550,
        filterable: true,
        sortable: true,
        pageable: true,
        editable: "inline",
        toolbar: ["create"],
        columns: [{
            field: "TodoID",
            title: "ID",
            filterable: false
        }, {
            field: "TodoItem",
            title: "Item",
            filterable: false
        }, {
            command: ["edit", "destroy"], title: " ", width: "250px"
        }]
    });

 

Read and Update are working fine on both client and server. Delete and Create are odd.

1. When I click delete button, the REST method on server is called twice. Why?

I searched and looked into bath, auto sync, results I'm returning, etc. but can't figure out why. Here is the code on the server:

router.get('/delete', function(req, res, next) {
    var models = JSON.parse(req.query.models);
    connection.query('DELETE from Todo WHERE TodoID =' + models[0].TodoID + ';', function(err, results){
        if(err){
            console.log(err);
        }
        else{
            console.log(results);
            res.status(200).json(models);
        }
    });
});

 

And here is the server logged messages (two of them one after another): 

OkPacket {
  fieldCount: 0,
  affectedRows: 1,
  insertId: 0,
  serverStatus: 2,
  warningCount: 0,
  message: '',
  protocol41: true,
  changedRows: 0 }
GET /todo/delete?models=%5B%7B%22TodoID%22%3A1%2C%22TodoItem%22%3A%22Item+1%22%7D%5D 200 2793.546 ms - 34
OkPacket {
  fieldCount: 0,
  affectedRows: 0,
  insertId: 0,
  serverStatus: 2,
  warningCount: 0,
  message: '',
  protocol41: true,
  changedRows: 0 }
GET /todo/delete?models=%5B%7B%22TodoID%22%3A1%2C%22TodoItem%22%3A%22Item+1%22%7D%5D 304 1615.503 ms - -

2. The second issue is when I click "Add new record" in the grid, it immediately calls my server side Create route. I setup the ID and return that, and the Grid updates, but it's not in edit mode. What I want is click Add and then it let's me edit the row in the grid and then only calls create when done, does nothing if cancelled.

Here is the server side code for create (although I believe this should be called until after the record is added to the grid).

router.get('/create', function(req, res, next) {
    connection.query('INSERT INTO Todo (TodoItem) VALUES ("New item");', function(err, results){
        if(err){
            console.log(err);
        }
        else{
            res.status(200).json([{ TodoID: results.insertId }]);
        }
    });
});

 

What do I need to do on the client side to let the grid editing complete the new item before it calls create on server? Seems like if I disable auto sync it can work they way I want, but then the other operations are broken.

Thanks,
Brett

[Brett]

Replying to myself in case it helps others: Removing autoSync seems to fix everything. 

With autoSync not enabled:

* Create transport method only gets called when the client presses "Update"

* Destroy no longer gets called twice!

[Milena]

Hello Brett,

Thank you for sharing your solution with the community.

You can see the response to such scenario asked on stackoverflow below:

 This is caused by the autoSync setting. When you set it to true the data source calls the syncmethod after every change. Setting autoSync to false and manually calling the sync() method would cause the data source to make only one request with all deleted data items.

Regards,
Milena
Progress Telerik