FileManagerFileListThumbnailsViewSettings.ThumbnailWidth Property

Gets or sets the width of thumbnails and folder images displayed in the file area in thumbnails view mode.

Namespace: DevExpress.Web

Assembly: DevExpress.Web.v24.1.dll

NuGet Package: DevExpress.Web

Declaration

C#

[DefaultValue(typeof(Unit), "")]
public virtual Unit ThumbnailWidth { get; set; }

VB.NET

<DefaultValue(GetType(Unit), "")>
Public Overridable Property ThumbnailWidth As Unit

Property Value

Type	Default	Description
Unit	String.Empty	A Unit value specifying the thumbnail width.

Property Paths

You can access this nested property as listed below:

Object Type	Path to ThumbnailWidth
FileManagerSettingsFileList	.ThumbnailsViewSettings .ThumbnailWidth

Remarks

Use the ThumbnailWidth and FileManagerFileListThumbnailsViewSettings.ThumbnailHeight properties to specify the size of thumbnails and folder images displayed in the file area in thumbnails view mode.

Example

Web Forms:

ASPX

<dx:ASPxFileManager ID="fileManager" runat="server">
    <SettingsFileList>
        <ThumbnailsViewSettings ThumbnailHeight="50" ThumbnailWidth="50">
            <ItemTemplate>
                <img class="tmplThumb" src='<%# Eval("ThumbnailUrl") %>' alt='<%# Eval("Name") %>' />
                <div class="tmplTextContainer">
                    <dx:ASPxLabel CssClass="mainInfo" runat="server" Text='<%# Eval("Name") %>' />
                    <br />
                    <dx:ASPxLabel CssClass="additionalInfo" runat="server" Text='<%# GetFileType(Container.DataItem as FileManagerFile) %>' />
                    <br />
                    <dx:ASPxLabel CssClass="additionalInfo" runat="server" Text='<%# GetSize(Container.DataItem as FileManagerFile) %>' />
                </div>
            </ItemTemplate>
        </ThumbnailsViewSettings>
    </SettingsFileList>
    ...
</dx:ASPxFileManager>

MVC:

C#

settings.SettingsFileList.ThumbnailsViewSettings.ThumbnailHeight = Unit.Pixel(50);
settings.SettingsFileList.ThumbnailsViewSettings.ThumbnailWidth = Unit.Pixel(50);
settings.SettingsFileList.ThumbnailsViewSettings.SetThumbnailViewItemTemplateContent(c => {
    ViewContext.Writer.Write(
        "<img class=\"tmplThumb\" src=\"" + c.Item.ThumbnailUrl + "\" alt='<%# Eval(\"Name\") %>' />" +
        "<div class=\"tmplTextContainer\">" +
            "<span>" + DataBinder.Eval(c.DataItem, "Name") + "</span>" +
            "<br />" +
            "<span class=\"additionalInfo\">" + FileManagerItemInfo.Create("", c.Item.FullName).Type + "</span>" +
            "<br />" +
            "<span class=\"additionalInfo\">" + c.Item.Length / 1024 + "Kb </span>" +
        "</div>"
    );
});

Online Demo

• ASPxFileManager - Templates (Web Forms)

• FileManager - Templates (MVC)

Example

ASPX

<dx:ASPxFileManager ID="fileManager" runat="server">
     ...
     <ClientSideEvents HighlightItemTemplate="onHighlightItemTemplate" />
     <SettingsFileList>
          <ThumbnailsViewSettings ThumbnailHeight="50" ThumbnailWidth="50">
               <ItemTemplate>
                    <img class="tmplThumb" src='<%# Eval("ThumbnailUrl") %>' alt='<%# Eval("Name") %>' />
                    <div class="tmplTextContainer">
                         <span><%# Eval("Name") %></span>
                         <br />
                         <span class="additionalInfo"><%# GetFileType(Container.DataItem as FileManagerFile) %></span>
                         <br />
                         <span class="additionalInfo"><%# GetSize(Container.DataItem as FileManagerFile) %></span>
                    </div>
               </ItemTemplate>
          </ThumbnailsViewSettings>
     </SettingsFileList>
</dx:ASPxFileManager>

JS

onHighlightItemTemplate = function(s, e) {
    var startIndex = e.itemName.toLowerCase().indexOf(e.filterValue.toLowerCase()),
          textStart = e.itemName.substr(0, startIndex),
          textMiddle = e.itemName.substr(startIndex, e.filterValue.length),
          textEnd = e.itemName.substr(startIndex + e.filterValue.length),
          highlightedText = textStart + "<span class='" + e.highlightCssClassName + "'>" + textMiddle +"</span>" + textEnd,
          textContainer = ASPxClientUtils.GetChildByTagName(e.templateElement, "DIV", 0);
     ASPxClientUtils.GetChildByTagName(textContainer, "SPAN", 0).innerHTML = "Name: " + highlightedText;
}