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.

Solution

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.

Comments

[user1534664]

Does the edit button have effect on inline cell editting? The edit button (openEdit) works fine, but the problem is inline editting won't work. I will try ur solution in a moment.

[MustafaP]

can you create jsfiddle project

[MustafaP]

your button is custom button, that's why it fires openEdit function. But I tried to change it as default edit button like my answer and nothing changed. Update function did not fired. Sorry I couldn't find what about problem is.

[MustafaP]

Also I tried error handling but error event did not fired too.

[user1534664]

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. I can't get it to fire. I'm sorry I confused you with the command edit button column. I should've omitted that.

[user1534664]

yeah, I have a custom popup that opens when openEdit() gets fired. But my internship boss said he also wants to be able to edit it inline. Thanks for your help, I can't seem to figure it out either.

[Joe Brunscheon]

I have edited my answer for the inline editing solution, as well as updated the fiddle.

[user1534664]

I got it to work using the change() event and firing the update function myself. If you can find a way to do it automatically then I'll accept your answer. I'll update my question.

[user1534664]

Hey, I've updated my question because I've come up with a (perhaps trivial) way to solve the problem. I figured you might be curious how :)

[Joe Brunscheon]

As near as I can tell, what you have done is the proper way to do it, and is what I was referring to when I said you needed to... "implementation for the associated methods from the command, such as update, create, etc..."

[user1534664]

ah great. I misunderstood, I thought you ment you wanted to get me to use the command button to update. Weird it took me so long just to get the update function firing... Searched for hours on the net :p Thanks for your help.

[MustafaP]

Is this jsfiddle working? I've tried but update function not fired again and column did not updated

[Joe Brunscheon]

The fiddle works, but you have to provide the implementation for the commands you want implemented.