Kendo Grid - 过滤行作为 kendoDropDown

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 开始，模板函数现在接收包含“数据源”和“元素”的对象。

改变

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>

上面的代码停止编译剑道模板，你可以在开发者工具中看到实际的范围。

也许您应该将 herkunftDropDownEditor 函数分配给窗口对象。

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

在网格中这样称呼它：

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