javascript 剑道 UI 网格更新功能不会触发

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/21750493/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 21:35:36  来源:igfitidea点击:

kendo UI grid update function wont fire

javascriptjquerykendo-uikendo-grid

提问by user1534664

    $('#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?

这是我的剑道 UI 网格。它读起来很好,但问题是当我更改网格单元inline时它不会触发 datasource.transport.update 调用。为什么不会呢?

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...

我已经确定我指定了一个 id 列并且传输 CRUD 函数都是相同的类型(这里的函数,不是 urls),但我试图让它也与 urls 一起使用。只有 transport.read 会触发...

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.

所以我想内联编辑它。单击网格上的一个单元格,然后更改值,当您离开该单元格的焦点时,我希望 dataSource.transport.update() 运行,或任何函数。

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

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:

在对文档做了一些研究之后,我发现了 change() 事件。通过检查它是什么类型的更改事件,我们可以确定它是否是更新事件并自己运行我们想要的函数。这是我更新的 jsfiddle:

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

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.

如果有人想出一种不需要自己调用更新函数的方法,那么我全神贯注。

采纳答案by Joe Brunscheon

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

要进行内联编辑,您只需利用Telerik 演示站点中的示例即可

Change your command column to:

将您的命令列更改为:

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

And change your editablespecification to "inline":

并将您的editable规范更改为"inline"

editable: "inline",

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

我已经用解决方案编辑了你的小提琴: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.

为了充分体现这一点,您必须从命令中提供相关方法的实现,例如更新、创建等……您可以在Telerik 演示中看到这些示例

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

如果您想使用自定义编辑器(下拉菜单等)进行单元格单击编辑,这里是另一个 Telerik 示例。

There is also this example of batch editing.

还有这个批量编辑的例子

回答by Satyadev

If you are using editable:popupthen try the following:

如果您正在使用,请editable:popup尝试以下操作:

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 textkey inside command array

这里的技巧是为命令数组中" "text键提供空格()

回答by MustafaP

try to change

尝试改变

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

to

command: ["edit"]