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>