如何在kendo树视图中单击时检索radiobutton的值和id?

时间:2015-02-08 12:25:02

标签: kendo-ui kendo-treeview

@(
                 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'>&nbsp;#:item.text #</input>
            </script>
  

上面的代码是一个剑道树视图,其中包含针对每个项目的单选按钮列表。   我需要检索单选按钮的名称和ID。

     
    

另外,我需要将单选按钮的值绑定到模型以进行检索。

  

1 个答案:

答案 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>