Kendo Grid 过滤器使用带有 column.values 的组合框而不是下拉列表 [英] Kendo Grid filter to use combo box with column.values rather than drop down list

问题描述

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

I'm trying to get Kendo's Grid to show a filter using a combo box rather than a drop down list when used with values. What I mean is, on the grid columns array, each column can be given a list of values (objects with text and value properties) for each possible entry in the database, thereby rather than showing a code, it shows a recognisable name or text instead of the code. The problem is that whenever I specify values against the column, the filter reverts to a fixed list of criteria and a drop-down list, which I don't want.

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

See an example of what I mean here. What I'd like to see is the filter (on the Category column) to show a combo-box rather than a drop down list, but still use the values against the codes in the table to show in the data in the grid, but it doesn't seem to work.

推荐答案

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

As you say it doesn't work with the values property, so one approach would be to set up a custom row template and use a lookup function on category ID and replace it with the corresponding text:

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

});

注意:在这个演示中，我没有尝试处理删除列的模板.我只是把它留空.

Note: In this demo I haven't tried to handle the template for the Delete column. I just left it blank.

这是 Dojo http://dojo.telerik.com/oFulu

这篇关于Kendo Grid 过滤器使用带有 column.values 的组合框而不是下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！