Question

试图在网格视图模板中实现单选按钮。编辑时，只需调用具有单选按钮的自定义模板即可。请参考以下代码或 https://dojo.telerik.com/eCOHOqiS

单击“编辑”按钮以弹出窗口，然后尝试选择“是”单选按钮。但将选择否单选按钮。不知道为什么这种行为。 “ id =” popup_editor“是自定义模板，已添加。由于不是授权用户，因此无法在telerik论坛中发布。感谢您的帮助。

<!DOCTYPE html>
<html>
<head>
    <base href="https://demos.telerik.com/kendo-ui/grid/editing-popup">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.material.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.material.mobile.min.css" />

    <script src="https://kendo.cdn.telerik.com/2018.2.620/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2018.2.620/js/kendo.all.min.js"></script>


</head>
<body>
        <div id="example">
            <div id="grid"></div>

            <script>
                $(document).ready(function () {
                    var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service",
                        dataSource = new kendo.data.DataSource({
                            transport: {
                                read:  {
                                    url: crudServiceBaseUrl + "/Products",
                                    dataType: "jsonp"
                                },
                                update: {
                                    url: crudServiceBaseUrl + "/Products/Update",
                                    dataType: "jsonp"
                                },
                                destroy: {
                                    url: crudServiceBaseUrl + "/Products/Destroy",
                                    dataType: "jsonp"
                                },
                                create: {
                                    url: crudServiceBaseUrl + "/Products/Create",
                                    dataType: "jsonp"
                                },
                                parameterMap: function(options, operation) {
                                    if (operation !== "read" && options.models) {
                                        return {models: kendo.stringify(options.models)};
                                    }
                                }
                            },
                            batch: true,
                            pageSize: 20,
                            schema: {
                                model: {
                                    id: "ProductID",
                                    fields: {
                                        ProductID: { editable: false, nullable: true },
                                        ProductName: { validation: { required: true } },
                                        UnitPrice: { type: "number", validation: { required: true, min: 1} },
                                        Discontinued: { type: "boolean" },
                                        UnitsInStock: { type: "number", validation: { min: 0, required: true } }
                                    }
                                }
                            }
                        });

                    $("#grid").kendoGrid({
                        dataSource: dataSource,
                        pageable: true,
                        height: 550,
                        toolbar: ["create"],
                        columns: [
                            { field:"ProductName", title: "Product Name" },
                            { field: "UnitPrice", title:"Unit Price", format: "{0:c}", width: "120px" },
                            { field: "UnitsInStock", title:"Units In Stock", width: "120px" },
                            { field: "Discontinued", width: "120px", editor: customBoolEditor },
                            { command: ["edit", "destroy"], title: "&nbsp;", width: "250px" }],
                        editable: {
                            mode: "popup",
                            template: kendo.template($("#popup_editor").html())
                        }
                    });
                });

                function customBoolEditor(container, options) {
                    var guid = kendo.guid();
                    $('<input class="k-checkbox" id="' + guid + '" type="checkbox" name="Discontinued" data-type="boolean" data-bind="checked:Discontinued">').appendTo(container);
                    $('<label class="k-checkbox-label" for="' + guid + '"></label>').appendTo(container);
                }
            </script>
          <script id="popup_editor" type="text/x-kendo-template">
    <!-- START TABSTRIP-->
       <div class="popup-form-section left-alignment-padding radio-top-padding">
                            <div class="tax-lbl-label"><label class="txtBox-label" id="tax-edit-lbl">Taxable?</label></div>
                            <div class="tax-lbl-radio">
                                <ul class="fieldlist">
                                    <li>
                                        <input type="radio" name="taxedit" id="taxyes-edit" class="k-radio">
                                        <label class="k-radio-label" for="taxyes-edit">Yes</label>
                                        <input type="radio" name="taxedit" id="taxno-edit" class="k-radio">
                                        <label class="k-radio-label" for="taxno-edit">No</label>
                                    </li>
                                </ul>
                            </div>
                        </div>

    <!-- START TABSTRIP-->
</script>
        </div>


</body>
</html>

Answer 1

您需要为单选按钮分配不同的值：

<li>
    <input type="radio" value="0" name="taxedit" id="taxyes-edit" class="k-radio">
    <label class="k-radio-label" for="taxyes-edit">Yes</label>
    <input type="radio" value="1" name="taxedit" id="taxno-edit" class="k-radio">
    <label class="k-radio-label" for="taxno-edit">No</label>
</li>

编辑网格上的Kendo UI网格单选按钮问题

1 个答案: