Question

我有一个应用程序有几个选项卡，我有一个KendoUI网格放在其中一个选项卡中，代码位于.js文件中。（即视图具有div标签，然后div标签呈现为.js文件中的KendoUI网格）。它的数据源是从基于MVC的应用程序的模型文件中编写的类中获取值。我想让网格可编辑，并在移动到任何其他选项卡时将更改异步保存到数据源。这个方向的任何指针都会很棒......

MVC应用程序的视图文件包含：

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

div标记在.js文件中呈现给KendoUi网格。代码如下：

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

单击选项卡/按钮，将调用createDataSource（）和createGrid（）函数。我希望在单击任何其他选项卡时，将此可编辑网格中所做的更改保存到数据源。

Answer 1

数据源的sync方法通过向远程服务发出请求来保存对其所做的任何更改。移动到另一个标签页时需要调用它。

Answer 2

您应该在传输对象上指定update方法，如下所示;

update:  BaseUrl + "/UpdateProducts",

或者如果您愿意;

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

编辑并保存对kendoUI网格数据源所做的更改

2 个答案: