在带有 Angular Kendo UI 的网格列中使用模板和编辑器 [英] Using templates&editors in grid column with Angular Kendo UI

问题描述

我正在尝试在我的应用中使用 Angular Kendo UI.一些视图包括网格.

 
</div

此网格的数据源定义如下

 $scope.accountSettingsDS = {数据源: {服务器分页:真，服务器过滤:真，服务器排序:真，页面大小:10，类型:odata"，架构:{数据:功能(响应){如果(响应值！== 未定义)返回响应值；别的 {删除响应["odata.metadata"];返回响应；}},总计:功能(响应){返回响应['odata.count'];},模型: {id: "id",字段:{ID: {类型:数字"，可假},公司:{类型:字符串"，可真实},货币: {类型:字符串"，可真实},帐户: {类型:字符串"，可真实},NC账户:{类型:字符串"，可真实}}}},运输: {读: {url: serviceUrl + "AccountsSettings",数据类型:json"},创建: {url: serviceUrl + "AccountsSettings",类型:POST"，内容类型:应用程序/json"},更新: {网址:功能(记录){return serviceUrl + "AccountsSettings" + "(" + record.id + ")";},类型:PUT"，内容类型:应用程序/json"，数据类型:json"，标题:{ 首选:返回内容"}},破坏: {网址:功能(记录){return serviceUrl + "AccountsSettings" + "(" + record.id + ")";},类型:删除"，内容类型:应用程序/json"，数据类型:json"},参数映射:函数(数据，操作){控制台日志(数据)；如果(操作 ===读取"){var parammap = kendo.data.transsports.odata.parametermap(data);返回参数映射；}返回 json.stringify(data);}}}};

当我编辑网格项并单击保存更改"按钮时，没有任何反应.
如果我在没有编辑器的情况下定义网格列，那么数据会正确更新(这样我必须使用默认的字符串编辑器).但我需要自定义编辑器.
我该如何解决这个问题?

解决方案

尝试为编辑器输入提供 name 属性，以便 Grid 知道要更新模型的哪个属性.

input kendo-drop-down-list name='Account' ...

I'm trying to use Angular Kendo UI in my app. Some views include grid.

  <div kendo-grid
     k-sortable ="true"
     k-pageable ="true"
     k-filterable ="true"
     k-resizable ="true"
     k-editable = "'incell'"
     k-selectable = "true"
     k-options = "accountSettingsDS"
     k-columns = '[
         { field: "Companies", title: "Companies", editor : "<input kendo-drop-down-list k-data-text-field="&#39;name&#39;" k-data-value-field="&#39;name&#39;" k-data-source="CompaniesList" ng-model="dataItem.Companies"/>"},
         { field: "Currency", title: "Currency", editor : "<input kendo-drop-down-list k-data-text-field="&#39;name&#39;" k-data-value-field="&#39;name&#39;" k-data-source="CurrenciesList" ng-model="dataItem.Currency"/>"},
         { field: "Account", title: "Account", editor : "<input kendo-drop-down-list k-data-text-field="&#39;name&#39;" k-data-value-field="&#39;name&#39;" k-data-source="AccountsList" ng-model="dataItem.Account"/>"},
         { field: "NCAccount", title: "NCAccount", editor : "<input kendo-drop-down-list k-data-text-field="&#39;name&#39;" k-data-value-field="&#39;name&#39;" k-data-source="NCAccountsList" ng-model="dataItem.NCAccount"/>"}
          ]'
     k-toolbar="['save','cancel']"
     id="accountSettingsGrid">
</div

DataSource for this grid is defined like in code below

    $scope.accountSettingsDS = {
        dataSource: {
            serverPaging: true,
            serverFiltering: true,
            serverSorting: true,
            pageSize: 10,
            type: "odata",
            schema: {
                data: function (response) {
                    if (response.value !== undefined)
                        return response.value;
                    else {
                        delete response["odata.metadata"];
                        return response;
                    }
                },
                total: function (response) {
                    return response['odata.count'];
                },
                model: {
                    id: "id",
                    fields: {
                        id: {
                            type: "number",
                            editable: false
                        },
                        Companies: {
                            type: "string",
                            editable: true
                        },
                        Currency: {
                            type: "string",
                            editable: true
                        },
                        Account: {
                            type: "string",
                            editable: true
                        },
                        NCAccount: {
                            type: "string",
                            editable: true
                        }
                    }
                }
            },
            transport: {
                read: {
                    url: serviceUrl + "AccountsSettings",
                    dataType: "json"
                },
                create: {
                    url: serviceUrl + "AccountsSettings",
                    type: "POST",
                    contentType: "application/json"
                },
                update: {
                    url: function(record) {
                        return serviceUrl + "AccountsSettings" + "(" + record.id + ")";
                    },
                    type: "PUT",
                    contentType: "application/json",
                    dataType: "json",
                    headers: { Prefer: "return-content" }
                },
                destroy: {
                    url: function(record) {
                        return serviceUrl + "AccountsSettings" + "(" + record.id + ")";
                    },
                    type: "DELETE",
                    contentType: "application/json",
                    dataType: "json"
                },
                parametermap: function (data, operation) {
                    console.log(data);
                    if (operation === "read") {
                        var parammap = kendo.data.transports.odata.parametermap(data);
                        return parammap;
                    }
                    return json.stringify(data);
                }
            }
        }
    };

When I edit grid item and click "Save changes" button nothing happens.
If I define grid columns without editors then data updates correctly(in this way I have to use default string editor). But I need custom editors.
How can I resolve this problem?

解决方案

Try to give name attribute to the editor input, so the Grid will know which property of the model to update.

input kendo-drop-down-list name='Account' ...

这篇关于在带有 Angular Kendo UI 的网格列中使用模板和编辑器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！