Question

我在Kendo网格中有一个列，我想在渲染时执行一些特定的逻辑，并使用Angular。我使用k-columns指令设置了网格列。

在查看the documentation后，看起来很简单：我可以将模板选项添加到我的列中，定义执行逻辑的函数，并传递dataItem值。我看起来像这样：< / p>

k-columns='[{ field: "Name", title: "Name", 
    template: function (dataItem){
        // Perform logic on value with dataItem.Name
        // Return a string
    }
}]'

然而，运行此操作会导致语法错误，抱怨在我的函数中形成块的开头的字符“{”。

我已经看到了以这种格式定义模板函数的几个例子。还有什么需要做才能实现吗？我做错了什么吗？是否有另一种方法将模板定义为函数并将列数据传递给它？（我尝试在我的$ scope上创建一个函数，但是我无法弄清楚如何将数据传递给函数。）

感谢您的帮助。

Answer 1

使用AngularJS和Kendo时，似乎不支持以这种方式定义列模板。这种方法适用于不使用Angular（标准MVVM）的项目，但是因为包含它而失败。

我的一位同事发现的解决方法是使用ng-bind构建模板，以在$ scope中指定模板函数，所有这些都在一个范围内：

template: "<span ng-bind=templateFunction(dataItem.Name)>#: data.Name# </span>"

这是Telerik在其Kendo-Angular源代码中实现的默认列模板方法。我还不知道data.Name值是否需要，但这对我们有用。

Answer 2

警告：目前无法访问Kendo来测试代码，但这应该非常接近

在您的情况下，您要为k-columns的值分配一个字符串，该字符串包含单词function和大括号{

你需要确保函数被执行......像这样：

k-columns=[
    {
       field: "Name",
       title: "Name", 
       template: (function (dataItem){
        // Perform logic on value with dataItem.Name
        // Return a string
       }())
    }
];

注意区别：

我们创建了一个对象 - 一个真实的诚实对象，我们使用IIFE来填充template属性。

Answer 3

也许，它会对某人有用 - 这段代码对我也有用：

columns: [
                { field: "processed", title:"Processed", width: "100px",
                    template: '<input type="checkbox" ng-model="dataItem.processed" />' },

你得到了这样的双向绑定：

<div class="col-md-2">
            <label class="checkbox-inline">
                <input type="checkbox" ng-model="vm.selectedInvoice.processed">
                processed
            </label>
        </div>

Answer 4

经过几个小时的搜索。以下是有效的结论：将您的网格数据作为{{dataItem.masterNoteId}}和您的$ scope数据作为属性名称或函数来访问。

实施例

            template: '<a href="\\#/ops/order/{{orderId}}/note/{{dataItem.masterNoteId}}"><i class="fa fa-edit"></i></a>',

我真的希望这可以保护某人的生命：）

Answer 5

这可以通过提供一个回调函数（其参数是代表行的对象）来通过columns.template参数来完成。如果为行指定一个名为name的字段，这将是您引用的对象的属性：

$("#grid").kendoGrid({
  columns: [ {
    field: "name",
    title: "Name",
    template: function(data) {
        return data.name + "has my respect."
    }
  }],
  dataSource: [ { name: "Jane Doe" }, { name: "John Doe" } ]
});

有关更多信息，请访问Kendo's columns.template reference page。

如何在AngularJS中使用Kendo Grid Column Template中的函数

5 个答案: