Kendo UI filter on boolean

Question

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

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?

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

Any help would be appreciated.

Thanks

Answer 1

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();
}

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

---

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({})
    }
   });
  }

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