@(
Html.Kendo().TreeView()
.Name("x")
.TemplateId("treeview-template")
.BindTo(Model.x)
)
<script id="treeview-template" type="text/kendo-ui-template">
<input type='radio' data-bind="value: textValue,checked:checkedvalue" name='y'> #:item.text #</input>
</script>
上面的代码是一个剑道树视图,其中包含针对每个项目的单选按钮列表。 我需要检索单选按钮的名称和ID。
另外,我需要将单选按钮的值绑定到模型以进行检索。
答案 0 :(得分:0)
您可以使用树视图的不同事件,例如选择,更改。以下是其中一个例子。
<script>
$(document).ready(function() {
function onSelect(e) {
kendoConsole.log("Selecting: " + this.text(e.node));
}
function onCheck(e) {
kendoConsole.log("Checkbox changed :: " + this.text(e.node));
}
function onChange(e) {
kendoConsole.log("Selection changed");
}
function onCollapse(e) {
kendoConsole.log("Collapsing " + this.text(e.node));
}
function onExpand(e) {
kendoConsole.log("Expanding " + this.text(e.node));
}
function onDragStart(e) {
kendoConsole.log("Started dragging " + this.text(e.sourceNode));
}
function onDrag(e) {
kendoConsole.log("Dragging " + this.text(e.sourceNode));
}
function onDrop(e) {
kendoConsole.log(
"Dropped " + this.text(e.sourceNode) +
" (" + (e.valid ? "valid" : "invalid") + ")"
);
}
function onDragEnd(e) {
kendoConsole.log("Finished dragging " + this.text(e.sourceNode));
}
function onNavigate(e) {
kendoConsole.log("Navigate " + this.text(e.node));
}
$("#treeview").kendoTreeView({
checkboxes: true,
dataSource: [
{ text: "Furniture", expanded: true, items: [
{ text: "Tables & Chairs" },
{ text: "Sofas" },
{ text: "Occasional Furniture" }
] },
{ text: "Decor", items: [
{ text: "Bed Linen" },
{ text: "Curtains & Blinds" },
{ text: "Carpets" }
] },
{ text: "Storage" }
],
select: onSelect,
check: onCheck,
change: onChange,
collapse: onCollapse,
expand: onExpand,
dragAndDrop: true,
/* drag & drop events */
dragstart: onDragStart,
drag: onDrag,
drop: onDrop,
dragend: onDragEnd,
navigate: onNavigate
});
});
</script>