Kendo Grid：如何对绑定到简单 json 对象的列进行排序（和过滤）

Question

我看到了很多关于排序的问题，但对于我非常简单的案例，我找不到任何问题。

我采用了在线example（如果我添加可排序和可过滤，它们也不适用于类别字段），并对其进行了非常小的修改，只是为了使用非常简单的本地json数据（制作在学习网格的同时更容易看到我在做什么。

所以，查看我想要排序和过滤的类别字段，在我的列定义中我有 ....

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

在数据源中，类别字段由一个简单的 json 对象组成，包含 2 个字段 code 和 description（其中 code 它是 value 字段，而 description 是要显示的内容）...

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

 },
...
];

我已将可排序和可过滤属性添加到网格中，但是类别字段显示排序箭头（单击时会切换），但列数据不会排序或过滤。

我如何将排序和过滤来查看描述字段来进行这些操作？

请注意，我还附加了一个组合单元格编辑器

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

数据的格式

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

所以我需要组合来使用正确的值填充字段。

提前感谢您的帮助！

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>