Kendo 带有布尔值的网格过滤器模式行

Question

我有一个 kendo 网格，其中的数据具有 boolean 类型。我使用过滤模式 'row'.

我使用 combobox 作为过滤器：

filterable: {
  cell: {
    template: function (args) {
      args.element.kendoComboBox({

        valuePrimitive: true,
        dataSource: [
          { text: "No", value: "false" },
          { text: "Yes", value: "true" },
          { text: "All", value: "all" }
        ],
        dataTextField: "text",
        dataValueField: "value"
      });

    },
    operator: "eq",
    showOperators: false
  }
}

道场示例：http://dojo.telerik.com/@lgoubet/uGeYIXoG

我不想用

filterable: {
    messages:
    {
      isTrue: "Oui",
      isFalse: "Non"
    }
}

我想使用复选框或单选按钮，因为它更漂亮更合适。

你有样品吗？一个想法？

Answer 1

您可以对任何您想要的元素使用自定义过滤器。和元素的 onChange 事件触发过滤器：

这是一个例子：

 $('#yourRadio').change(function (ev) {
        var grid = $('#grid').data('kendoGrid');
        var field = 'Locked';
        var operator = 'contains';
        var value = this.value;
        grid.dataSource.filter({
            field: field,
            operator: operator,
            value: value
        });
    });

您还可以使用 CSS 在网格的头部部分停用或删除过滤器。

th [role="listbox"] {
    visibility: hidden;
}   
thead {
    visibility: hidden;
    display: none;
}

Answer 2

Kendo 提供了一个自动布尔过滤器，你只需要通过在数据源 schema:

中指定它来告诉它 "locked" 是一个布尔值

$("#grid").kendoGrid({
      dataSource: {
        data: data,
        schema: {
            model: {
            fields: {
              locked: {
                type: "boolean"
              },
              name: {}
            }
          }
        }
      }
   ...});

完整样本在这里：http://dojo.telerik.com/aGOvOYiT

现在该过滤器是否是您想要的（它是两个单选按钮）是一个用户体验问题，而不是 Kendo 问题。我建议不要选择一个复选框，因为不清楚未选中状态是指 "not filtered" 还是 "filtered by false"。您的组合框是一个很好的解决方案，因为它有 3 个清晰且不同的状态。

Kendo 带有布尔值的网格过滤器模式行

Kendo grid filter mode row with boolean

kendo-ui

kendo-grid