CODEWITHSUNDEEP
kendo-uikendo-grid
sandy
sandy

Reputation: 293

Edit and save changes made to datasource of kendoUI grid

I have an application having several tabs and I have a KendoUI grid placed in one of the tabs for which the code is in .js file. (i.e the view has div tags and then div tag is rendered to KendoUI grid in .js file). Its datasource is fetching values from a class written in Model file of MVC based application. I want to make the the grid editable and save changes asynchronously to the datasource as I move to any other tab. Any pointers in this direction would be great...

The view file of MVC app contains: 

<div id="example" class="k-content">
            <div id="grid"></div>

The div tag is rendered to KendoUi grid in a .js file. The code is as below:

function createGrid()
{
 $("#grid").kendoGrid({
    dataSource: dataSource,
    height: 430,
    columns: [
    { field:"ProductName",title:"Product Name" },
    { field: "Category", title: "Category"},
    { field: "UnitPrice", title:"Unit Price" },
    editable: true
});
}
function createDataSource()
{
    var dataSource = new kendo.data.DataSource({
    transport: {
    read:  {
            url: BaseUrl + "/Products", //this is the action method in Controller which returns a list of Products which is hardcoded in this method itself.
            dataType: "json"
     },
    autoSync: true,
    schema: {
        model: {
        id: "ProductID",
        fields: {
        ProductID: { editable: false, nullable: true },
        ProductName: { validation: { required: true } },
        Category: { defaultValue: { CategoryID: 1, CategoryName: "Beverages"} },
        UnitPrice: { type: "number", validation: { required: true, min: 1} }
     }
     }
    }
});
}

On click of tab/button the createDataSource() and createGrid() functions are called. I want the changes made in this editable grid to be saved to datasource when on any other tab is clicked.

Upvotes: 0

Views: 15459

Answers (2)

Stuart Hallows
Stuart Hallows

Reputation: 8953

You should specify the update method on your transport object, like this;

update:  BaseUrl + "/UpdateProducts",

or if you prefer;

update:  {
    url: BaseUrl + "/UpdateProducts"
},

Upvotes: 1

Atanas Korchev
Atanas Korchev

Reputation: 30671

The sync method of the data source saves any changes done to it by making a request to the remote service. You need to call it when you move to another tab.

Upvotes: 1

Related Questions