how to create a custom dropdown filter in kendo ui grid with grouped values

Question

I have a column with values like val1,val2,val3...val10 and each value belongs to a category/group say

{
  "group1": [
    "val1",
    "val6",
    "val9"
  ],
  "group2": [
    "val3",
    "val5",
    "val8"
  ]
}

and I need to create a kendo grid drop down filter and the dropdown will contain group names and on select it will filter with the values the group has. I did a few research and found this thread but I want to filter with category.

Answer 1

It will be hard to display data like you said in one grid column. Probably you will transform it anyway. So create array like:

var data = [
{
    value: "val1",
    group: "group1"
},{
    value: "val6",
    group: "group1"
},{
    value: "val9",
    group: "group1"
},{
    value: "val3",
    group: "group2"
},{
    value: "val5",
    group: "group2"
},{
    value: "val9",
    group: "group2"
}];

Then define column like:

{
    title: "Value",
    template: "#=value#",
    field: "group"
}

Now you will display value and have assigned group as field in this column so group will be property you will filter. Now you just need to implement custom filter with drop down. You have example on kendo site: http://demos.telerik.com/kendo-ui/grid/filter-menu-customization

Check city column filter.