File Manager detail view simil component

[Adriano]

Hi,

I need to develop a app similar to File Manager.

As the file manager seems to have limitations in customization data and toolbar/context menu actions, I would realize the app using separating components for the tree navigation, toolbar, context menu and files/folders detail view.

The most difficult in this is the last one, that is the files/folders detail view, with the built-in views "Large icons" and "Details" and the built-in checkboxes to select the items. 

So my question is: which component I can use to realize that?

Has someone an example to obtain that?

Thanks

Adriano

[Shameer Ali Baig Sulaiman Ali Baig]

Hi Adriano, 

 

Greetings from Syncfusion support. 

 

We have checked your query. 

 

Query 1: file manager seems to have limitations in customization data and toolbar/context menu actions 

 

File Manager has options to customize the toolbar and context menu actions as per your requirement. Please, check out the following documentation sections in which we have customize the toolbar and context menu items. 

 

How to add Custom items in Context Menu: https://ej2.syncfusion.com/angular/documentation/file-manager/how-to/adding-custom-item-to-context-menu/  

 

How to add Custom items in Toolbar: https://ej2.syncfusion.com/angular/documentation/file-manager/how-to/adding-custom-item-to-toolbar/  

 

You can perform any file operation of FileManager with the custom items added in FileManager. Also, you can remove any default items (button and li items) from both Context menu and Toolbar based on your requirement. 

 

The file manager component allows customizing its functionalities like, context menu, searching, uploading, toolbar using APIs. Given below are some of the functionalities that can be customized in the File Manager, 

·        Context menu customization 

·        Details view customization 

·        Navigation pane customization 

·        Show/Hide file extension 

·        Show/Hide hidden items 

·        Show/Hide thumbnail images in large icons view 

·        Toolbar customization 

·        Upload customization 

·        Tooltip customization 

 

Please, let us know your exact requirement and in which way you want to customize the FileManager component with clear requirement details. Based on your requirement, we will provide you the prompt solution. 

 

Query 2: I would realize the app using separating components for the tree navigation, toolbar, context menu and files/folders detail view. The most difficult in this is the last one, that is the files/folders detail view, with the built-in views "Large icons" and "Details" and the built-in checkboxes to select the items. 

 

Yes, we have Syncfusion EJ2 library components like TreeView, Toolbar, ContextMenu, Grid, Checkbox, Buttons to build the File Manager component. 

 

We have used EJ2 Grid component in Details View of FileManager. But we have designed Large icons view specific for FileManager. For each file or folder, we render li element with inner sub elements with checkbox. 

 

You can use EJ2 Card component with checkboxes for achieving the similar requirement. 

 

Please, check out the following links to know more about Syncfusion components. 

 

Demos: https://ej2.syncfusion.com/angular/demos/#/material/grid/over-view  

 

Documentation: https://ej2.syncfusion.com/angular/documentation/introduction/  

 

API reference: https://ej2.syncfusion.com/angular/documentation/api/  

 

Please, let us know if you need any further assistance. 

 

Regards, 

Shameer Ali BaiG S. 

[Adriano]

Hi,

thanks for the reply to all my requests; your support is very excellent.

Ok for the customizations in File Manager, but in my experience they are not "enough" for my "eager" customers (for example hide checkboxes in detail view).

I'll follow your suggestion to realize the specific detail view "large icons" using card component.

Best regards

Adriano

[Sowmiya Padmanaban]

Hi Adriano,  

 

Thanks for the update. 

 

Query - the customizations in File Manager, but in my experience they are not "enough" for my "eager" customers (for example hide checkboxes in detail view). 

 

You can hide the details view and large icons view checkbox of FileManager component by setting allowMultiselection property as false. Please, refer the below code snippet. 

 

 <ejs-filemanager 

    id="overview" 

    [ajaxSettings]="ajaxSettings" 

    [allowMultiSelection]="false" 

  > 

  </ejs-filemanager> 

 

Sample link: https://stackblitz.com/edit/angular-1np2cy?file=app.component.html 

 

Please let us know, if you need any further assistance. 

 

Regards,  

Sowmiya.P