簡體   English   中英

在Angular Kendo UI的網格列中使用模板和編輯器

[英]Using templates&editors in grid column with Angular Kendo UI

我正在嘗試在我的應用中使用Angular Kendo UI。 一些視圖包括網格。

  <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

此網格的數據源的定義如下面的代碼所示

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

當我編輯網格項目並單擊“保存更改”按鈕時,沒有任何反應。
如果我定義了沒有編輯器的網格列,那么數據將正確更新(以這種方式,我必須使用默認的字符串編輯器)。 但是我需要自定義編輯器。
我該如何解決這個問題?

嘗試將名稱屬性賦予編輯器輸入,以便網格將知道要更新模型的哪個屬性。

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

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM