Javascript 剑道网格过滤器将组合框与column.values一起使用，而不是使用下拉列表

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

---

看一看。我希望看到的是过滤器（在“类别”列上）显示组合框而不是下拉列表，但仍然使用表中代码的值来显示网格中的数据，但它似乎不起作用。

正如您所说，它不适用于

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

});

var类别=[{
“价值”：1，
“文本”：“饮料”
}, {
“价值”：2，
“文本”：“调味品”
}, {
“价值”：3，
“文本”：“糖果”
}, {
“价值”：4，
“文本”：“乳制品”
}, {
“价值”：5，
“文本”：“谷物/谷物”
}, {
“价值”：6，
“正文”：“肉/家禽”
}, {
“价值”：7，
“文本”：“产生”
}, {
“价值”：8，
“文本”：“海鲜”
}];
函数getCategory（catID）{
return$.grep（类别、函数（n、i）{
返回n.value==catID；
})[0]。文本；
}
$（文档）.ready（函数（）{
var dataSource=new kendo.data.dataSource({
页面大小：20，
数据：产品，
自动同步：对，
模式：{
型号：{
id:“产品id”，
字段：{
ProductID:{
可编辑：false，
可为空：真
},
产品名称：{
验证：{
必填项：true
}
},
类别ID：{
字段：“CategoryID”，
键入：“数字”，
默认值：1
},
单价：{
键入：“数字”，
验证：{
要求：正确，
min:1
}
}
}
}
}
});
var rowTemplateString=''+
“#：产品名称”+
“#：getCategory（CategoryID）#”+
“#：单价”+”+
'';
var altRowTemplateString=rowTemplateString.replace（'tr class=“”，'tr class=“k-alt”）；
var commonSettings={
数据源：数据源，
可过滤：正确，
分组：对，
pageable:对，
身高：430，
工具栏：[“创建”]，
栏目：[{
字段：“产品名称”，
标题：“产品名称”
},
{
字段：“CategoryID”，
宽度：“150px”，
//值：类别，
dataTextField:“文本”，
dataValueField:“值”，
数据源：类别，
可过滤：{
ui：功能（元素）{
element.kendoComboBox({
dataTextField:“文本”，
dataValueField:“值”，
数据源：类别
});
}
},
标题：“类别”
},
{
字段：“单价”，
标题：“单价”，
格式：“{0:c}”，
宽度：“150像素”
},
{
命令：“摧毁”，
标题：“，
宽度：“110px”
}
],
可编辑：真
};
$（“#网格”）.kendoGrid（$.extend({
rowTemplate:rowTemplateString，
altRowTemplate:altRowTemplateString
}，commonSettings））；
});

注意：在这个演示中，我没有尝试处理Delete列的模板。我只是把它留白了

---

这是Dojo

根据您的演示，试试这个

变量类别=[{
“价值”：1，
“文本”：“饮料”
},{
“价值”：2，
“文本”：“调味品”
},{
“价值”：3，
“文本”：“糖果”
},{
“价值”：4，
“文本”：“乳制品”
},{
“价值”：5，
“文本”：“谷物/谷物”
},{
“价值”：6，
“正文”：“肉/家禽”
},{
“价值”：7，
“文本”：“产生”
},{
“价值”：8，
“文本”：“海鲜”
}];
$（文档）.ready（函数（）{
var dataSource=new kendo.data.dataSource({
页面大小：20，
数据：产品，
自动同步：对，
模式：{
型号：{
id:“产品id”，
字段：{
ProductID:{可编辑：false，可空：true}，
产品名称：{验证：{必需：true}}，
CategoryID:{字段：“CategoryID”，类型：“number”，默认值：1}，
单价：{type:“number”，验证：{required:true，min:1}
}
}
}
});
$（“#网格”）.kendoGrid({
数据源：数据源，
可过滤：正确，
分组：对，
pageable:对，
身高：430，
工具栏：[“创建”]，
栏目：[
{字段：“产品名称”，标题：“产品名称”}，
{ 
字段：“CategoryID”，
宽度：“150px”，
值：类别，
编辑器：函数（容器、选项）
{
$('').
</script>
    <div id="example" class="k-content">
        <div id="grid"></div>

        <script>               
            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"
            }];

            $(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} }
                            }
                        }
                    }
                });

                $("#grid").kendoGrid({
                    dataSource: dataSource,
                    filterable: true,
                    groupable: true,
                    pageable: true,
                    height: 430,
                    toolbar: ["create"],
                    columns: [
                        { field: "ProductName", title: "Product Name" },
                        { 
                            field: "CategoryID",
                            width: "150px",
                            values: categories,
                            editor:function(container,options)
                            {
                                $('<input name-"' + options.fields +'"/>').
                              appendTo(container).kendoComboBox({
                                autoBind:false,
                                dataTextField:"text",
                                dataValueFiled:"value",
                                dataSource:new kendo.data.DataSource({
                                  schema:{
                                    model:{
                                      id:"value",
                                      fields:{
                                        text:{},
                                        value:{}
                                      }
                                    }
                                  },
                                  data:categories
                                })
                              })
                            },
                            title: "Category" 
                        },
                        { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "150px" },
                        { command: "destroy", title: " ", width: "110px"}],
                    editable: true
                });
            });
        </script>