Kendo Grid - 过滤行作为 kendoDropDown

Posted 2023-04-13

【中文标题】Kendo Grid - 过滤行作为 kendoDropDown

【英文标题】：Kendo Grid - Filter Row as kendoDropDown

【发布时间】：2014-12-14 22:50:49

【问题描述】：

在将问题作为答案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 甚至不可用。

不知道我做错了什么。

【问题讨论】：

如果您发布示例的 JSBin，我可以进一步帮助您。这种错误通常意味着您只是在错误的范围/顺序中声明了事物。

【参考方案1】：

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

从 2014 Q2 SP1 开始，模板函数现在接收包含“数据源”和“元素”的对象。

改变

element.kendoDropDownList(

到

element.element.kendoDropDownList(

【参考方案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
                
           

【讨论】：

抱歉回复晚了。 Pluc 是正确的，这就是问题所在。但是你会为#debugger;# 的建议投票。我不知道这一点，它很有帮助。