Skip to content

docs(FileManager|MultiSelect): Add missing event and parameter #2389

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 3 commits into from
Sep 20, 2024
Merged

docs(FileManager|MultiSelect): Add missing event and parameter #2389

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4423501
docs(FileManager|MultiSelect): Add missing event and parameter
dimodi Sep 20, 2024
d95c25b
Update components/filemanager/events.md
dimodi Sep 20, 2024
4a6a974
Update components/filemanager/events.md
dimodi Sep 20, 2024
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
49 changes: 33 additions & 16 deletions components/filemanager/events.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ This article explains the events available in the Telerik FileManager for Blazor
* [Other Events](#other-events) - other events the grid provides.
* [OnModelInit](#onmodelinit)
* [OnDownload](#ondownload)
* [PathChanged](#ondownload)
* [SelectedItemsChanged](#selecteditemschanged)
* [ViewChanged](#viewchanged)

Expand Down Expand Up @@ -348,6 +349,10 @@ A FileManager in a WebAssembly app usually displays files from a remote server.
1. The server returns the file content.
1. The `OnDownload` handler puts the returned file content to a `MemoryStream` and assigns it to `args.Stream`.

### PathChanged

The `PathChanged` event fires when the user navigates to a different folder through the TreeView or by double-clicking a folder item in the [FileManager View]({%slug filemanager-views%}). The event handler receives the new path as a `string` argument.

### SelectedItemsChanged

The `SelectedItemChanged` event fires every time the user clicks on a new file/folder in the main pane of the FileManager. You can use it with one-way binding of the `SelectedItems` parameter to respond to user selection.
Expand All @@ -364,7 +369,8 @@ The `ViewChanged` event fires when the user toggles between the [two FileManager
@using System.IO

<TelerikFileManager Data="@Files"
@bind-Path="@DirectoryPath"
Path="@DirectoryPath"
PathChanged="@OnPathChanged"
View="@CurrentView"
ViewChanged="@OnViewChanged"
Height="400px"
Expand Down Expand Up @@ -393,12 +399,12 @@ The `ViewChanged` event fires when the user toggles between the [two FileManager

private async Task OnCreateHandler(FileManagerCreateEventArgs args)
{
var newFolder = args.Item as FlatFileEntry;
var newFolder = (FlatFileEntry)args.Item;

var parent = GetParent(newFolder, DirectoryPath);

newFolder.Id = "20";
newFolder.ParentId = parent.Id;
newFolder.ParentId = parent?.Id;
newFolder.Name = "New folder";
newFolder.IsDirectory = true;
newFolder.HasDirectories = false;
Expand All @@ -424,17 +430,17 @@ The `ViewChanged` event fires when the user toggles between the [two FileManager
Files.Add(newFolder);
}

RefreshData();
await RefreshData();
}

private FlatFileEntry GetDirectory(string path)
private FlatFileEntry? GetDirectory(string path)
{
var directory = Files.FirstOrDefault(x => x.IsDirectory && x.Path == path);

return directory;
}

private FlatFileEntry GetParent(FlatFileEntry currItem, string currDirectory)
private FlatFileEntry? GetParent(FlatFileEntry currItem, string currDirectory)
{
var parentItem = Files
.FirstOrDefault(x => x.IsDirectory && x.Path == currDirectory);
Expand All @@ -445,7 +451,7 @@ The `ViewChanged` event fires when the user toggles between the [two FileManager

private async Task OnUpdateHandler(FileManagerUpdateEventArgs args)
{
var item = args.Item as FlatFileEntry;
var item = (FlatFileEntry)args.Item;

if (item.IsDirectory)
{
Expand All @@ -466,6 +472,8 @@ The `ViewChanged` event fires when the user toggles between the [two FileManager
updatedItem.Path = Path.Combine(DirectoryPath, fullName);
Console.WriteLine(updatedItem.Path);
}

await Task.Delay(1); // simulate async operation
}

private async Task OnDownloadHandler(FileManagerDownloadEventArgs args)
Expand All @@ -481,6 +489,7 @@ The `ViewChanged` event fires when the user toggles between the [two FileManager

FlatFileEntry actualFile = (FlatFileEntry)args.Item;

await Task.Delay(1); // simulate async operation
string dummyFileContent = $"This file is a dummy version of {actualFile.Name}. It was downloaded with the Telerik Blazor FileManager.";
byte[] dummyFileBuffer = System.Text.Encoding.UTF8.GetBytes(dummyFileContent);

Expand All @@ -491,13 +500,13 @@ The `ViewChanged` event fires when the user toggles between the [two FileManager

private async Task OnDeleteHandler(FileManagerDeleteEventArgs args)
{
var currItem = args.Item as FlatFileEntry;
var item = (FlatFileEntry)args.Item;

var itemToDelete = Files.FirstOrDefault(x => x.Id == currItem.Id);
var itemToDelete = Files.FirstOrDefault(x => x.Id == item.Id);

Files.Remove(itemToDelete);

RefreshData();
await RefreshData();
}

private FlatFileEntry OnModelInitHandler()
Expand All @@ -516,14 +525,20 @@ The `ViewChanged` event fires when the user toggles between the [two FileManager
return item;
}

private void OnPathChanged(string newPath)
{
DirectoryPath = newPath;
}

private void OnSelect(IEnumerable<FlatFileEntry> selectedFiles)
{
// Update the view model.
SelectedItems = selectedFiles;
}

private void RefreshData()
private async Task RefreshData()
{
await Task.Delay(1); // simulate async operation
Files = new List<FlatFileEntry>(Files);
}

Expand All @@ -534,12 +549,12 @@ The `ViewChanged` event fires when the user toggles between the [two FileManager

public class FlatFileEntry
{
public string Id { get; set; }
public string ParentId { get; set; }
public string Name { get; set; }
public string Id { get; set; } = string.Empty;
public string? ParentId { get; set; }
public string Name { get; set; } = string.Empty;
public long Size { get; set; }
public string Path { get; set; }
public string Extension { get; set; }
public string Path { get; set; } = string.Empty;
public string Extension { get; set; } = string.Empty;
public bool IsDirectory { get; set; }
public bool HasDirectories { get; set; }
public DateTime DateCreated { get; set; }
Expand Down Expand Up @@ -674,6 +689,8 @@ The `ViewChanged` event fires when the user toggles between the [two FileManager
gridDesign
};

await Task.Delay(1); // simulate async operation

return files;
}
}
Expand Down
1 change: 1 addition & 0 deletions components/multiselect/overview.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,6 +111,7 @@ The Blazor MultiSelect provides various parameters that allow you to configure t
| `MinLength` | `int` | How many characters the user must type before the suggestion list appears. Often works together with [filtering]({%slug multiselect-filter%}). |
| `PersistFilterOnSelect` | `bool` | Controls whether the filter input will be cleared when the user selects an item. Applies when [MultiSelect filtering]({%slug multiselect-filter%}) is enabled and `AutoClose="false"`.
| `Placeholder` | `string` | The text the user sees as a hint when there is no selection. |
| `ShowArrowButton` | `bool` | Controls whether the MultiSelect will show an arrow button, which hints about its dropdown. When enabled, an empty MultiSelect component looks similar to a ComboBox, otherwise it looks similar to a TextBox. |
| `TextField` | `string` <br /> (`Text`)| The field in the model from which the text of the items is taken. |
| `TItem` | `Type` | The type of the model to which the component is bound. Required if you can't provide `Data` or `Value`. Determines the type of the reference object. |
| `TValue` | `Type` | The type of the value field in the model to which the component is bound. Required if you can't provide `Data` or `Value`. Determines the type of the reference object. The type of the values can be:<br /> - `number` (such as `int`, `double`, and so on)<br /> - `string`<br /> - `Guid`<br /> - `Enum` |
Expand Down
Loading