我正在尝试将单击事件绑定到我在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>
根据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')
}