javascript - Kendo UI Grid Save on Cell Blur - Stack Overflow

admin管理员组

文章数量:1279244

I am trying to get my grid to save changes when you press enter or move off a cell (blur), and not have to use a save button in a grid toolbar.

I am having trouble getting it to work properly, my PHP/SQL works fine, so I am sure it is something wrong with the grid.

Here is my code:

$("#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()
}
});

I have tried many things and different events but it has no effect.

How can I get it to save cell values on blur?

I am trying to get my grid to save changes when you press enter or move off a cell (blur), and not have to use a save button in a grid toolbar.

I am having trouble getting it to work properly, my PHP/SQL works fine, so I am sure it is something wrong with the grid.

Here is my code:

$("#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()
}
});

I have tried many things and different events but it has no effect.

How can I get it to save cell values on blur?

• javascript
• jquery
• json
• gridview
• kendo-ui

Share Improve this question Follow asked Dec 23, 2012 at 15:38 imperium2335imperium2335 24.1k3838 gold badges116116 silver badges194194 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 7

In your DataSource add:

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

it should look like:

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

},

You could try and use the change event of the dataSource to execute the sync method of the dataSource.

   $("#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()
}
});

There is a much simpler way to achieve this: set autoSync to true on the data source: https://docs.telerik./kendo-ui/api/javascript/data/datasource/configuration/autosync

You can also call your datasource sync right from the grid as follows (make sure you use setTimeout, as per Telerik in this post)...

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

本文标签： javascriptKendo UI Grid Save on Cell BlurStack Overflow