绑定到Kendo工具栏的单击事件

问题描述 投票:0回答:1

我正在尝试将单击事件绑定到我在Kendo工具栏中的按钮。我正在使用模板创建按钮。由于Ken Bar Angular中没有工具栏小部件,因此我将Kendo Jquery与angular一起使用。任何帮助将不胜感激。

到目前为止,我已经使用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

javascript jquery angular kendo-ui kendo-ui-angular2
1个回答
1
投票

根据Telerik Docs for the toolbar Click function,单击事件处理程序仅适用于buttonsplitButton类型的工具栏项目。但是,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

© www.soinside.com 2019 - 2024. All rights reserved.