Kendo UI Grid 保存单元格模糊

Posted 2023-05-07

【中文标题】Kendo UI Grid 保存单元格模糊

【英文标题】：Kendo UI Grid Save on Cell Blur

【发布时间】：2012-12-10 08:09:14

【问题描述】：

我试图让我的网格在您按下回车键或移出单元格（模糊）时保存更改，而不必使用网格工具栏中的保存按钮。

我无法让它正常工作，我的 php/SQL 工作正常，所以我确定网格有问题。

这是我的代码：

$("#grid").kendoGrid(
dataSource: 
    transport: 
        read: WEBROOT+"admin/fetch-toppers",
        update: 
            url: WEBROOT+"admin/update-topper",
            type: "POST"
        
    ,
    error: function(e)
    
        alert(e.responseText);
    ,
    schema: 
        data: "data",
        model: 
            id: 'id',
            fields: 
                "id": nullable: true,
                "Date": editable: false,
                "name": editable: false,
                "price": editable: true
            
        
    
,
columns: [field: "Date", width: 105, field: "name", title: "Topper", field: "price", title: "Price", width: 125],
height: 550,
filterable: true,
sortable: true,
pageable: true,
editable: true,
navigatable: true,
edit: function()

    //this.saveChanges()

);

我尝试了很多事情和不同的事件，但没有任何效果。

如何让它在模糊时保存单元格值？

【参考方案1】：

在您的数据源中添加：

change: function (e) 
                        if (e.action == "itemchange") 
                            this.sync();
                        
                    ,

它应该看起来像：

dataSource: 
transport: 
    read: WEBROOT+"admin/fetch-toppers",
    update: 
        url: WEBROOT+"admin/update-topper",
        type: "POST"
    
,
error: function(e)

    alert(e.responseText);
,
change: function (e) 
                        if (e.action == "itemchange") 
                            this.sync();
                        
,
schema: 
    data: "data",
    model: 
        id: 'id',
        fields: 
            "id": nullable: true,
            "Date": editable: false,
            "name": editable: false,
            "price": editable: true
        
    

,

【讨论】：

太棒了！谢谢！剑道论坛有很多帖子需要看这个！

【参考方案2】：

您可以尝试使用dataSource的change事件来执行dataSource的sync方法。

   $("#grid").kendoGrid(
dataSource: 
    transport: 
        read: WEBROOT+"admin/fetch-toppers",
        update: 
            url: WEBROOT+"admin/update-topper",
            type: "POST"
        
    ,
    change:function()this.sync(),
    error: function(e)
    
        alert(e.responseText);
    ,
    schema: 
        data: "data",
        model: 
            id: 'id',
            fields: 
                "id": nullable: true,
                "Date": editable: false,
                "name": editable: false,
                "price": editable: true
            
        
    
,
columns: [field: "Date", width: 105, field: "name", title: "Topper", field: "price", title: "Price", width: 125],
height: 550,
filterable: true,
sortable: true,
pageable: true,
editable: true,
navigatable: true,
edit: function()

    //this.saveChanges()

);

【讨论】：

我如何将我所拥有的内容融入其中？

如何更改我的代码以实现您的建议？我已经尝试了所有方法，但仍然无法正常工作，但是使用保存更改按钮可以正常工作，但这不是我想要的。

我已经更新了我的帖子，检查dataSource错误函数上方的行

试过了，不过现在才弄到一个永远不会消失的loader。

我得到 Object [object Object] has no method 'sync'

【参考方案3】：

有一个更简单的方法来实现这一点：在数据源上将 autoSync 设置为 true：https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/configuration/autosync

【参考方案4】：

您也可以直接从网格中调用您的数据源同步，如下所示（确保使用 setTimeout，根据 Telerik 在此 post）...

save: function () 
     setTimeout(function() 
          yourDatasource.sync();