Skip to content

Commit 12a6edd

Browse files
github-actions[bot]dimodiikoevska
authored
Merge filemanager-jun18-3049 into production (#3051)
* docs(FileManager): Improve data binding information and add KB for data virtualization * minor fixes * Update components/filemanager/data-binding/overview.md Co-authored-by: Iva Stefanova Koevska-Atanasova <[email protected]> * Update components/filemanager/data-binding/overview.md * Update components/filemanager/data-binding/overview.md * Update components/filemanager/data-binding/overview.md Co-authored-by: Iva Stefanova Koevska-Atanasova <[email protected]> * Update components/filemanager/data-binding/overview.md Co-authored-by: Iva Stefanova Koevska-Atanasova <[email protected]> * Update components/filemanager/data-binding/overview.md --------- Co-authored-by: Dimo Dimov <[email protected]> Co-authored-by: Iva Stefanova Koevska-Atanasova <[email protected]>
1 parent 8d2bd92 commit 12a6edd

File tree

4 files changed

+296
-369
lines changed

4 files changed

+296
-369
lines changed

‎components/filemanager/data-binding/hierarchical-data.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ This article explains how to bind the FileManager for Blazor to hierarchical dat
1414

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

17-
* 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.
17+
* 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.
1818

1919
* 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.
2020

‎components/filemanager/data-binding/overview.md

Lines changed: 34 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -8,26 +8,20 @@ published: True
88
position: 0
99
---
1010

11-
# FileManager Data Binding Basics
11+
# FileManager Data Binding Overview
1212

13-
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.
13+
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.
1414

15-
@[template](/_contentTemplates/common/general-info.md#valuebind-vs-databind-link)
16-
17-
First, review:
18-
19-
* The available (bindable) [features of a FileManager items](#filemanager-item-features).
20-
* How to match fields in the model with the FileManager item [data bindings](#data-bindings).
15+
There are two data binding modes that the FileManager supports:
2116

22-
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:
17+
* [Flat data](slug:filemanager-data-binding-flat-data)&mdash;a collection of self-referencing items with parent-child relationships.
18+
* [Hierarchical data](slug:filemanager-data-binding-hierarchical-data)&mdash;each item holds its children in a nested property.
2319

24-
* [Flat data](slug:filemanager-data-binding-flat-data) - a collection of self-referencing items with parent-child relationships See the `Id` and `ParentId` settings.
25-
26-
* [Hierarchical data](slug:filemanager-data-binding-hierarchical-data) - each item holds its children in a nested property. See the `Directories` setting.
20+
@[template](/_contentTemplates/common/general-info.md#valuebind-vs-databind-link)
2721

2822
## FileManager Item Features
2923

30-
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:
24+
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:
3125

3226
````RAZOR
3327
@using System.IO
@@ -225,62 +219,41 @@ The FileManager has features that map to properties in the model. The following
225219
}
226220
````
227221

228-
The above model properties have the following meaning for the FileManager:
229-
222+
The following section describes the meaning of the model properties for the FileManager.
230223

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

233-
| Property | Description |
234-
| --- | --- |
235-
| **Item features** | |
236-
| `Name` | The name of the file. |
237-
| `Size` | The size of the file. |
238-
| `Path` | The path of the file. |
239-
| `Extension` | The extension of the file. |
240-
| `IsDirectory` | Whether the item is a directory. If its value is `false` the item is considered a file and not a directory. |
241-
| `DateCreated` | The creation date of the file. |
242-
| `DateCreateUtc` | The creation date of the file in UTC. Required. |
243-
| `DateModified` | The modification date of the file. |
244-
| `DateModifiedUtc` | The modification date of the file in UTC. Required. |
245-
| **Item relations** | |
246-
| `Id `| The unique identifier of the file. Required for [**binding to flat data**](slug:filemanager-data-binding-flat-data). |
247-
| `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. |
248-
| `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. |
249-
| `Directories` | Defines the item subdirectories. Required for [binding to **hierarchical data**](slug:filemanager-data-binding-hierarchical-data).
250-
| `Items` | Defines all the subitems (directories and files) of the item. |
226+
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:
251227

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

254-
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:
255-
256-
| FileManager Parameter | Default Value |
257-
| --- | --- |
258-
| **Item features** | |
259-
| `NameField`| `"Name"` |
260-
| `SizeField`| `"Size"` |
261-
| `PathField`| `"Path"` |
262-
| `ExtensionField`| `"Extension"` |
263-
| `IsDirectoryField`| `"IsDirectoryField"` |
264-
| `DateCreatedField`| `"DateCreated"` |
265-
| `DateCreateUtcField`| `"DateCreateUtc"` |
266-
| `DateModifiedField`| `"DateModified"` |
267-
| `DateModifiedUtcField`| `"DateModifiedUtc"` |
268-
| **Item relations** | |
269-
| `IdField `| `"Id" ` |
270-
| `ParentIdField`| `"ParentId"` |
271-
| `HasDirectoriesField`| `"HasDirectories"` |
272-
| `DirectoriesField`| `"Directories"` |
273-
| `EntriesField`| `"Entries"` |
274-
275-
>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.
230+
| FileManager Parameter | Default&nbsp;Parameter&nbsp;Value <br /> (Model Property Name) | Model Property Type | Model Value Description |
231+
| --- | --- | --- | --- |
232+
| **Item features** | | | |
233+
| `NameField`| `"Name"` | `string` | The name of the file or folder, excluding the extension. |
234+
| `SizeField`| `"Size"` | `long` | The size of the file in bytes. |
235+
| `PathField`| `"Path"` | `string` | The path to the item, including the name and extension. |
236+
| `ExtensionField`| `"Extension"` | `string` | The item extension, starting with a dot `.` |
237+
| `IsDirectoryField`| `"IsDirectory"` | `bool` | Whether the item is a folder. If `false`, it's treated as a file. |
238+
| `DateCreatedField`| `"DateCreated"` | `DateTime` | The creation date of the file. |
239+
| `DateCreatedUtcField`| `"DateCreatedUtc"` | `DateTime` | The creation date of the file in UTC. Required. |
240+
| `DateModifiedField`| `"DateModified"` | `DateTime` | The modification date of the file. |
241+
| `DateModifiedUtcField`| `"DateModifiedUtc"` | `DateTime` | The modification date of the file in UTC. Required. |
242+
| **Item relations** | | | |
243+
| `IdField `| `"Id" ` | any | The unique identifier of the file. Required for [binding to flat data](slug:filemanager-data-binding-flat-data). |
244+
| `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. |
245+
| `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. |
246+
| `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). |
247+
| `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). |
248+
249+
>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.
276250
277251
## Next Steps
278252

279-
Learn the different ways to provide data to a TreeView:
280-
281-
* [Use flat data](slug:filemanager-data-binding-flat-data)
282-
* [Use hierarchical data](slug:filemanager-data-binding-hierarchical-data) - each item holds its children in a nested property
253+
Learn the different ways to provide data to a FileManager:
283254

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

285258
## See Also
286259

0 commit comments

Comments
 (0)