Kendo Grid: How to sort (and filter) a column bound to a simple json object

Question

I have seen a number of questions on sorting, but I couldn't find any for my very simple case.

I have taken the online example (where if I add the sortable and filterable, they don't work on the category field either), and modified it very slightly, just to use very simple local json data (to make it eaier to see what I am working with while learning the grid.

So, looking at the category field I want to sort and filter, in my columns definition I have ....

 columns: [
  {
    ...
  {
    field: "Category",
    title: "Category",
    width: "180px",        
    editor: categoryDropDownEditor,
    template: "#=Category.description#"
  },

and in the data source, the category field consists on s simple json object with 2 fields code and description (where code it to be the value field, and description is what to display) ...

var gridData = [
{
....
ProductID : 1,
ProductName : "Chai",
Category : {
    code : '1',
    description : "Beverages",

 },
...
];

I have added the sortable, and filterable properties to the grid however the category field show the sort arrows (which toggle when clicked), but the column data does not sort or filter.

How do I will the sort and filter to look at the description field to carry out these operations?

Note I also have a combo cell editor attached

function createCombo(container, options, data) {
  var input = $('<input name="' + options.field + '" />')
  input.appendTo(container)
  var combobox = input.kendoComboBox({
    autoBind: true,
    filter: "contains",
    placeholder: "select...",
    suggest: true,
    dataTextField: "description",
    dataValueField: "code",
    dataSource: data,
  });

where the data is of form

[ 
  {code: 'code1', description: 'desc1'},
  {code: 'code2', description: 'desc2'},
]

So I would need the combo to also populate the field with the correct value.

Thanks in advance for any help!

Answer 1

  <script>

    var gridData = [
{
    ProductID: 1,
    ProductName: "Chai",
    Category: {
        code: '1',
        description: "beverages",

    }
},
 {
     ProductID: 1,
     ProductName: "bhai",
     Category: {
         code: '1',
         description: "aceverages",

     }
 },
  {
      ProductID: 1,
      ProductName: "dhai",
      Category: {
          code: '1',
          description: "zeverages",

      }
  }
    ];

    $(document).ready(function () {
        $("#grid").kendoGrid({
            dataSource: gridData,
            height: 550,
            groupable: true,
            sortable: true,
            pageable: {
                refresh: true,
                pageSizes: true,
                buttonCount: 5
            },
            columns: [{
                field: "ProductID",
                title: "Contact Name",
                width: 200
            }, {
                field: "ProductName",
                title: "Contact Title"
            }, {
                field: "Category.description",
                title: "Category",
                width: "180px",
                template: "#=Category.description#"
            }]
        });
    });
</script>