logo标签列表

将点击事件绑定到Kendo工具栏

javascriptjqueryangularkendo-uikendo-ui-angular2
7

我正在尝试将点击事件绑定到我在Kendo工具栏中拥有的按钮上。我使用模板创建按钮。 我正在使用带有Angular的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

1个回答
6
根据 Telerik 工具栏 Click 函数，点击事件处理程序仅适用于类型为 button 或 splitButton 的工具栏项目。但是，具有模板的项目没有类型。
因此，您需要使用基本按钮而不是模板（然后可以使用 Telerik 的 click 处理程序），或将 click 处理程序放在模板本身中，如下所示：
$(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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接