Skip to content

Merge filemanager-jun18-3049 into production #3051

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 8 commits into from
Jun 20, 2025
Merged

Merge filemanager-jun18-3049 into production #3051

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
ac8bcf9
docs(FileManager): Improve data binding information and add KB for da…
dimodi Jun 19, 2025
7910569
minor fixes
dimodi Jun 19, 2025
c996789
Update components/filemanager/data-binding/overview.md
dimodi Jun 20, 2025
51cf02a
Update components/filemanager/data-binding/overview.md
dimodi Jun 20, 2025
a3b7504
Update components/filemanager/data-binding/overview.md
dimodi Jun 20, 2025
45b38a7
Update components/filemanager/data-binding/overview.md
dimodi Jun 20, 2025
dd1e896
Update components/filemanager/data-binding/overview.md
dimodi Jun 20, 2025
128b70e
Update components/filemanager/data-binding/overview.md
dimodi Jun 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion components/filemanager/data-binding/hierarchical-data.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ This article explains how to bind the FileManager for Blazor to hierarchical dat

Hierarchical data means that the collection of child items is provided in a field of its parent's model:

* The `Items` field contains a collection of all children including sub-folders and files. They will be rendered in the [Preview Pane](slug:filemanager-preview-pane) when the parent folder is selected.
* The `Items` field contains a collection of all children including sub-folders and files. They will be rendered in the [FileManager View](slug:filemanager-views) when the parent folder is selected.

* The `Directories` field contains a collection of the subfolders of a directory. They will be rendered in the TreeView navigation pane. If there are `Directories` for a specific folder it will have an expand icon. The `HasDirectories` field can override this, however, but it is not required for hierarchical data binding.

Expand Down
95 changes: 34 additions & 61 deletions components/filemanager/data-binding/overview.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,26 +8,20 @@ published: True
position: 0
---

# FileManager Data Binding Basics
# FileManager Data Binding Overview

This article explains the different ways to provide data to a FileManager component and the properties related to data binding. Reviewing this article will explain the basics of how you can describe the hierarchy of items in your data source to the treeview component so they can render.
This FileManager Data Binding section explains the different ways to provide data to a FileManager component and the properties related to data binding. This article describes what are the available (bindable) features of FileManager data items and how to map model properties to these features.

@[template](/_contentTemplates/common/general-info.md#valuebind-vs-databind-link)

First, review:

* The available (bindable) [features of a FileManager items](#filemanager-item-features).
* How to match fields in the model with the FileManager item [data bindings](#data-bindings).
There are two data binding modes that the FileManager supports:

There are two modes of providing data to a FileManager, and they both use the items' features. Once you are familiar with the current article, choose the data binding more you wish to use:
* [Flat data](slug:filemanager-data-binding-flat-data)—a collection of self-referencing items with parent-child relationships.
* [Hierarchical data](slug:filemanager-data-binding-hierarchical-data)—each item holds its children in a nested property.

* [Flat data](slug:filemanager-data-binding-flat-data) - a collection of self-referencing items with parent-child relationships See the `Id` and `ParentId` settings.

* [Hierarchical data](slug:filemanager-data-binding-hierarchical-data) - each item holds its children in a nested property. See the `Directories` setting.
@[template](/_contentTemplates/common/general-info.md#valuebind-vs-databind-link)

## FileManager Item Features

The FileManager has features that map to properties in the model. The following model uses property names that will work automatically, with no additional FileManager configuration:
The FileManager extracts information about the displayed files and folders from properties in the model. The following flat data model uses property names that will work automatically, with no additional FileManager configuration:

````RAZOR
@using System.IO
Expand Down Expand Up @@ -225,62 +219,41 @@ The FileManager has features that map to properties in the model. The following
}
````

The above model properties have the following meaning for the FileManager:

The following section describes the meaning of the model properties for the FileManager.

@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)
## Data Bindings

| Property | Description |
| --- | --- |
| **Item features** | |
| `Name` | The name of the file. |
| `Size` | The size of the file. |
| `Path` | The path of the file. |
| `Extension` | The extension of the file. |
| `IsDirectory` | Whether the item is a directory. If its value is `false` the item is considered a file and not a directory. |
| `DateCreated` | The creation date of the file. |
| `DateCreateUtc` | The creation date of the file in UTC. Required. |
| `DateModified` | The modification date of the file. |
| `DateModifiedUtc` | The modification date of the file in UTC. Required. |
| **Item relations** | |
| `Id `| The unique identifier of the file. Required for [**binding to flat data**](slug:filemanager-data-binding-flat-data). |
| `ParentId` | Identifies the file's parent. Required for [**binding to flat data**](slug:filemanager-data-binding-flat-data). Set to `null` for root items. Do *not* use `ParentId` with hierarchical data. |
| `HasDirectories` | Determines whether the item has subdirectories. Required for binding to [**flat data**](slug:filemanager-data-binding-flat-data) If `true`, the directory will show an expand arrow. With [**hierarchical data**](slug:filemanager-data-binding-hierarchical-data), the FileManager renders expand icons based on `Directories`, but `HasDirectories` will take precedence. |
| `Directories` | Defines the item subdirectories. Required for [binding to **hierarchical data**](slug:filemanager-data-binding-hierarchical-data).
| `Items` | Defines all the subitems (directories and files) of the item. |
All [FileManager item features](#fileManager-item-features) map to model properties. You define that relationship by providing the property name from which the corresponding information is taken. To do this, use the following parameters of the main `TelerikFileManager` tag:

## Data Bindings
@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)

All [FileManager item features](#fileManager-item-features) map to model properties. The properties of a treeview item match directly to a field of the model the treeview is bound to. You provide that relationship by providing the name of the field from which the corresponding information is to be taken. To do this, in the main `TelerikFileManager` tag, use the parameters described below:

| FileManager Parameter | Default Value |
| --- | --- |
| **Item features** | |
| `NameField`| `"Name"` |
| `SizeField`| `"Size"` |
| `PathField`| `"Path"` |
| `ExtensionField`| `"Extension"` |
| `IsDirectoryField`| `"IsDirectoryField"` |
| `DateCreatedField`| `"DateCreated"` |
| `DateCreateUtcField`| `"DateCreateUtc"` |
| `DateModifiedField`| `"DateModified"` |
| `DateModifiedUtcField`| `"DateModifiedUtc"` |
| **Item relations** | |
| `IdField `| `"Id" ` |
| `ParentIdField`| `"ParentId"` |
| `HasDirectoriesField`| `"HasDirectories"` |
| `DirectoriesField`| `"Directories"` |
| `EntriesField`| `"Entries"` |

>important Do not use `ParentId` with hierarchical data. This will confuse the FileManager that it is bound to flat data and the component may not render any items. If the model must have a `ParentId` property, set `ParentIdField` to a non-existent property.
| FileManager Parameter | Default&nbsp;Parameter&nbsp;Value <br /> (Model Property Name) | Model Property Type | Model Value Description |
| --- | --- | --- | --- |
| **Item features** | | | |
| `NameField`| `"Name"` | `string` | The name of the file or folder, excluding the extension. |
| `SizeField`| `"Size"` | `long` | The size of the file in bytes. |
| `PathField`| `"Path"` | `string` | The path to the item, including the name and extension. |
| `ExtensionField`| `"Extension"` | `string` | The item extension, starting with a dot `.` |
| `IsDirectoryField`| `"IsDirectory"` | `bool` | Whether the item is a folder. If `false`, it's treated as a file. |
| `DateCreatedField`| `"DateCreated"` | `DateTime` | The creation date of the file. |
| `DateCreatedUtcField`| `"DateCreatedUtc"` | `DateTime` | The creation date of the file in UTC. Required. |
| `DateModifiedField`| `"DateModified"` | `DateTime` | The modification date of the file. |
| `DateModifiedUtcField`| `"DateModifiedUtc"` | `DateTime` | The modification date of the file in UTC. Required. |
| **Item relations** | | | |
| `IdField `| `"Id" ` | any | The unique identifier of the file. Required for [binding to flat data](slug:filemanager-data-binding-flat-data). |
| `ParentIdField`| `"ParentId"` | any | Identifies the item's parent. Required for [binding to flat data](slug:filemanager-data-binding-flat-data). Set to `null` for root items. Do not use `ParentId` with hierarchical data. |
| `HasDirectoriesField`| `"HasDirectories"` | `bool` | Determines whether the item has child folders. Required for [binding to flat data](slug:filemanager-data-binding-flat-data). If `true`, the folder will show an expand arrow in the TreeView. With [hierarchical data](slug:filemanager-data-binding-hierarchical-data), the FileManager renders expand icons based on `Directories`, but `HasDirectories` takes precedence. |
| `DirectoriesField`| `"Directories"` | `IEnumerable<TItem>` | The item's child folders to display in the TreeView. Required for [binding to hierarchical data](slug:filemanager-data-binding-hierarchical-data). |
| `ItemsField`| `"Items"` | `IEnumerable<TItem>` | The folder's child files and folders to display in the FileManager view. Required for [binding to hierarchical data](slug:filemanager-data-binding-hierarchical-data). |

>important Do not use `ParentId` with hierarchical data. This will confuse the FileManager that it is bound to flat data and the component may not render any items. If the model must have a `ParentId` property, set `ParentIdField` to a non-existent property name.

## Next Steps

Learn the different ways to provide data to a TreeView:

* [Use flat data](slug:filemanager-data-binding-flat-data)
* [Use hierarchical data](slug:filemanager-data-binding-hierarchical-data) - each item holds its children in a nested property
Learn the different ways to provide data to a FileManager:

* [Use flat data](slug:filemanager-data-binding-flat-data), where all items at all levels represent a single collection.
* [Use hierarchical data](slug:filemanager-data-binding-hierarchical-data), where each folder item holds its child files and folders in nested properties.

## See Also

Expand Down
Loading