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

FileActions

configuration

Defines the collection of actions that will be rendered in the context menu for file attachments. Each action represents an operation that users can perform on files (download, delete, preview, etc.).

fileActions

Array

<div id="chat"></div>
<script>
let messagesData = [
    {
        id: 1,
        text: "Here's the document you requested:",
        authorId: "user1",
        authorName: "John Doe",
        authorImageUrl: "https://demos.telerik.com/kendo-ui/content/web/Customers/RICSU.jpg",
        files: [{ name: "report.pdf", size: 245760, extension: "pdf" }],
        timestamp: new Date(2026, 0, 1, 9, 0)
    },
    {
        id: 2,
        text: "Thanks! I'll review it.",
        authorId: "user2",
        authorName: "Jane Smith",
        authorImageUrl: "https://demos.telerik.com/kendo-ui/content/web/Customers/LONEP.jpg",
        timestamp: new Date(2026, 0, 1, 9, 5)
    }
];

$("#chat").kendoChat({
    fileActions: [
        { name: "download", text: "Download", icon: "download" },
        { name: "delete", text: "Delete", icon: "trash" },
        { name: "preview", text: "Preview", icon: "eye" }
    ],
    authorId: "user2",
    dataSource: messagesData
});
</script>

fileActions.icon

String

Defines the icon class for the context menu action. The icon appears next to the action text in the context menu.

<div id="chat"></div>
<script>
let messagesData = [
    {
        id: 1,
        text: "Check out this file:",
        authorId: "user1",
        authorName: "John Doe",
        authorImageUrl: "https://demos.telerik.com/kendo-ui/content/web/Customers/RICSU.jpg",
        files: [{ name: "image.jpg", size: 156000, extension: "jpg" }],
        timestamp: new Date(2026, 0, 1, 9, 0)
    }
];

$("#chat").kendoChat({
    fileActions: [
        { name: "download", text: "Download", icon: "download" }
    ],
    authorId: "user1",
    dataSource: messagesData
});
</script>

fileActions.name

String

Defines the name identifier for the context menu action. This is used internally to identify which action was triggered.

<div id="chat"></div>
<script>
let messagesData = [
    {
        id: 1,
        text: "Document attached:",
        authorId: "user1",
        authorName: "John Doe",
        authorImageUrl: "https://demos.telerik.com/kendo-ui/content/web/Customers/RICSU.jpg",
        files: [{ name: "contract.pdf", size: 890000, extension: "pdf" }],
        timestamp: new Date(2026, 0, 1, 9, 0)
    }
];

$("#chat").kendoChat({
    fileActions: [
        { name: "preview", text: "Preview", icon: "eye" }
    ],
    authorId: "user2",
    dataSource: messagesData
});
</script>

fileActions.text

String

Defines the display text for the context menu action. This text is shown to users in the context menu.

<div id="chat"></div>
<script>
let messagesData = [
    {
        id: 1,
        text: "Here's the spreadsheet:",
        authorId: "user1",
        authorName: "John Doe",
        authorImageUrl: "https://demos.telerik.com/kendo-ui/content/web/Customers/RICSU.jpg",
        files: [{ name: "data.xlsx", size: 45000, extension: "xlsx" }],
        timestamp: new Date(2026, 0, 1, 9, 0)
    }
];

$("#chat").kendoChat({
    fileActions: [
        { name: "download", text: "Download File", icon: "download" }
    ],
    authorId: "user2",
    dataSource: messagesData
});
</script>