Your search did not match any results.
File Manager

Custom Thumbnails

Documentation

The FileManager widget allows you to provide custom thumbnails. Handle the customizeThumbnail event to specify how the widget presents files in folders.

<script type="text/javascript"> $(function () { $("#file-manager").dxFileManager({ name: "fileManager", fileProvider: fileSystem, itemView: { mode: "thumbnails" }, height: 450, permissions: { create: true, copy: true, move: true, remove: true, rename: true }, customizeThumbnail: function (fileManagerItem) { if (fileManagerItem.isDirectory) return '@Url.Content("~/Content/images/thumbnails/folder.svg")'; var fileExtension = fileManagerItem.getExtension(); switch (fileExtension) { case ".txt": return '@Url.Content("~/Content/images/thumbnails/doc-txt.svg")'; break; case ".rtf": return '@Url.Content("~/Content/images/thumbnails/doc-rtf.svg")'; break; case ".xml": return '@Url.Content("~/Content/images/thumbnails/doc-xml.svg")'; break; } } }); }); </script> <div id="file-manager"></div> <script src="~/Scripts/data/fileSystem.js"></script>
using System.Web.Mvc; namespace DevExtreme.MVC.Demos.Controllers { public class FileManagerController : Controller { public ActionResult CustomThumbnails() { return View(); } } }
var fileSystem = [ { name: "Documents", isDirectory: true, items: [ { name: "Projects", isDirectory: true, items: [ { name: "About.rtf", isDirectory: false, size: 1024 }, { name: "Passwords.rtf", isDirectory: false, size: 2048 } ] }, { name: "About.xml", isDirectory: false, size: 1024 }, { name: "Managers.rtf", isDirectory: false, size: 2048 }, { name: "ToDo.txt", isDirectory: false, size: 3072 } ], }, { name: "Images", isDirectory: true, items: [ { name: "logo.png", isDirectory: false, size: 20480 }, { name: "banner.gif", isDirectory: false, size: 10240 } ] }, { name: "System", isDirectory: true, items: [ { name: "Employees.txt", isDirectory: false, size: 3072 }, { name: "PasswordList.txt", isDirectory: false, size: 5120 } ] }, { name: "Description.rtf", isDirectory: false, size: 1024 }, { name: "Description.txt", isDirectory: false, size: 2048 } ];
.dx-filemanager-details-item-thumbnail { height: 18px; width: 18px; }