actionClick

Fired when an action button is clicked inside an attachment template or when a suggestedAction is clicked.

Event Data

e.sender kendo.ui.Chat

The widget instance which fired the event.

e.text String

The text value of the clicked action button.

Example - subscribing to the actionClick event during initialization

<p>Click on one of the buttons to see the value</p>
<div id="chat"></div>
<script>
$("#chat").kendoChat({
    actionClick: function(e) {
/* The result can be observed in the DevTools(F12) console of the browser. */
        console.log("Action Clicked: " + e.text);
    }
});

var chat = $("#chat").data("kendoChat");

chat.renderAttachments({
    attachments: [{
        contentType: "heroCard",
        content: {
            title: "Attachment Title",
            subtitle: "Attachment Subtitle",
            buttons: [{
                title: "button 1",
                value: "value 1",
            }, {
                title: "button 2",
                value: "value 2",
            }]
        }
    }],
    attachmentLayout: "carousel"
}, chat.getUser());
</script>

Example - subscribing to the actionClick event after initialization

<p>Click on one of the buttons to see the value</p>
<div id="chat"></div>
<script>
function chat_actionClick(e) {
/* The result can be observed in the DevTools(F12) console of the browser. */
    console.log("Action Clicked: " + e.text);
}
$("#chat").kendoChat();

var chat = $("#chat").data("kendoChat");
chat.bind("actionClick", chat_actionClick);

chat.renderAttachments({
    attachments: [{
        contentType: "heroCard",
        content: {
            title: "Attachment Title",
            subtitle: "Attachment Subtitle",
            buttons: [{
                title: "button 1",
                value: "value 1",
            }, {
                title: "button 2",
                value: "value 2",
            }]
        }
    }],
    attachmentLayout: "carousel"
}, chat.getUser());
</script>

Example - displaying the actionClick event triggered by the suggestedAction click

<p>Click on one of the buttons to see the value</p>
<div id="chat"></div>
<script>
$("#chat").kendoChat({
    actionClick: function(e) {
/* The result can be observed in the DevTools(F12) console of the browser. */
        console.log("Action Clicked: " + e.text);
    }
});

var chat = $("#chat").data("kendoChat");

chat.renderSuggestedActions([{
    title: "Option 1",
    value: "Value 1"
}, {
    title: "Option 2",
    value: "Value 2"
}]);
</script>