kendo UI grid update function wont fire

Question

    $('#usersGrid').kendoGrid({
        columns: [
            { field: "UserName", title: "Display name", width: "140px" },
            { field: "Unit", title: "Unit", width: "140px" },
            { field: "Email", title: "E-mail", width: "140px" },
            { field: "Indienst", title: "Indienst", width: "140px" },
            { field: "Uitdienst", title: "Uitdienst", width: "140px" },
            { field: "Roles", title: "Roles" },
            { command: { text: "edit", click: openEdit } }
        ],
        editable: {
            update: true,
            create: true
        },
        dataSource: {
            transport: {
                read: function (options) {
                    $.ajax({
                        url: "/Administration/GetUserList",
                        dataType: "json", 
                        data: {
                            indienst: function () {
                                return indienst;
                            }
                        },
                        success: function (data) {
                            $("#usersGrid").data('kendoGrid').dataSource.data(data);
                        }
                    });
                },
                update: function (options) {
                    alert('not firing');
                }
            }
        },
        schema: {
            model: {
                id: "UserId",
                fields: {
                    UserId: { editable: false, type: "int" },
                    UserName: { type: "string" },
                    Unit: { editable: false, type: "string" },
                    Email: { type: "string" },
                    Indienst: { type: "string" },
                    Uitdienst: { type: "string" },
                    Roles: { editable: false, type: "string" }
                }
            }
        }
    });

This is my kendo UI grid. It's reading fine, but the problem is that it wont fire the datasource.transport.update call when I change a grid cell inline. Why won't it?

I've made sure I specified an id column and that the transport CRUD functions are all of the same type (functions here, not urls), but I've tried to have it work with urls as well. Only transport.read will fire...

when I check the console logs there are no errors given.

So I want to edit it inline. Click on a cell on the grid, and change the value, when u leave focus of the cell I want dataSource.transport.update() to run, or any function at all.

http://jsfiddle.net/8tzgc/135/

Edit:

After doing some research on the docs I've found out about the change() event. By checking what kind of change event it is we can figure out if its an update event and run the function we want ourselves. Here's my updated jsfiddle:

http://jsfiddle.net/8tzgc/140/

If anyone figures out a way that does not require calling the update function yourself, then I'm all ears.

Answer 1

try to change

command: { text: "edit", click: openEdit } 

to

command: ["edit"]

Answer 2

To edit inline, you can just leverage the example from the telerik demo site.

Change your command column to:

{ command: ["edit", "destroy"], title: " ", width: "160px" }

And change your editable specification to "inline":

editable: "inline",

I have edited your fiddle with the solution: http://jsfiddle.net/8tzgc/136/

In order to fully flesh this out, you would have to provide implementation for the associated methods from the command, such as update, create, etc... You can see those examples in the telerik demo.

If you would like to do cell-click editing with custom editors (dropdowns, etc), here is another telerik example.

There is also this example of batch editing.

Answer 3

If you are using editable:popup then try the following:

command: [
   { name: "view", template: "<a class='k-button k-button-icontext selectDiscountPercentage' title='Discount Percentage' ><i class='k-icon k-i-view'></i></a>", text: "", },
   { name: "edit", text: "" }, 
   { name: "destroy", text: " "}
], title: "&nbsp;", width: "160px"

The trick here is to give empty space(" ") to the text key inside command array