When a content pane is dragged and docked into an empty DockManager, the pane disappears instead of being displayed within the layout.
Example: https://blazorrepl.telerik.com/mJETQguc51eI2QhV23
I'm looking for what you have in WPF as we migrate ourselves over to Blazor - https://www.telerik.com/products/wpf/conversational-ui.aspx
---
ADMIN EDIT
For the time being, you can consider using the Kendo Chat widget as described in this sample project.
---
When the user renames a folder, the TreeView foes not refresh to display the new folder name.
The test page below is based on the FileManager Events example.
A possible workaround is to recreate the FileManager in the OnUpdate handler:
@using System.IO
@if (ShouldRenderFileManager)
{
<TelerikFileManager @ref="@FileManagerRef"
Data="@Files"
@bind-Path="@DirectoryPath"
View="@CurrentView"
ViewChanged="@OnViewChanged"
Height="400px"
OnCreate="@OnCreateHandler"
OnUpdate="@OnUpdateHandler"
OnDelete="@OnDeleteHandler"
OnModelInit="@OnModelInitHandler"
OnDownload="@OnDownloadHandler"
SelectedItems="@SelectedItems"
SelectedItemsChanged="@((IEnumerable<FlatFileEntry> selectedFiles) => OnSelect(selectedFiles))">
</TelerikFileManager>
}
@foreach (var item in Files)
{
<div>@item.Name</div>
}
@code {
private bool ShouldRenderFileManager { get; set; } = true;
private TelerikFileManager<FlatFileEntry>? FileManagerRef { get; set; }
private List<FlatFileEntry> Files { get; set; } = new();
private string DirectoryPath { get; set; } = string.Empty;
private IEnumerable<FlatFileEntry> SelectedItems { get; set; } = new List<FlatFileEntry>();
private FileManagerViewType CurrentView { get; set; }
private void OnViewChanged(FileManagerViewType newView)
{
CurrentView = newView;
}
private async Task OnCreateHandler(FileManagerCreateEventArgs args)
{
var newFolder = args.Item as FlatFileEntry;
var parent = GetParent(newFolder, DirectoryPath);
newFolder.Id = "20";
newFolder.ParentId = parent.Id;
newFolder.Name = "New folder";
newFolder.IsDirectory = true;
newFolder.HasDirectories = false;
newFolder.DateCreated = DateTime.Now;
newFolder.DateCreatedUtc = DateTime.Now;
newFolder.DateModified = DateTime.Now;
newFolder.DateModifiedUtc = DateTime.Now;
newFolder.Path = Path.Combine(DirectoryPath, newFolder.Name);
newFolder.Extension = null;
var parentDirectory = GetDirectory(DirectoryPath) ?? GetParent(newFolder, DirectoryPath);
if (parentDirectory != null)
{
// Simulate add to the file system.
newFolder.ParentId = parentDirectory.Id;
Files.Add(newFolder);
parentDirectory.HasDirectories = Files.Count(x => x.ParentId == parentDirectory.Id) > 0;
}
else
{
// Create a folder in the root directory.
Files.Add(newFolder);
}
RefreshData();
}
private FlatFileEntry GetDirectory(string path)
{
var directory = Files.FirstOrDefault(x => x.IsDirectory && x.Path == path);
return directory;
}
private FlatFileEntry GetParent(FlatFileEntry currItem, string currDirectory)
{
var parentItem = Files
.FirstOrDefault(x => x.IsDirectory && x.Path == currDirectory);
return parentItem;
}
private async Task OnUpdateHandler(FileManagerUpdateEventArgs args)
{
var item = args.Item as FlatFileEntry;
if (item.IsDirectory)
{
var name = item.Name ?? string.Empty;
var updatedItem = Files.FirstOrDefault(x => x.Id == item.Id);
updatedItem.Name = item.Name;
updatedItem.Path = Path.Combine(DirectoryPath, name);
ShouldRenderFileManager = false;
await Task.Delay(1);
ShouldRenderFileManager = true;
}
else
{
// The name property is updated, but also update the path to the file.
var name = item.Name ?? string.Empty;
var extension = item.Extension ?? string.Empty;
var fullName = extension.Length > 0 && name.EndsWith(extension) ?
name : $"{name}{extension}";
var updatedItem = Files.FirstOrDefault(x => x.Id == item.Id);
updatedItem.Name = item.Name;
updatedItem.Path = Path.Combine(DirectoryPath, fullName);
Console.WriteLine(updatedItem.Path);
}
}
private async Task OnDownloadHandler(FileManagerDownloadEventArgs args)
{
var selectedItem = args.Item as FlatFileEntry;
// The Filemanager does not have the actual file.
// Obtain the file contents, based on args.Item, and set the event arguments:
//args.Stream = the file stream of the actual selected file;
//args.MimeType = the MIME type of the actual file;
//args.FileName = the file name that the browser will receive (optional);
FlatFileEntry actualFile = (FlatFileEntry)args.Item;
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);
args.Stream = new MemoryStream(dummyFileBuffer);
args.MimeType = "text/plain";
args.FileName = $"filemanager-{actualFile.Name}-{DateTime.Now.ToString("yyyy-MM-dd-HH-mm-ss")}.txt";
}
private async Task OnDeleteHandler(FileManagerDeleteEventArgs args)
{
var currItem = args.Item as FlatFileEntry;
var itemToDelete = Files.FirstOrDefault(x => x.Id == currItem.Id);
Files.Remove(itemToDelete);
RefreshData();
}
private FlatFileEntry OnModelInitHandler()
{
var item = new FlatFileEntry();
item.Name = $"New folder";
item.Size = 0;
item.Path = Path.Combine(DirectoryPath, item.Name);
item.IsDirectory = true;
item.HasDirectories = false;
item.DateCreated = DateTime.Now;
item.DateCreatedUtc = DateTime.Now;
item.DateModified = DateTime.Now;
item.DateModifiedUtc = DateTime.Now;
return item;
}
private void OnSelect(IEnumerable<FlatFileEntry> selectedFiles)
{
// Update the view model.
SelectedItems = selectedFiles;
}
private void RefreshData()
{
Files = new List<FlatFileEntry>(Files);
}
protected override async Task OnInitializedAsync()
{
Files = await GetFlatFileEntries();
}
public class FlatFileEntry
{
public string Id { get; set; }
public string ParentId { get; set; }
public string Name { get; set; }
public long Size { get; set; }
public string Path { get; set; }
public string Extension { get; set; }
public bool IsDirectory { get; set; }
public bool HasDirectories { get; set; }
public DateTime DateCreated { get; set; }
public DateTime DateCreatedUtc { get; set; }
public DateTime DateModified { get; set; }
public DateTime DateModifiedUtc { get; set; }
}
// the next lines are hardcoded data generation so you can explore the FileManager freely
private async Task<List<FlatFileEntry>> GetFlatFileEntries()
{
var workFiles = new FlatFileEntry()
{
Id = "1",
ParentId = null,
Name = "Work Files",
IsDirectory = true,
HasDirectories = true,
DateCreated = new DateTime(2022, 1, 2),
DateCreatedUtc = new DateTime(2022, 1, 2),
DateModified = new DateTime(2022, 2, 3),
DateModifiedUtc = new DateTime(2022, 2, 3),
Path = Path.Combine("files"),
Size = 3 * 1024 * 1024
};
var Documents = new FlatFileEntry()
{
Id = "2",
ParentId = workFiles.Id,
Name = "Documents",
IsDirectory = true,
HasDirectories = false,
DateCreated = new DateTime(2022, 1, 2),
DateCreatedUtc = new DateTime(2022, 1, 2),
DateModified = new DateTime(2022, 2, 3),
DateModifiedUtc = new DateTime(2022, 2, 3),
Path = Path.Combine(workFiles.Path, "documents"),
Size = 1024 * 1024
};
var Images = new FlatFileEntry()
{
Id = "3",
ParentId = workFiles.Id,
Name = "Images",
IsDirectory = true,
HasDirectories = false,
DateCreated = new DateTime(2022, 1, 2),
DateCreatedUtc = new DateTime(2022, 1, 2),
DateModified = new DateTime(2022, 2, 3),
DateModifiedUtc = new DateTime(2022, 2, 3),
Path = Path.Combine(workFiles.Path, "images"),
Size = 2 * 1024 * 1024
};
var files = new List<FlatFileEntry>()
{
workFiles,
Documents,
Images
};
return files;
}
}
When I click on the NumericTextBox arrows the ValueChanged event is triggered twice.
https://blazorrepl.telerik.com/czEGPYbP19b16IVZ49
When double-clicking a cell in the All Day Row of the scheduler, one would expect that the IsAllDay field would be set to true in the SchedulerEditEventArgs similar to the way the start and end dates represent the date and time of the cell that was double-clicked. Unfortunately, the IsAllDay field is always false.
The following Repl taken from the demo reflects this: https://blazorrepl.telerik.com/mzYQvZvC394NLH0H06
Is there a way to determine if the double-clicked cell is in the All Day Row?
Thanks,
Mike
The DateRangePicker's Calendar popup will navigate to the Min value when the user deletes the currently selected EndValue.
https://blazorrepl.telerik.com/GzEPQoPw45otLVRU34
Select Start and End value.
Delete the End value.
The Calendar will show the Min value year, which is 1975 in this case. If Min is not set, the component will show 1900.
The problem occurs only with nullable values.
I am trying to make the Blazor Gantt control fill a container width and height.
If I set the height of the Gantt control to 100%, it resizes to fill the container except for the tree part of the Gantt control as it stays at whatever size the window was when it first loaded.
===== ADMIN EDIT =====
Meanwhile, as a workaround, you can add a bool flag that will refresh the whole Gantt upon resizing the container. Here is an example of this approach I have prepared at the following REPL link.If I type the maximum value for a decimal (79228162514264337593543950335) and then try to increase the number through the arrow buttons, I get the following exception:
System.OverflowException: Value was either too large or too small for a Decimal.
The behavior is reproducible with or without setting the Max parameter to decimal.MaxValue: https://blazorrepl.telerik.com/mSuFwebI299wPCzV25.
When the Grid PageSize exceeds the current data count and the InputType is Input, the Pager content cannot gain focus with the keyboard.
Here is a test page. A possible workaround is to switch the InputType at runtime. Then the user will be able to focus inside the Pager.
In some scenarios you may need a bit of extra code to get the current Grid item count.
<TelerikGrid Data="@GridData"
Pageable="true"
@bind-PageSize="@GridPageSize"
Navigable="true">
<GridSettings>
<GridPagerSettings InputType="@GridPagerInputType"
PageSizes="@( new List<int?> { 2, 5 } )" />
</GridSettings>
<GridColumns>
<GridColumn Field="@nameof(SampleModel.Name)" />
</GridColumns>
</TelerikGrid>
@code {
private List<SampleModel> GridData { get; set; } = new();
private int GridPageSize { get; set; } = 5;
//private PagerInputType GridPagerInputType { get; set; } = PagerInputType.Input;
private PagerInputType GridPagerInputType => GridPageSize >= GridData.Count ? PagerInputType.Buttons : PagerInputType.Input;
protected override void OnInitialized()
{
for (int i = 1; i <= 3; i++)
{
GridData.Add(new SampleModel()
{
Id = i,
Name = $"Name {i}"
});
}
}
public class SampleModel
{
public int Id { get; set; }
public string Name { get; set; } = string.Empty;
}
}
I have a grid that can have a large number of pages and is intended to be able to be viewed on a small width device.
The issue is that upon loading the grid and its data, the pager of the grid isn't changing how it's displayed even though it is supposed to be adaptive.
If the page is manually resized, only then does the pager correctly show as a dropdown.
I've reproduced this in a REPL, though it seems slightly inconsistent as opposed to my main project where it is able to be reproduced every time.
In the attached gif, notice that upon loading the page, the grid shows the pager as a list of numbers as it would if the page was a large width screen, but when resizing the page slightly, it is triggered to show the pages as a dropdown, which I believe is the intended behavior.
Is this issue known and is there a way to trigger the grid to redraw its pager after the data is loaded, or some other form of workaround for this without implementing a custom pager template?
I am trying to change the orientation of the SplitPane after the DockManager has rendered but nothing changes. It seems like the parameter is not reactive.
===
ADMIN EDIT
===
A possible option for the time being is to dispose and reinitialize the DockManager when you want to change the SplitPane Orientation.
Here is a runnable sample: https://blazorrepl.telerik.com/QfYHboFl280vuIkL03.