将点击事件绑定到剑道工具栏
Posted
技术标签:
【中文标题】将点击事件绑定到剑道工具栏【英文标题】：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
【问题讨论】：
【参考方案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
【讨论】：
以上是关于将点击事件绑定到剑道工具栏的主要内容，如果未能解决你的问题，请参考以下文章