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)
Please expose the ability to set an Id on the Chip and ChipList components.
Example:
<TelerikChip Id="chipid"></TelerikChip>
<TelerikChipList Id="chipid"></TelerikChipList>
Hi
Can bounding box support be considered for the map please. It would be great if we can reference at runtime the current bounds that are displayed on the screen in bounding box format (https://wiki.openstreetmap.org/wiki/Bounding_Box) such as the open street map format below.
Im hoping as the map uses open street map this can be made available to the component.
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
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,
Please consider a Grid feature that changes the component layout on mobile devices or narrow screens. The idea is to switch the column layout to a card layout or anything similar to this example: https://css-tricks.com/responsive-data-tables/
It is possible to implement a similar behavior with the Telerik Blazor Grid and MediaQuery components, but it requires reusing the column titles in the CSS code: https://blazorrepl.telerik.com/GnYPmHFR176Jg5Yg02
===
Telerik Blazor team: Everyone who is interested in this feature, please vote for it to help us prioritize. Also, share your opinion about which Grid features you strictly need in the "mobile" layout and which ones you are ready to sacrifice. Some features don't make sense in a card / listview layout anyway, but still, the mobile-friendly Grid may require completely different HTML markup and UX, so some features may need to be completely revamped.