New to Kendo UI for jQuery? Start a free 30-day trial

Actions

configuration

An array of the action buttons

actions

Array

<span id="target">
    Some Content
</span>

<script>
    $(document).ready(function() {
      $("#target").kendoPopover({
        showOn: "click",
        header: "Header text",
        body: "Content description",
        actionsLayout: "center",
        actions: [{ text: "update", click: function() { console.log("update"); }}, { text: "create", click: function() { console.log("create"); }}]
      });
    });
</script>

actions.click

Function

A handler function to be called when the action button is clicked

<span id="target">
    Some Content
</span>

<script>
    $(document).ready(function() {
      $("#target").kendoPopover({
        showOn: "click",
        header: "Header text",
        body: "Content description",
        actionsPosition: "center",
        actions: [{ text: "update", click: function(e) { console.log(e.target.text()); }}, { text: "create", click: function(e) { console.log(e.target.text()); }}]
      });
    });
</script>

actions.icon

String

The name of the icon to display inside the button.

<span id="target">
    Some Content
</span>

<script>
    $(document).ready(function() {
      $("#target").kendoPopover({
        showOn: "click",
        header: "Header text",
        body: "Content description",
        actionsLayout: "center",
        actions: [{ text: "refresh", icon: "arrow-rotate-cw", iconClass: "refresh-icon" }, { icon: "pencil", iconClass: "edit-icon" }]
      });
    });
</script>

actions.iconClass

String

The CSS class that will be added to the icon element inside the button.

<span id="target">
    Some Content
</span>

<script>
    $(document).ready(function() {
      $("#target").kendoPopover({
        showOn: "click",
        header: "Header text",
        body: "Content description",
        actionsLayout: "center",
        actions: [{ text: "refresh", icon: "arrow-rotate-cw", iconClass: "refresh-icon" }, { icon: "pencil", iconClass: "edit-icon" }]
      });
    });
</script>

actions.text

String

The text displayed in the action button

<span id="target">
    Some Content
</span>

<script>
    $(document).ready(function() {
      $("#target").kendoPopover({
        showOn: "click",
        header: "Header text",
        body: "Content description",
        actionsLayout: "center",
        actions: [{ text: "update", click: function() { console.log("update"); }}, { text: "create", click: function() { console.log("create"); }}]
      });
    });
</script>