KendoUI网格自定义过滤器UI

KendoUI Grid Custom Filter UI

本文关键字：UI 过滤器 自定义 网格 KendoUI      更新时间：2023-09-26

我现在正试图用一个带有一些伪数据的下拉框来实现一个自定义过滤器UI。我遵循了剑道网站上的教程(http://demos.kendoui.com/web/grid/filter-menu-customization.html)但这对我来说根本不起作用

以下是自定义UI的功能：

function relStatFilter(element)
  {
    element.kendoDropDownList({
      dataSource: ["Prospect", "Customer"],
      optionLabel: 'Select status'
    })
  }

这是它所应用的列参数：

...
{
            field: 'relStat', 
            filterable: 
            {
                ui: relStatFilter, 
                extra: false
            }, 
            title: '<abbr title=''Relationship status''>Rel stat</abbr>', 
            template: '#= ratio == 0 ? "<span class=text-info>Prospect</span>" : relStat == "Active" ? "<span class=text-success>Active</span>" : relStat == "At risk" ? "<span class=text-warning>At risk</span>" : "" #', 
        }, 
...

当我点击过滤器时，我得到的只是标准的"开头"和文本输入。

我错过了什么？

自定义过滤UI自2012.3.1315起提供。请确保您没有使用旧版本。使用2012.3.1315，以下代码按预期工作：

$("#grid").kendoGrid({
  dataSource: [ { name: "Foo" }, { name: "Bar" }],
  filterable: {
    extra: false,
    operators: {
      string: {
        eq: "Is equal to",
        neq: "Is not equal to"
      }
    }
  },
  columns: [
    {
      field: "name",
      filterable: {
        ui: function(element) {
          element.kendoDropDownList({
            dataSource: [ "Foo", "Bar"]
          });
        }
      }
    }
  ]
});

这是一个现场演示：http://jsbin.com/uwiqow/1/edit

相关文章：