Question

在将问题作为回答here发布后，我通过创建新问题来解决此问题。

我尝试在kendo网格中创建行过滤器，以显示该列中可能值的DropDown。到目前为止，我得到的最接近的是Pluc的例子in linked question。它仍然没有按预期工作。

在kendoGrid的列中，我定义了一个这样的字段：

{ 
    field: "Herkunft", 
    title: "Herkunft", 
    width: "120px", 
    type: "string", 
    filterable: 
    { 
        cell: 
        { 
            showOperators: false, 
            template: herkunftDropDownEditor
        }
    }  
 }

这是herkunftDropDownEditor函数：

function herkunftDropDownEditor(element) {
     element.kendoDropDownList({
          autoBind: false,
          optionLabel: "--Select Value--",
          dataTextField: "Value",
          dataValueField: "Value",
          valuePrimitive: true,
          dataSource: herkunftDataSource
          });
     }

下拉列表的数据源：

var herkunftDataSource = new kendo.data.DataSource({
    data: [
    { Value: "Choice One" },
    { Value: "Choice Two" }
    ]
 });

它不起作用。我在Chrome中遇到的JS错误就行了：

element.kendoDropDownList({

错误说："Uncaught TypeError: undefined is not a function".由于某种原因，它无法使用kendoDropDownList函数。

我也觉得令人困惑的是Telerik在他们的示例中使用模板的方式：template: "#=FirstName# #=LastName#"他们这样做的方法是将函数连接到ui而不是template。我也试过这种方法，调用ui: herkunftDropDownEditor而不是template: herkunftDropDownEditor。这种方式没有错误，但它不起作用。搜索字段仍然是文本框。当我在Chrome中调试时，我发现该函数中的参数element甚至不可用。

不知道我做错了什么。

Answer 1

我在链接帖子中更新了我的答案。

从2014 Q2 SP1开始，模板函数现在接收一个包含“datasource”和“element”的对象。

更改

element.kendoDropDownList({

到

element.element.kendoDropDownList({

Answer 2

可能是范围问题。

是MVVM应用吗？ Grid是否通过声明代码从标记初始化？如果是这样，您可以通过调试器停止编译，如下所示：

<div
data-role="grid"
data-filterable='{mode: "row"}
data-columns="[
              { 
                field: 'Herkunft', 
                filterable: {
                    cell: {
                            template: kendo.template($('#template').html())}
                             }

               }]
></div>
<script type="text/x-kendo-template" id="template">
    #debugger;#
</script>

上面的代码停止了kendo模板编译，您可以在开发人员工具中看到实际范围。

也许你应该将herkunftDropDownEditor函数分配给window对象。

window.myAppNameSpace.herkunftDropDownEditor = function(){...};

并在网格中调用它：

filterable: {
          cell: {
             template: myAppNameSpace.herkunftDropDownEditor
                }
           }

Kendo Grid - 过滤行为kendoDropDown

2 个答案: