We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

How use template for view of FileManager?

For example, give a template for show the following with our desired layout.

Each item, show the following

- multiple thumbnails

- background color

- last modified date

- last modified by

- description

- several custom action buttons


5 Replies

LD LeoLavanya Dhanaraj Syncfusion Team January 20, 2023 10:41 AM UTC

Hi John,

Greetings from Syncfusion support.

We are quite unclear about whether you are using EJ1 ejFileExplorer control or EJ2 JavaScript FileManager component. So, we would like to confirm whether you need to customize the view template of our ejFileExplorer or the EJ2 FileManager component. For your reference, we have attached the documentation for EJ2 FileManager component.

EJ2- FileManager documentation : https://ej2.syncfusion.com/javascript/documentation/file-manager/views/

EJ2- FileManager demo :  https://ej2.syncfusion.com/javascript/demos/#/bootstrap5/file-manager/overview.html

Please check the shared links and confirm the component details. Based on the confirmation, we can assist you further on your queries.


Leo Lavanya Dhanaraj

JO john February 6, 2023 09:48 AM UTC

Thanks for your reply.

We are going to evaluate on EJ2 and it's React version.

We know file manager support LargeIcons view and Details view. But this is not enough.

Refer to attached screen, there are 3 questions.

  1. Flexible thumbnail size (maybe responsive)
  2. custom layout of an item with template
  3. base on point 2, there may have buttons for showing dropdown menu, or several action buttons.

Attachment: Screenshot.png_7a70f36a.zip

LD LeoLavanya Dhanaraj Syncfusion Team February 9, 2023 11:10 AM UTC

John, Your requirement is not feasible with the File Manager component. Check out the below details.

FileManager(Feature tour) : https://www.syncfusion.com/react-components/react-file-manager

You can look into our Card or Dashboard Layout components to meet your requirements. Also, those components are not fit into the FileManager component. For further information, check out the below component details.

Our Card is a container-based user interface (UI) component built using HTML5/CSS3 markup and styles for displaying organized content. The card design is widely used in social media and e-commerce sites such as Facebook, Google Now, Amazon, Pinterest, and more. The cards are mostly used as entry points to more detailed views, such as in a gallery or dashboard.

Check out the below mentioned links to know more about Syncfusion Card component.

Documentation : https://ej2.syncfusion.com/react/documentation/card/getting-started/

Demo : https://ej2.syncfusion.com/react/demos/#/bootstrap5/card/basic

Also, Our Dashboard is a grid-structured layout component that helps create static and dynamic dashboard layouts with panels. Dashboard panels are the basic building blocks of a dashboard and can be added programmatically or dynamically at runtime. The panels hold UI components and allow resizing, reordering, dragging and dropping, removing, and adding. Easily place components at the desired positions within the grid layout.

Also, we have a Template support for the Dashboard Layout component. So, you can place any HTML content or HTML UI components like Grid, Charts, Gauge, Maps, etc. to represent the metrics or KPI as panel content using content property. Also, a word or phrase that summarize the panel’s content can be added as the header on the top of each panel inside the Dashboards.

Check out the below mentioned links to know more about Syncfusion Dashboard Layout component.

Documentation : https://ej2.syncfusion.com/react/documentation/dashboard-layout/getting-started/

Demo : https://ej2.syncfusion.com/react/demos/#/bootstrap5/dashboard-layout/default

Please confirm the exact component that will meet your requirement. It will help us validate and provide a prompt solution.


Leo Lavanya Dhanaraj

JO john February 10, 2023 03:14 AM UTC

Thanks your advice.

But we need the behavior likes a file manager, such as drag-n-drop, folder structure, and list items from various storage services.

Can support in File Manager component?

LD LeoLavanya Dhanaraj Syncfusion Team February 14, 2023 11:26 AM UTC

Hi John,

Sorry for the inconvenience.

We understand that you want the drag-and-drop, folder structure and list the items from various storage services. Our React FileManager (File explorer) is a graphical user interface component for managing the file system that allows users to perform most common file operations like accessing, editing, and sorting files or folders. This component provides easy navigation for browsing folders to select a file or folder from the file system. However, this is the FileManager's current behavior, and which does not support template level customization.

Check out the below links to know more about React FileManager component.

Feature tour(FileManager) : https://www.syncfusion.com/react-components/react-file-manager

Documentation : https://ej2.syncfusion.com/react/documentation/file-manager/getting-started/

Demo: https://ej2.syncfusion.com/react/demos/#/bootstrap5/file-manager/overview

Check out the provided links and get back to us if you need any further assistance.


Leo Lavanya Dhanaraj

Live Chat Icon For mobile
Up arrow icon