add custom column to file manager detail view

[Unknown]

how to add custom column next to file size in File manager control detail view

we want to show author/owner of the file. is it possible?

[Ashokkumar Balasubramanian]

Hi Mahesh,  

 

Good day to you. 

 

Yes, possible. We can add an additional column in detail view for File Manager component. Please refer the following code block. 

 

@Html.EJS().FileManager("filemanager").AjaxSettings(new Syncfusion.EJ2.FileManager.FileManagerAjaxSettings 

       { 

           Url = "/Home/FileOperations", 

           GetImageUrl = "/Home/GetImage", 

           UploadUrl = "/Home/Upload", 

           DownloadUrl = "/Home/Download" 

       }).View(Syncfusion.EJ2.FileManager.ViewType.Details).FileOpen("onFileOpen").DetailsViewSettings(new Syncfusion.EJ2.FileManager.FileManagerDetailsViewSettings 

            { 

           Columns = new List<Syncfusion.EJ2.FileManager.FileManagerColumn> 

           { 

              new Syncfusion.EJ2.FileManager.FileManagerColumn() 

              { 

                  Field="name", HeaderText = "File Name", MinWidth = "120", Width = "auto" 

              }, 

              new Syncfusion.EJ2.FileManager.FileManagerColumn() 

              { 

                  Field="dateModified", HeaderText = "Date Modified", MinWidth = "50", Width = "auto" 

              }, 

              new Syncfusion.EJ2.FileManager.FileManagerColumn() 

              { 

                  Field="size", HeaderText = "Size", MinWidth = "50", Width = "50" 

              }, 

              new Syncfusion.EJ2.FileManager.FileManagerColumn() 

              { 

                  Field="author", HeaderText = "Author", MinWidth = "50", Width = "50" 

              } 

           } 

   }).Render() 

 

 

Based on this additional added column, you need to return the corresponding author parameter in server side (Read Operation). 

 

Please let us know, if you have any concern on this. 

 

Regards, 

Ashokkumar B. 

[Unknown]

Thank you Ashok.

could you please share the API/event details for showing file size in kb/mb rather than bytes and parse time in datemodified column

[Shameer Ali Baig Sulaiman Ali Baig]

Hi Mahesh, 

 

You can use the fileLoad event of the EJ2 File Manager to achieve your requirement. This event will trigger before each file/folder is rendered in the File Manager. In the arguments of this event, the corresponding element, file details like name, created date, modified date, size and such etc., will be available using which you can perform the required customization. 

 

We have prepared a simple sample with customization using fileLoad for your reference. The same solution will be applied to the MVC platform. 

 

https://stackblitz.com/edit/cc9xad-hypuar?file=index.ts 

 

Please, let us know if you need further assistance. 

 

Regards, 

Shameer Ali Baig S. 

[Mahesh Machina]

is it possible to make Path column in Search clickable?

[Sowmiya Padmanaban]

Hi Mahesh Machina,  

 

Greetings from Syncfusion support. 

 

We have checked your requirement with FileManager component. Yes, you can add the anchor tag in the fileLoad event of FileManager component. FileLoad event is triggered while loading the files on search opeartions. 

 

Please, refer to the below code snippet. 

 

@Html.EJS().FileManager("file").AjaxSettings(new Syncfusion.EJ2.FileManager.FileManagerAjaxSettings 

     { 

         Url = "/Home/FileOperations", 

         GetImageUrl = "/Home/GetImage", 

         UploadUrl = "/Home/Upload", 

         DownloadUrl = "/Home/Download" 

     }).View(Syncfusion.EJ2.FileManager.ViewType.Details).FileLoad("fileLoad").Render() 

 

<script> 

    function fileLoad(args) { 

        var filemanager = document.getElementById("file").ej2_instances[0]; 

        if ( 

            filemanager.breadcrumbbarModule.searchObj.element.value != "" && 

            args.module == "DetailsView" 

        ) { 

            var anchorTag = document.createElement("a"); 

            var path_element = args.element.lastElementChild; 

            anchorTag.setAttribute("rel='nofollow' href", args.element.lastElementChild.innerText); 

            anchorTag.innerText = args.element.lastElementChild.innerText; 

            path_element.innerText = ""; 

            path_element.appendChild(anchorTag); 

        } 

    } 

</script> 

 

Please, refer the sample link below. 

 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/FileManager2074167463.zip 

 

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

 

Regards,  

Sowmiya.P