javascript - kendo UI grid update function wont fire - Stack Overflow

admin管理员组

文章数量:1389857

    $('#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" },
            { mand: { 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.

/

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:

/

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

    $('#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" },
            { mand: { 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/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/8tzgc/140/

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

• javascript
• jquery
• kendo-ui
• kendo-grid

Share Improve this question Follow edited Feb 13, 2014 at 21:40 user1534664 asked Feb 13, 2014 at 9:46 user1534664user1534664 3,41888 gold badges4343 silver badges6868 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

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

Change your mand column to:

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

And change your editable specification to "inline":

editable: "inline",

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

In order to fully flesh this out, you would have to provide implementation for the associated methods from the mand, 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.

try to change

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

to

mand: ["edit"]

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

mand: [
   { 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 mand array

本文标签： javascriptkendo UI grid update function wont fireStack Overflow