将点击事件绑定到剑道工具栏答案

【问题标题】：Bind Click Event to Kendo ToolBar将点击事件绑定到剑道工具栏
【发布时间】：2020-03-10 03:36:18
【问题描述】：

我正在尝试将单击事件绑定到我在剑道工具栏中的按钮。我正在使用模板创建按钮。我正在使用带有角度的 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>

同样的道场：https://dojo.telerik.com/@amitdwivedi/uDOFeWev

【问题讨论】：

标签： javascript jquery angular kendo-ui kendo-ui-angular2

【解决方案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')
}

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

【讨论】：