Kendo MVC UI File Manager Templates

[Allen]

Any sample templates available for Kendo MVC UI File Manager that replicate Windows file explorer including appropriate icons for folders and files?

I  can see how to create and reference the templates, but could use the time savings if someone has already done this. 

The only sample in the demos is for the preview panel. How about the tree view, list view and grid view within the file manager? 

[Ivan Danchev]

Allen,

We don't have a demo that shows such a specific customization of the FileManager. The component's Views configuration can be used to set templates to the embedded TreeView, ListView and Grid, for example:

.Views(views => views
	.Tree(tree => tree.TemplateId("treeview-template"))
	.Grid(grid => grid.Columns(col => col.Add().TemplateId("column-template")))
	.List(list => list.TemplateId("list-template"))
)

The templates can contain arbitrary Html, similar to the respective demos that show the template capabilities of the TreeView, ListView and Grid:

https://demos.telerik.com/aspnet-mvc/treeview  (this demo shows a TreeView customization where the root nodes display a folder icon and the child nodes hard-coded file icons)
https://demos.telerik.com/aspnet-mvc/listview
https://demos.telerik.com/aspnet-mvc/grid/basic-usage

[Allen]

Hi Ivan,

Thanks for the reference to the template projects. I did implement a template for the tree view and it's working fine. It's a simple template and provided below. 

I do have a few issues with the FileManager in both my app and the demo.

1. When dragging and dropping within the treeview, you do not get the node being dragged. The items collection in the drop event represents the selected item in the tree, not the node being dragged/dropped on the target. 

2. The folder/filenames in the listview do not wrap, you have to hover to see the full name. How can I get the names to wrap and show the full name? 

3. How do you move a sub folder back to the root/home?

Here is the template being used.

<script id="treeview-template" type="text/kendo-ui-template">   
    <div style="display: inline-flex" treeId="#: item.name #">
        <i class="fa fa-folder fa-2x text-warning me-2"></i>
        <span>  #: item.name #</span>
    </div>   
</script>

[Anton Mironov]

Hi Allen,

Thank you for the details provided.

Could you please share more details about the first question? What should happen with the dragged node?

For the second question, I would recommend using the following CSS:

    .k-filemanager .k-listview .k-listview-content {
        white-space: normal;
        word-wrap: break-word;
    }

Here is a REPL example:

• https://netcorerepl.telerik.com/coYdlluW55HCO3b115

For the third question - the current implementation of the FileManager does not support this functionality. Here is a Feature Request for dragging and dropping to the root level:

• https://feedback.telerik.com/aspnet-mvc/1480825-support-drag-and-drop-to-root-level

I added a vote on your behalf for the item above.

I hope this information helps. Let me know if further assistance is needed.

Best Regards,
Anton Mironov