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

FilesLayoutMode

configuration

Controls the layout mode for file attachments within messages. Available modes are "vertical" (stacked), "horizontal" (side-by-side with scrolling), and "wrap" (wrapping flow layout).

filesLayoutMode

String

Default: "vertical"

<div id="chat"></div>
<script>
let messagesData = [
    {
        id: 1,
        text: "Files in horizontal layout:",
        authorId: "user1",
        authorName: "John Doe",
        timestamp: new Date(2026, 0, 1, 9, 0),
        files: [
            { name: "report.pdf", size: 245760, icon: "file-pdf" },
            { name: "data.csv", size: 12345, icon: "file-csv" },
            { name: "image.png", size: 500000, icon: "image" }
        ]
    }
];

$("#chat").kendoChat({
    filesLayoutMode: "horizontal",
    authorId: "user1",
    dataSource: messagesData
});
</script>