When the Virtualization feature is enabled, triggering Incell edit causes the Grid to scroll. When we scroll the edit is canceled. This happens when the row is partially visible.
https://www.screencast.com/t/zCJ9z9P83c
A more specific case is when you try to edit the last row. In case the editor height is bigger than the row height the Grid tries to scroll but there is no more data. The editor is closed and the item cannot be edited.
https://www.screencast.com/t/331cT4xxt
Reproduction: https://blazorrepl.telerik.com/QxEcECvx22pq4BBG59
Hello,
I'm currently using the Splitter Pane in a UI where I have two grids (one is a config grid and one is a report). The splitter allows me to resize each section vertically to see more of the report or the grid. It works well, but there is a bug I've noticed where if I click and drag it to the end and scroll past (making it 100%), even though I've released my finger from clicking, when my mouse scrolls back into the pane, it will be stuck scrolling as if my finger was still clicking the mouse button. It results in very weird behavior. If you allow the pane to go to 100% it is very difficult to not have this experience. My only way to mitigating is not allowing it to scroll as far, but it still still happens if you scroll outside of the pane fast enough.
If you go to your example here, you can witness the same issue.
https://docs.telerik.com/blazor-ui/components/splitter/size
Any idea on a way to mitigate this? I think if the mouse leaves the pane, it should stay where it was scrolled to and assume you are no longer scrolling. It is a great component otherwise!
Thanks!
DateTimePicker loses focus when the NOW button is clicked.
To reproduce the problem open the following demo:
https://demos.telerik.com/blazor-ui/datetimepicker/overview
Try clicking a few times on the NOW button. The focus is occasionally lost.
https://www.screencast.com/t/BPEXTy43
Checking a checkbox of a on demand-loaded child then collapsing and reopening its parent makes the checkbox disappear. However, it is still checked in the CheckedItems collection, but just not in the UI. See this REPL example. Steps...
1. Expand a top level item
2. Check its child checkbox
3. Collapse the top level item
4. Expand it again
Result: checkbox gone (in the UI)
If the application expands TreeView items programmatically, and then the user tries to select multiple items, an exception will occur.
The issue is a regression that occurred in version 3.0.0. A possible workaround is to Rebind()
the TreeView with a small delay after programmatic item expansion.
<TelerikTreeView @ref="@TreeViewRef"
Data="@FlatData"
@bind-ExpandedItems="@ExpandedItems"
SelectionMode="@TreeViewSelectionMode.Multiple"
SelectedItems="@SelectedItems"
SelectedItemsChanged="@((IEnumerable<object> items) => SelectedItemsHandler(items))" />
<TelerikButton OnClick="@ExpandAll">Expand All</TelerikButton>
<TelerikButton OnClick="@CollapseAll">Collapse All</TelerikButton>
@code {
public TelerikTreeView TreeViewRef { get; set; }
public IEnumerable<TreeItem> FlatData { get; set; }
public IEnumerable<object> SelectedItems { get; set; } = new List<object>();
public IEnumerable<object> ExpandedItems { get; set; } = new List<object>();
async Task ExpandAll()
{
ExpandedItems = FlatData.Where(x => x.HasChildren == true);
await Task.Delay(1);
TreeViewRef.Rebind();
}
void CollapseAll()
{
ExpandedItems = new List<object>();
SelectedItems = new List<object>();
}
void SelectedItemsHandler(IEnumerable<object> items)
{
SelectedItems = items;
}
protected override async void OnInitialized()
{
FlatData = LoadFlat();
}
int TreeLevels { get; set; } = 3;
int ItemsPerLevel { get; set; } = 3;
int IdCounter { get; set; } = 1;
List<TreeItem> LoadFlat()
{
List<TreeItem> items = new List<TreeItem>();
PopulateTreeItems(items, null, 1);
return items;
}
void PopulateTreeItems(List<TreeItem> items, int? parentId, int level)
{
for (int i = 1; i <= ItemsPerLevel; i++)
{
var itemId = IdCounter++;
items.Add(new TreeItem()
{
Id = itemId,
Text = $"Level {level} Item {i} Id {itemId}",
ParentId = parentId,
HasChildren = level < TreeLevels
});
if (level < TreeLevels)
{
PopulateTreeItems(items, itemId, level + 1);
}
}
}
public class TreeItem
{
public int Id { get; set; }
public string Text { get; set; }
public int? ParentId { get; set; }
public bool HasChildren { get; set; }
}
}
Scheduler cells are not aligned correctly in the Timeline View when Bootstrap Theme is used.
To reproduce the problem:
1. Open the following Scheduler Demo:
https://demos.telerik.com/blazor-ui/scheduler/overview
2. Select the Bootstrap Theme
3. Open the Timeline View
When using Telerik.UI.for.Blazor 4.0.0 and 4.0.1 the avatar sizing styles get overwritten.
Example of what it looks like in my browser, despite trying to use the medium size
Below is the inspection of the styles. This shows the size style gets overridden by a default size styling that comes later in the css file.
below i've included a screenshot of the path of the css to confirm i'm using the Nuget included css file.
Also, a side note that isn't that important.
On the avatar demo page example you reference the Button constants instead of the Avatar constants.
https://demos.telerik.com/blazor-ui/avatar/appearance
Hello,
I have a TelerikTreeView with about 2000 items bound to an ObservableCollection (Data). I use SelectedItems, SelectedItemsChanged, SelectionMode multitple and @bind-ExpandedItems.
When my users manually expand the nodes of the treeview, everything is fine and the operation of the treeview works smoothly. Loading UI components based on user selection takes less than 50ms.
As soon as I set the "ExpandedItems" collection from code (according to your treeview demo), the whole treeview operation becomes painfully slow with waiting times of 2 to 4 SECONDS for selection and expansion. Already expanding from code takes several seconds.
As soon as I reset the ExpandedItems from code and collapse the complete tree, the treeview is usable again without delays.
I am using the Template to control the rendering of the Drawer. When I place an <a> tag and focus it, I cannot use the Enter key to navigate to the desired link. The component traps the onkeypress event, which it should not.
<Admin>
<script suppress-error="BL9992">
window.navigateToHref = (ev) => {
if (ev.key === "Enter") {
location.href = ev.target.href
}
};
</script>
@* This example shows how to create header and footer for the Drawer and select an item manually. *@
<TelerikDrawer @bind-Expanded="@DrawerExpanded"
Data="@Data"
MiniMode="true"
Mode="@DrawerMode.Push"
@bind-SelectedItem="@SelectedItem"
@ref="@DrawerRef">
<Template>
@* the header *@
<div>
<TelerikButton OnClick="@(() => DrawerRef.ToggleAsync())" Icon="@FontIcon.Menu" />
@if (DrawerExpanded)
{
<div class="text-info" style="border-bottom:solid; font-weight: bold; margin-bottom: 3em; white-space:nowrap">
<a href="https://google.com" onkeydown="navigateToHref(event)">
My Custom Navigation to Google
</a>
</div>
}
else
{
<div class="text-info" style="border-bottom:solid; font-weight: bold;">
Nav
</div>
}
</div>
@* custom items rendering and item selection *@
<div class="k-drawer-items">
<ul>
@if (SelectedItem != null && DrawerExpanded)
{
<li class="k-drawer-item" style="white-space:nowrap">
<div>
<p><strong>@SelectedItem.Text</strong></p>
<p>@SelectedItem.Description</p>
</div>
</li>
}
@foreach (var item in Data)
{
@* Use onclick to handle manual item selection *@
<li @onclick="@(() => SelectedItem = item)"
class="k-drawer-item @GetSelectedItemClass(item)" style="white-space:nowrap">
<TelerikFontIcon Icon="@item.Icon"></TelerikFontIcon>
@if (DrawerExpanded)
{
<div>
<div>@item.Text</div>
</div>
}
</li>
}
</ul>
</div>
@* the footer *@
@if (DrawerExpanded)
{
<div style="text-align: center; margin-top: 3em; padding-top: 2em; border-top: 2px solid black; white-space:nowrap">
<img src="user-avatar.png" alt="my avatar" style="border-radius: 50%; width: 50px; height: 50px;" />
<br /><br />
<TelerikButton Icon="@FontIcon.Logout" ThemeColor="primary">Log Out</TelerikButton>
</div>
}
</Template>
<DrawerContent>
<div class="m-5">Content for @SelectedItem?.Text - @SelectedItem?.Description</div>
</DrawerContent>
</TelerikDrawer>
@code {
public TelerikDrawer<DrawerItem> DrawerRef { get; set; }
public DrawerItem SelectedItem { get; set; }
public bool DrawerExpanded { get; set; } = true;
public IEnumerable<DrawerItem> Data { get; set; } = new List<DrawerItem>
{
new DrawerItem {Text = "Shopping Cart", Icon = FontIcon.Cart, Description = "Items in shopping cart"},
new DrawerItem {Text = "Settings", Icon = FontIcon.Gear, Description = "My profile settings"},
new DrawerItem {Text = "Notifications", Icon = FontIcon.ExclamationCircle, Description = "My profile notifications"},
new DrawerItem {Text = "Calendar", Icon = FontIcon.Calendar, Description = "My events"},
};
public string GetSelectedItemClass(DrawerItem item)
{
if (SelectedItem == null) return string.Empty;
return SelectedItem.Text.ToLowerInvariant().Equals(item.Text.ToLowerInvariant()) ? "text-info" : "";
}
public class DrawerItem
{
public string Text { get; set; }
public FontIcon? Icon { get; set; }
public string Description { get; set; }
}
}
</Admin>
Hello,
i am fighting with ability to have inputs inside grid->gridtoolbar, but Tabindex of all inputs are automtically somehow reset to tabindex="-1" except the first one. All inputs mean: both telerik and standard html.
Is there any steps how tell the grid to NOT reset the tabindex?
Here is repo, focus on seccond,third input on finall html colde(all except "eAA") are with tabindex=-1
https://blazorrepl.telerik.com/GdalYJby04A79c4X38
Expected behaviour:
- maintain tabindex as it was set
or - if automatic indexing is necessary, number it incrementaly
Thank You for info
The loading animation is visible only when a user opens a file from the Toolbar of the component. When programmatically opening a file, the loader is not shown.