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

[Christopher]

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

[Vessy]

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

[Christopher]

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!

[Vessy]

Hi,

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

Regards,
Vessy
Progress Telerik