剑道网格过滤器使用组合框与列.值,而不是下拉列表
Kendo Grid filter to use combo box with column.values rather than drop down list
我试图让剑道的网格显示一个过滤器使用组合框,而不是下拉列表时使用的值。我的意思是,在网格列数组中,可以为每个列提供数据库中每个可能条目的值列表(具有文本和值属性的对象),因此,它不是显示代码,而是显示可识别的名称或文本,而不是代码。问题是,每当我针对列指定值时,过滤器就会恢复到一个固定的条件列表和一个下拉列表,这是我不想要的。
请看我这里所指的一个例子。我想看到的是过滤器(在Category列上)显示一个组合框而不是一个下拉列表,但仍然使用表中代码的值来显示网格中的数据,但它似乎不起作用。
正如您所说,它不适用于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));
});
注意:在这个演示中,我没有尝试处理Delete列的模板。
这是Dojo http://dojo.telerik.com/oFulu
试试这个,根据你在这里的演示
</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>
相关文章:
- KendoUI网格行过滤器,带有布尔值下拉列表
- 单击辐射网格过滤器时不会打开下拉列表
- 剑道网格编辑内联下拉列表不显示
- 在调用方法来填充详细信息网格之前,如何从填充的下拉列表中获取信息
- 单元格值未在使用自定义下拉列表编辑器的剑道 UI 网格中正确显示
- 网格值在 Knockout JS 中更改下拉列表时未更新
- 基于KendoUI网格内的服务数据的静态下拉列表值选择
- 剑道 UI Web 网格 - Popup_Editor模板 - 下拉列表
- 带有下拉列表的剑道 UI 网格
- 我可以在ui网格中使用下拉列表来填充数据库中的数据吗
- 剑道网格自定义编辑器下拉列表;t反映选择
- 如何在剑道UI网格中添加下拉列表
- 剑道网格和剑道下拉列表
- 使用下拉列表编辑器的剑道网格-线编辑(编辑自定义编辑器)
- 忽略包含下拉列表的网格视图单元格
- 剑道下拉列表在网格中不绑定,直到选择之后
- ExtJs - Javascript -网格中的组合框(单元格编辑插件)-网格/窗口后面的下拉列表
- 如何使用下拉列表过滤剑道UI MVC网格
- 可编辑网格下拉列表的值不能从外部下拉列表更改
- 剑道网格过滤器使用组合框与列.值,而不是下拉列表