Kendo UI过滤器上的布尔值 [英] Kendo UI filter on boolean

问题描述

是否可以使用带有是"，否"，其他"等选项的过滤器菜单

Is it possible to have a filter menu with options such as Yes, No, Other

我有一个带有一列的网格，该列只能有3个值，是，否或其他.过滤器应显示具有这些值的单选按钮，以及两个按钮过滤器"和清除".这可能吗?

I have a grid with a column which could have only 3 values Yes, No or Other. The filter should show radio buttons with these values and two button Filter and Clear. Is this possible?

当我尝试使用字段类型:"boolean"时，得到是"和否"，但是如何添加第三个单选按钮其他".

When I try with field type:"boolean", I get 'Yes' and 'No but how do I add the third radio button 'Other'.

任何帮助将不胜感激.

谢谢

推荐答案

Kendo在此处提供了一个有关如何执行此操作的示例:
http://demos.telerik.com/kendo-ui/grid/filter -menu-customization

Kendo has an example of how to do just that here:
http://demos.telerik.com/kendo-ui/grid/filter-menu-customization

以下是可能如何设置过滤器的示例

Here is an example of how your filter will probably be set up

filterable: {
  //hide second filter option
  extra: false,
  operators: {
    string: {
      eq: "Is equal to"
    }
  }
},
filterMenuInit: function(e) {
  //when the filter menu opens find the first dropdown and hide it
  //as it has the Is equal to filter in it.
  e.container.find(".k-dropdown").eq(0).hide();
}

以下是JSbin，它显示了如何使用其中一些功能: http://jsbin.com/qehugexo/2/edit

Here is JSbin that shows how to use some of these features: http://jsbin.com/qehugexo/2/edit

---

更新
虽然我可以在过滤器窗口中显示单选按钮，但安装它是一件令人头疼的事情，并且对于默认的Kendo东西非常讨厌.我建议使用演示中所示的Kendo Dropdown或只对Grid本身的数据源上的过滤器进行操作.

---

Update
While I could get radio buttons to show up in the filter window, it was a headache to rig it up and very hacky with the default Kendo stuff. I would suggest using the Kendo Dropdown as show in the demo or just manipulating the filter on the Data source of the Grid itself.

可以使用以下代码完成此操作:

It can be done with code like this:

$(".k-grid").data("kendoGrid").dataSource.filter({filters: [{field: "City", operator: "eq", value: "Boston"}], Logic: "and"})

这里是如何使用它的示例.

Here is an example of how you could use it.

 filterMenuInit: function(e) {
   //when filter menu opens toss it cause its lame!
   e.container.html("
     <input name='radio' type='radio' checked='checked' value='Clear'>Clear</input>  
     <input name='radio' type='radio' value='London'>London</input>
     <input name='radio' type='radio' value='Seattle'>Seattle</input>
   "); 



  $("input[type=radio]").click(function(){
    if($(this).val() != "Clear") {
      $(".k-grid").data("kendoGrid").dataSource.filter({filters: [{field: "City", operator: "eq", value: $(this).val()}], Logic: "and"})
    }else {
      $(".k-grid").data("kendoGrid").dataSource.filter({})
    }
   });
  }

和更新的JSbin: http://jsbin.com/qehugexo/3/edit

And an updated JSbin: http://jsbin.com/qehugexo/3/edit

这篇关于Kendo UI过滤器上的布尔值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！