Kendo Grid过滤器使用带有column.values而不是下拉列表的组合框

Question

我正在尝试让Kendo的Grid使用组合框而不是下拉列表来显示过滤器与值一起使用时.我的意思是,在网格列数组中,每列可以为数据库中的每个可能条目提供值列表(具有文本和值属性的对象),从而不显示代码,它显示可识别的名称或文本而不是代码.问题是,每当我针对列指定值时,过滤器将恢复为固定的条件列表和下拉列表,这是我不想要的.

看一个我在这里的意思的例子.我想看到的是过滤器(在"类别"列上)显示组合框而不是下拉列表,但仍然使用表中代码的值显示在网格中的数据中,但是它似乎不起作用.

Answer 1

正如您所说，它不适用于该values属性，因此一种方法是设置自定义行模板并在类别 ID 上使用查找函数并将其替换为相应的文本：

var categories = [{
  "value": 1,
  "text": "Beverages"
}, {
  "value": 2,
  "text": "Condiments"
}, {
  "value": 3,
  "text": "Confections"
}, {
  "value": 4,
  "text": "Dairy Products"
}, {
  "value": 5,
  "text": "Grains/Cereals"
}, {
  "value": 6,
  "text": "Meat/Poultry"
}, {
  "value": 7,
  "text": "Produce"
}, {
  "value": 8,
  "text": "Seafood"
}];

function getCategory(catID) {
  return $.grep(categories, function(n, i) {
    return n.value === catID;
  })[0].text;
}

$(document).ready(function() {
  var dataSource = new kendo.data.DataSource({
    pageSize: 20,
    data: products,
    autoSync: true,
    schema: {
      model: {
        id: "ProductID",
        fields: {
          ProductID: {
            editable: false,
            nullable: true
          },
          ProductName: {
            validation: {
              required: true
            }
          },
          CategoryID: {
            field: "CategoryID",
            type: "number",
            defaultValue: 1
          },
          UnitPrice: {
            type: "number",
            validation: {
              required: true,
              min: 1
            }
          }
        }
      }
    }
  });

  var rowTemplateString = '<tr data-uid="#: uid #">' +
    '<td>#: ProductName #</td>' +
    '<td>#: getCategory(CategoryID) #</td>' +
    '<td>#: UnitPrice #</td>' + '<td></td>' +
    '</tr>';

  var altRowTemplateString = rowTemplateString.replace('tr class="', 'tr class="k-alt ');

  var commonSettings = {
    dataSource: dataSource,
    filterable: true,
    groupable: true,
    pageable: true,
    height: 430,
    toolbar: ["create"],
    columns: [{
        field: "ProductName",
        title: "Product Name"
      },
      {
        field: "CategoryID",
        width: "150px",
        //values: categories,
        dataTextField: "text",
        dataValueField: "value",
        dataSource: categories,
        filterable: {
          ui: function(element) {
            element.kendoComboBox({
              dataTextField: "text",
              dataValueField: "value",
              dataSource: categories
            });
          }
        },
        title: "Category"
      },
      {
        field: "UnitPrice",
        title: "Unit Price",
        format: "{0:c}",
        width: "150px"
      },
      {
        command: "destroy",
        title: " ",
        width: "110px"
      }
    ],
    editable: true
  };

  $("#grid").kendoGrid($.extend({
    rowTemplate: rowTemplateString,
    altRowTemplate: altRowTemplateString
  }, commonSettings));

});

注意：在此演示中，我没有尝试处理“删除”列的模板。我只是将其留空。

这里是道场http://dojo.telerik.com/oFulu