可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):
问题:
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.
回答1:
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.
Here's the Dojo http://dojo.telerik.com/oFulu
回答2:
Try this One,According to your demo 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>
