This is a migrated thread and some comments may be shown as answers.

Modifying thumbnails; including file size as part of thumbnail image text/description

3 Answers 23 Views
FileExplorer
This is a migrated thread and some comments may be shown as answers.
Christopher
Top achievements
Rank 1
Christopher asked on 25 Mar 2021, 03:51 PM

Hello Telerik crew,

I have a requirement where the file size needs to be appended to the file name when viewed in Thumbnails explorer mode.

I noticed that the file size is only available when in Default explorer mode (it has it's own column), but have no way of retrieving it when in Thumbnails mode. The online support doesn't mention creating a custom column/container for Thumbnails mode.

I have a couple of ideas but wanted to see if these are possible;

Option 1). when first visiting the page that the RadFileExplorer is on, do I set explorer mode to Default retrieve the current file list (including the file name & size), store in hidden variable then switch to Thumbnails (programmatically), match on filename then append the file-size when a match is found?

Option 2). in the page load (server size), retrieve the complete file list of current folder, store in hidden variable, then when client side load executes, perform a match on filename then append the file-size when a match is found?

Regards,

Chris

3 Answers, 1 is accepted

Sort by
0
Accepted
Vessy
Telerik team
answered on 29 Mar 2021, 03:41 PM

Hi Christopher,

There is an even more easier approach - you can customize the file-item client-side template of RadListView, adding the desired file size inside it.

For example, you can use a similar implementation:

    protected void Page_Load(object sender, EventArgs e)
    {
        RadFileExplorer1.FileList.ListView.ClientSettings.DataBinding.ItemTemplate =
                @"<li class=""rfeThumbList rlvI"">
                <a href=""javascript: void 0;"" class=""rfeLink rlvDrag#= isSelected ? ' rfeSelectedLink' : ''#"" data-index=""#= index #"" title=""#= Name #"">
                    <span class=""rfeFile#= Telerik.Web.UI.FileExplorerHelper.isWebImage(item.Extension) ? ' rfeImageFile' : '' #"">
                    # if(Telerik.Web.UI.FileExplorerHelper.isWebImage(item.Extension)) {#
                        <img src=""#= item.Url || Path #"" alt=""#= Name #"" width=""32"" height=""32"" />

                    # } else { #
                        <span class=""rfeFileIcon #= Telerik.Web.UI.FileExplorerHelper.getThumbnailCSSExtension(item) #""></span>

                    # } #
                    </span>
                    <span class=""rfeThumbTitle"">#= Name #</span>
                    <span style='color:grey'>#=(item.Length/1024).toFixed(2)# KB</span>
                </a>
            </li>";
    }

 

Regards,
Vessy
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Christopher
Top achievements
Rank 1
answered on 29 Mar 2021, 07:30 PM

Vessy, this is a much easier approach!

It works perfectly and also gives me an introduction to make further updates to the template.

Thank you!

0
Vessy
Telerik team
answered on 30 Mar 2021, 05:57 AM

Hi,

You are welcome, Christopher, I am glad the suggested solution is working for you :)

Regards,
Vessy
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
FileExplorer
Asked by
Christopher
Top achievements
Rank 1
Answers by
Vessy
Telerik team
Christopher
Top achievements
Rank 1
Share this question
or