簡體   English   中英

在Angular Kendo UI的網格列中使用自定義編輯器

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

我試圖在我的角度應用程序中將自定義編輯器用於可編輯的kendo ui網格。 由於某些原因(我無法跟蹤),未觸發自定義編輯器。

我希望觸發以下操作,但它不起作用。

console.log("Editor Launched", options);

這是相同的插件: http ://plnkr.co/edit/WioRbXA3LHVVRQD95nXA?p=preview

app.controller('MainCtrl', function($scope) {
$scope.model = {};
$scope.model.dataSource = new kendo.data.DataSource({
    data: createRandomData(10),
    schema: {
        model: {
            fields: {
                City: { type: "string" }, 
                Title: { type: "string" },
                BirthDate: { type: "date" },
                Age: { type: "number" }
            }
        }
    },
    pageSize: 16,
    editable:true 
});  

$scope.addWWNumEditor= function (container, options) { 
  console.log("Editor Launched", options); 
  $('<input kendo-numeric-text-box k-min="10" k-max="20" style="width: 100%;" data-bind="value:' + options.field + '"/>')
  .appendTo(container);
}



$scope.controlIsDisabled=function(model){
//console.log("model",(model.Age>=50));
var toReturn =  (model.Age>50)?"columnDisabled" : "columnActive";
//console.log('to Return',toReturn);
return toReturn;
}

$scope.model.columns = [  
    { field: 'City', title: 'City' },
    { 
      field: 'Title', 
      title: 'Title',
      template:'<span style="color:red;">EDITABLE</span><span ng-
      class="controlIsDisabled(dataItem)">#=Title#</span>'
    },
    { 
      field: 'Age', 
      title: 'Age',
      template:'<span ng-class="controlIsDisabled(dataItem)">#=Age#</span>' 
     ,
      editor:$scope.addWWNumEditor
    }
];

}); 

假設您的Plunkr鏡像了您的實際代碼,我看到的主要問題是您在網格元素上綁定了k-columns

您目前有k-columns="{{model.columns}}" ,但是{{}}在這里是不必要的。 更改為k-columns="model.columns"會使編輯器功能按預期執行。

暫無
暫無

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

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