Tab

FileManagerFileListThumbnailsViewSettings.ItemTemplate Property

Gets or sets a common template used for displaying the content of all items within the file list when it is in thumbnails view mode.

Namespace: DevExpress.Web

Assembly: DevExpress.Web.v20.2.dll

Declaration

[DefaultValue(null)]
public virtual ITemplate ItemTemplate { get; set; }
<DefaultValue(Nothing)>
Public Overridable Property ItemTemplate As ITemplate

Property Value

Type Default Description
ITemplate

null

An object that supports the System.Web.UI.ITemplate interface which contains the template used for displaying the content of all items.

Property Paths

You can access this nested property as listed below:

Library Object Type Path to ItemTemplate
ASP.NET Controls and MVC Extensions HtmlEditorDocumentSelectorFileListSettings
.ThumbnailsViewSettings.ItemTemplate
HtmlEditorFileManagerFileListSettings
.ThumbnailsViewSettings.ItemTemplate
FileManagerSettingsFileList
.ThumbnailsViewSettings.ItemTemplate
ASP.NET Bootstrap Controls BootstrapFileManagerSettingsFileList
.ThumbnailsViewSettings.ItemTemplate
ASP.NET MVC Extensions MVCxFileManagerSettingsFileList
.ThumbnailsViewSettings.ItemTemplate
MVCxFileManagerSettingsFileList
.ThumbnailsViewSettings.ItemTemplate

Remarks

Use the ItemTemplate property to define a common content for all items in the file list when it is in thumbnails view mode. The template created using this property replaces the content of each item preserving its style settings (if specified).

You can use the FileManagerDetailsColumn.ItemTemplate property to specify an item template for details view mode.

NOTE

Once a template defined via the ItemTemplate property is created within a control, it is instantiated within a container object of the FileManagerThumbnailsViewItemTemplateContainer type. This container object exposes a set of specific properties to which the template's child controls can be bound.

Example

<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>

Online Demo

Examples

ASPxFileManager_HighlightTemplate

<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>
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;
}
See Also