我有一个kendo网格工作正常，但我想显示列的所有单元格中的下拉列表，即“安全操作”列单元格。无论你是编辑还是不编辑，所以用户都知道这是在那个单元格中的下拉列表。我不希望在单击单元格时出现类似于在剑道的this演示站点中提及的下拉列表。
我的代码如下：
HTML：
<div id="example" class="k-content">
<div id="clientsDb">
<div id="grid" style="top:0px;width:100%;height: 380px">
</div>
</div>
CSS：
<style scoped>
#clientsDb {
width: 1400px;
height: 310px;
margin: 0 auto;
padding: 0 4px 0 4px;
background: url('../kendo/content/web/grid/clientsDb.png') no-repeat 0 0;
}
</style>
JS：
<script>
function kendoGridExecute(data){
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
data: data.items,
autoSync: true,
schema: {
model: {
fields: {
Type: { editable: false, nullable: true },
Penalty:{ editable: false, nullable: true },
Init_r:{ editable: false, nullable: true },
Opt_r:{ editable: false, nullable: true },
Change_r:{editable: false, nullable: true},
Action:{defaultValue : {text: "No Action", value: "No Action" } }
}
}
}
},
groupable: true,
sortable: true,
scrollable: true,
filterable: true,
editable : true,
columns: [ {
field : "Type",
width : 90,
title : "Type"
} , {
field : "Penalty",
width : 120,
title : "Penalty"
} , {
width : 50,
field : "Bmk",
title : "Abs. Bmk",
template:"<input class='k-textbox' data-bind='value: Bmk' style='width:50px'>"
} , {
width : 50,
field : "Init_r",
title : "Rel. Init"
} , {
width : 50,
field : "Opt_r",
title : "Rel. Opt"
} , {
title : "Rel. Chg",
field : "Change_r",
width : 50
},{
title : "Min",
field : "Min",
width: 50,
template:"<input class='k-textbox' data-bind='value: Min' style='width:50px'>"
},{
title : "Max",
field : "Max",
width : 50,
template:"<input class='k-textbox' data-bind='value: Max' style='width:50px'>"
},{
field : "Scale",
title : "Scale",
width : 50,
template:"<input class='k-textbox' data-bind='value: Scale' style='width:50px'>"
},
{
field : "Init",
title : "Abs. Init",
width : 50
},
{
field : "Opt",
title : "Abs. Opt",
width : 50
},
{
field : "Action",
title : "Security Action",
width : 100,
editor: securityActionDropDownEditor,
template: "#=Action#"
}
],
batch: true,
dataBound: function() {
var rows = this.tbody.children();
var dataItems = this.dataSource.view();
for (var i = 0; i < dataItems.length; i++) {
kendo.bind(rows[i], dataItems[i]);
}
}
});
});
}
function securityActionDropDownEditor(container, options) {
$('<input required data-text-field="text" data-value-field="value" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
dataSource: [
{ text: "No Action", value: "No Action" },
{ text: "DNS", value: "DNS" },
{ text: "DNB", value: "DNB" },
{ text: "DNT", value: "DNT" }
],
autoBind: false,
index:0
});
console.log(options);
console.log(options.field);
}
</script>
答案 0 :(得分：4)
您可以使用客户端模板和一些自定义逻辑来实现它，以便在Grid的dataBound事件发生时初始化DropDownLists。
假设您对该列有以下临时性：
template: "<input value='#= PositionID #' data-bind='value:PositionID' data-role='dropdownlist' data-source='options' data-text-field='Text' data-value-field='Value' />"
其中options是一个全局变量，包含要用作dataSource的集合
var options = [{Text:"T1",Value:"V1"}...]
然后在Grid的dataBound事件上，您可以将DropDownList绑定到该行的underling模型，如下所示：
function onGridDataBound() {
var grid = this;
this.tbody.find('tr').each(function () {
var item = grid.dataItem(this);
kendo.bind(this, item);
})
}