Question

我试图将单击事件绑定到Kendo工具栏中的按钮。我正在使用模板创建按钮。我正在使用带有角的Kendo Jquery。任何帮助将不胜感激。

到目前为止，我已经使用Kendo Jquery文档尝试过此操作：

<!DOCTYPE html>
<html>

<head>
    <base href="https://demos.telerik.com/kendo-ui/toolbar/index">
    <style>
        html {
            font-size: 14px;
            font-family: Arial, Helvetica, sans-serif;
        }
    </style>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.default-v2.min.css" />

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

</head>

<body>
    <div id="example">
        <div class="demo-section k-content wide">
            <div id="toolbar"></div>
        </div>
        <script>
            $(document).ready(function () {
                $("#toolbar").kendoToolBar({
                    items: [
                        {
                            template: "<a href='' class='k-icon-text-button k-button k-button-icontext k-toolbar-first-visible'><span class='k-icon k-i-save'></span>Save</a>"
                        },
                        {
                            template: "<a href='' class='k-icon-text-button k-button k-button-icontext k-toolbar-first-visible'><span class='k-icon  k-i-arrows-swap'></span>Top/Bottom</a>"
                        },
                        {
                            template: "<a href='' class='k-icon-text-button k-button k-button-icontext k-toolbar-first-visible'><span class='k-icon k-i-pencil'></span>Edit</a>"
                        },
                        {
                            template: "<a href='' class='k-icon-text-button k-button k-button-icontext k-toolbar-first-visible'><span class='k-icon k-i-calendar'></span>Schedule</a>",
                            click: onButtonClick()
                        },

                        {
                            type: "splitButton",
                            text: "Download",
                            menuButtons: [{
                                    text: "PDF",
                                    icon: "k-i-pdf"
                                },
                                {
                                    text: "EXCEL",
                                    icon: "k-i-excel"
                                }
                            ]
                        },

                        {
                            type: "button",
                            text: "Action",
                            overflow: "always"
                        },
                        {
                            type: "button",
                            text: "Another Action",
                            overflow: "always"
                        },
                        {
                            type: "button",
                            text: "Something else here",
                            overflow: "always"
                        }
                    ]
                });

                $("#dropdown").kendoDropDownList({
                    optionLabel: "Paragraph",
                    dataTextField: "text",
                    dataValueField: "value",
                    dataSource: [{
                            text: "Heading 1",
                            value: 1
                        },
                        {
                            text: "Heading 2",
                            value: 2
                        },
                        {
                            text: "Heading 3",
                            value: 3
                        },
                        {
                            text: "Title",
                            value: 4
                        },
                        {
                            text: "Subtitle",
                            value: 5
                        }
                    ]
                });
            });

            function onButtonClick() {
                alert('clicked')
            }
        </script>
    </div>
</body>

</html>

Dojo相同：https://dojo.telerik.com/@amitdwivedi/uDOFeWev

Answer 1

根据Telerik Docs for the toolbar Click function，单击事件处理程序仅适用于button或splitButton类型的工具栏项目。但是，items with a template do not have a type。

因此，您需要使用基本按钮而不是模板（然后您可以使用Telerik点击处理程序），或者将点击处理程序放置在模板本身中，如下所示：

$(document).ready(function() {
  $("#toolbar").kendoToolBar({
    items: [
      {
        template: "<a href='' onclick='onButtonClick()' class='k-icon-text-button k-button k-button-icontext k-toolbar-first-visible'><span class='k-icon k-i-save'></span>Save</a>"
        //                    ^^^^^^^^^^^^^^^^^^^^^^^^^
      }
    ]
  });
});

function onButtonClick(){
  alert('clicked')
}

Dojo示例：https://dojo.telerik.com/UniqiHuF/4

将Click事件绑定到Kendo工具栏

1 个答案: