Kendo网格过滤器使用与column.values组合框，而不是下拉列表

Question

我试图让Kendo的网格显示过滤器使用组合框，而不是与下拉列表使用值时。我的意思是，在网格列数组上，每列可以给出数据库中每个可能条目的值列表（具有文本和值属性的对象），而不是显示代码，它显示可识别的名称或文本而不是代码。问题是，无论何时我根据列指定值，筛选器都会恢复为固定的条件列表和下拉列表，我不想这样做。

查看example of what I mean here。我想看到的是过滤器（在Category列上）显示组合框而不是下拉列表，但仍然使用表中代码的值显示在网格中的数据中，但是它似乎没有工作。

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

Answer 2

尝试这一个，根据您的演示here

</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>