Customization of File Manager

[Stanislav Gordenko]

Please, describe the way to use Template property of FileManagerColumn element. For example, I would like to change color of text or background of shown element.

Please, describe also the way to change file type icons.

[Muthukrishnan Kandasamy]

 

Hi Stanislav, 

 

Thanks for contacting Syncfusion support. 

 

We have validated your requirement in Syncfusion Blazor File Manager component. We have prepared a sample to meet your requirement, in this sample we have added FileManagerColumn template and we have added class name alone for file name filed. Using this class name, we have added custom color for file name column. In this sample, we have also added the custom icons for files based on types.  Please refer to the below code block for using the template for File Manager column.  

 

<SfFileManager View="ViewType.Details"> 

    <FileManagerAjaxSettings Url="https://ej2-aspcore-service.azurewebsites.net/api/FileManager/FileOperations" 

                             UploadUrl="https://ej2-aspcore-service.azurewebsites.net/api/FileManager/Upload" 

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

                            GetImageUrl="https://ej2-aspcore-service.azurewebsites.net/api/FileManager/GetImage"> 

    </FileManagerAjaxSettings> 

    <FileManagerDetailsViewSettings> 

        <FileManagerColumns> 

            <FileManagerColumn HeaderText="File Name" Field="name" CustomAttributes="Attr"></FileManagerColumn> 

            <FileManagerColumn HeaderText="Date" Field="dateModified" Type="date"></FileManagerColumn> 

        </FileManagerColumns> 

    </FileManagerDetailsViewSettings> 

</SfFileManager> 

 

@code{ 

    Dictionary<string, object> Attr = new Dictionary<string, object>() 

    { 

        {"class", "file_name" } 

    }; 

} 

 

<style> 

    .file_name { 

        color: blue !important; 

    } 

</style> 

 

Please refer to the below link for the sample. 

 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/FileManager_Template-2040321894 

 

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

 

API reference: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.html 

 

Demo: https://ej2.syncfusion.com/demos/#/material/file-manager/overview.html 

 

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

 

Regards, 

Muthukrishnan K 

[Stanislav Gordenko]

Hallo Muthukrishnan,

Thank you for help. I planned to use this option to change color depending on file properties, not for all files together. Have you something like Template, or RowDataBinding event like in Grid?

I solved second question myself yesterday. I replaced background pictures for details view with icomoon font signs.

So, please, descrive, could I change the style for each row in detail view individually?

One more question is about Format, CustomFormat and Template.

I tried to use Template this way: Template="<span class='bg-danger'>${showThis}</span></div>". It works, but extremely slow. Is there another choices?

I tried to use Format for DateTime Format="g". It does not work. I tried  CustomFormat="@(new { type ="datetime", format="g" })", it does not work to.

Please, send me the link or sample for right usage of Format and Custom Format for number, date and datetime data with localization options.

Is there an ability to show empty column instead of 0 for directory size?

[Prem Kumar Madhan Raj]

Hi Stanislav, 

 

Thanks for contacting Syncfusion support. 

 

Query1: Have you something like Template, or RowDataBinding event like in Grid

Yes, we have column template option for customizing the columns in the grid. Also, we have OnFileLoad event which triggered for each row data being bound in the grid. 

 

Query2: So, please, describe, could I change the style for each row in detail view individually? 

 

Yes, we can change the style for each row by adding a class for each row using file load event as shown in the below code snippet. 

@using Syncfusion.Blazor.FileManager 

@using Newtonsoft.Json 

 

<SfFileManager View="ViewType.Details"> 

    <FileManagerAjaxSettings Url="https://ej2-aspcore-service.azurewebsites.net/api/FileManager/FileOperations" 

                             UploadUrl="https://ej2-aspcore-service.azurewebsites.net/api/FileManager/Upload" 

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

                             GetImageUrl="https://ej2-aspcore-service.azurewebsites.net/api/FileManager/GetImage"> 

    </FileManagerAjaxSettings> 

    <FileManagerDetailsViewSettings> 

        <FileManagerColumns> 

            <FileManagerColumn HeaderText="File Name" Field="name"></FileManagerColumn> 

            <FileManagerColumn HeaderText="Date" Field="dateModified" Format="@("MMMM dd, yyyy")" Type="date"></FileManagerColumn> 

            <FileManagerColumn HeaderText="Size" Field="size"></FileManagerColumn> 

        </FileManagerColumns> 

    </FileManagerDetailsViewSettings> 

    <FileManagerEvents OnFileLoad="FileLoad"></FileManagerEvents> 

</SfFileManager> 

 

@code{ 

    public void FileLoad(FileLoadEventArgs args) 

    { 

        Dictionary<string, object> fileObject = JsonConvert.DeserializeObject<Dictionary<string, object>>(JsonConvert.SerializeObject(args.FileDetails)); 

        if(fileObject["name"].ToString() == "Pictures" && args.Module != "NavigationPane") 

        { 

            args.Element.AddClass(new string[] { "custom" }); 

        } 

    } 

} 

 

<style> 

    .custom { 

        background-color: darkgrey; 

    } 

</style> 

 

Query3: Template works very slowly. 

 

We have checked by rendering a column template in the component and is working fine without any delay. Can you please share the settings in which issue occurs at your end or a screen record of the issue  being faced at your end which would be very helpful at our end to reproduce the reported issue at our end. 

 

Query4: Please, send me the link or sample for right usage of Format and Custom Format for number, date and datetime data with localization options 

We would like to let you know that the CustomFormat is a deprecated property instead of which the format property can be used to define a custom format for the data in the columns. We have attached a sample by providing a custom format for the date value of the date modified column in the below link. Please check it. 

 

Link: https://www.syncfusion.com/downloads/support/forum/156940/ze/FileManager_Localization_sample316022998  

 

Note: In the above sample, you can see a culture dropdown in the top of the header which can be used to switch cultures to check the component in different cultures. 

 

To know more about localizing the Syncfusion component, please check the below documentation link.

Link: https://blazor.syncfusion.com/documentation/common/localization/  

 

Query5: Is there an ability to show empty column instead of 0 for directory size? 

We are currently checking for the possibilities to achieving this requirement at our end. So, we will update you regarding this is in two business days (20^th Aug 2020). We appreciate your patience until then. 

Regards, 

Prem Kumar M