modify what data displayed by default in details view on mobile devices

[Valter]

Hello,

Couldn't find a solution by myself so asking the community.

When looking at file manager on mobile devices, would like to hide the date created and file size that's displayed by default bellow folder and file name. See attached image if not clear...

It can be accomplished?

Attachment: 20200609_19_40_21Clipboard_73ae628e.7z

[Sowmiya Padmanaban]

Hi Valter,  

 

Greetings from Syncfusion support. 

 

We have checked your reported query with FileManager component. Yes, it is possible to achieve it in FileManager component. If you want to hide the date time and size in DetailsView in desktop view. You can hide it by using DetailsViewSettings. 

 

Refer the below code snippet. 

 

  <ejs-filemanager id="filemanager" view="Details" fileLoad="FileLoad"> 

                <e-filemanager-ajaxsettings url="https://ej2-aspcore-service.azurewebsites.net/api/FileManager/FileOperations" 

                                            downloadUrl="https://ej2-aspcore-service.azurewebsites.net/api/FileManager/Download" 

                                            uploadUrl="https://ej2-aspcore-service.azurewebsites.net/api/FileManagerUpload" 

                                            getImageUrl="https://ej2-aspcore-service.azurewebsites.net/api/FileManagerGetImage"> 

                </e-filemanager-ajaxsettings> 

               <e-filemanager-detailsviewsettings> 

                   <e-detailsviewsettings-columns> 

                       <e-detailsviewsettings-column field="name" headerText="FileName"></e-detailsviewsettings-column> 

                   </e-detailsviewsettings-columns> 

               </e-filemanager-detailsviewsettings> 

            </ejs-filemanager> 

 

Refer the below screenshot 

 

 

If you want to hide the column in mobile devices. You can hide it by using fileLoad event. 

 

Refer the below code snippet. 

 

function FileLoad(args){ 

     if(ej.base.Browser.isDevice) 

          { 

              if(args.module == "DetailsView")  

              { 

                args.element.getElementsByTagName("td")[1].querySelector(".e-fe-date").innerHTML=""; 

                args.element.getElementsByTagName("td")[1].querySelector(".e-fe-size").innerHTML =""; 

              }  

          }  

    } 

<style> 

    .e-filemanager.e-fe-mobile .e-grid .e-gridheader .e-fe-grid-icon, .e-filemanager.e-fe-mobile .e-grid .e-gridcontent .e-fe-grid-icon{ 

              padding:10px !important;  

            } 

</style> 

 

 

Refer the below screenshot. 

 

 

 

Refer the sample link below. 

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

 

Refer the below link to know more about the FileManager component. 

 

UG Documentation-https://ej2.syncfusion.com/aspnetcore/documentation/file-manager/getting-started/? 

 

Demo link-https://ej2.syncfusion.com/aspnetcore/FileManager/Overview#/material 

 

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

 

Regards,  

Sowmiya.P