When you zoom out, the span that displays the Grid pager's content has its style set to display: none, and it does not always reappear when you zoom in after that.
Reproduction
1. Run this REPLIt seems that the issue appeared after upgrading to Telerik 5.0 from 4.6.
When using a Grid with a locked column and column virtualization enabled, focusing cell from that locked column breaks the layout on horizontal scrolling.
The Grid is supposed to show a loading animation when it detects a data operation that requires more than 600ms to complete. However, if this operation is triggered programmatically through the state and not through the UI, the loading indicator is not shown.
Reproduction: https://blazorrepl.telerik.com/mSuPQpvx498wHvV816.
===
ADMIN EDIT
===
A possible workaround for the time being is to use a LoaderContainer component when invoking programmatic data operation similar to how the initial loader is shown here: https://demos.telerik.com/blazor-ui/grid/loading-animation.
When the page is printed, the Grid is extended down onto multiple sheets of paper. This is because the Grid is large. The issue I am having is that the column headers are not repeating on each printed page. This makes the grid very hard to read. Is there a setting that can force the column headers to print on each printed page?
=====ADMIN EDIT=====
Reference: Repeated Table Headers Kendo jQuery.
For Excel export, this depends on: https://feedback.telerik.com/document-processing/1356293-print-titles.
For PDF export, this depends on: https://feedback.telerik.com/blazor/1434269-export-grid-to-pdf.
Hi,
when using SetStateAsync(), OnRead is called ok, but loading indicator is not presented as usual.
How to reproduce:
1. button = loading data by SetStateAsync(), no progress indicated.
2. button = loading data throught rebind, is ok
demo is based on https://docs.telerik.com/blazor-ui/components/grid/refresh-data
Expected: same behavior as by button 2. -> Rebind()->OnRead()...loading progress
Thanks
Reproduceable example: https://blazorrepl.telerik.com/QSEganvg12BVw2ZU37
Steps to reproduce:
If you remove the GridAggregates emtpy render fragment, or put at least one GridAggregate component in it, OnStateInit fires like expected.
In my project, I've created a component that wraps around the TelerikGrid that I use on all my pages, so that I can have many properties and functions set to reasonable defaults for my use case. My component has an option to conditionally include GridAggregate components within the inner TelerikGrid's GridAggregates render fragment based on separate configuration. If no separate configuration is provided, no GridAggregate components are included, and the GridAggregates render fragment is left blank. Since my component is built in razor markup, there isn't a great option for nulling out that render fragment if it's empty. I had no problems with this exact same code in UI for Blazor version 5.1, and I hope this can be fixed.
Until version 6.0 it was possible to set the Grid PageSize to "All" by setting it to the total item count. This workaround no longer works.
Please enhance the API to allow setting an "All" page size with code or initially.
We have a grid with a GridCheckboxColumn that we have configured through a '.unselectable-row' style so that certain elements cannot be selected (those elements with a padlock in the second column cannot be selected).
The grid works correctly in isolation, but when we add a TelerikLoaderContainer that is displayed during data loading process, the grid doesn't working properly: it is possible to select all the enabled elements of the grid using the button in the header of the checkbox column. However it is not possible to deselect them from the button in the header of the checkbox column when there is any unselectable element.
Here it is a link to REPL with a reproducible example: https://blazorrepl.telerik.com/GyYhYXPI24gIYgIJ03
To reproduce the problem, you sholud select all grid elements from the checkbox column header button and try to deselect them. You will not be able to deselect all the elements.
Now comment the LoaderContainer component and repeat the test. You will see that now it is possible to deselect correctly all the elements.
How can we deselect all the elements from the header while keeping the loadercontainer?
I have a filterable Grid with Enum values. I am saving the state in the OnStateChanged so I can then restore it on future page loads (similar to the approach here).
When trying to restore the deserialized state in the OnStateInit, the Grid throws:
Unhandled exception rendering component: Specified cast is not valid.
Reproduction: https://blazorrepl.telerik.com/QSaiaDkq55RfazF402.
===
ADMIN EDIT
===
At the time of writing (UI for Blazor 6.1.0), the Grid only supports int as an underlying type of the Enum values. When the state is deserialized, the Enum values are returned as short and this causes the issue.
To handle the scenario for the time being you can modify the state object before setting it to the Grid. Loop through the filter descriptors in the state and convert the filter value of the columns bound to Enum, so the value type in the state is the supported int.
Here is a basic example: https://blazorrepl.telerik.com/woaCOZlT29E05lpL45.
I am using InCell Grid editing. I want to prevent an edit cell from closing on certain condition. However, when I cancel the update with args.IsCancelled = true in OnUpdate, the user can still close the edited cell with Enter or Tab. This is inconsistent with inline or popup editing.
===
A possible workaround is to cancel both OnUpdate and the subsequent OnEdit.
https://blazorrepl.telerik.com/QykMHkks10APuDLQ47
@using System.ComponentModel.DataAnnotations
<TelerikGrid Data="@GridData"
EditMode="@GridEditMode.Incell"
OnEdit="@OnGridEdit"
OnUpdate="@OnGridUpdate">
<GridColumns>
<GridColumn Field="@nameof(SampleModel.Name)" />
<GridColumn Field="@nameof(SampleModel.Min)" />
<GridColumn Field="@nameof(SampleModel.Max)" />
</GridColumns>
</TelerikGrid>
<TelerikNotification @ref="@NotificationRef"
HorizontalPosition="@NotificationHorizontalPosition.Center"
VerticalPosition="@NotificationVerticalPosition.Top" />
@code {
private TelerikNotification? NotificationRef { get; set; }
private List<SampleModel> GridData { get; set; } = new();
private bool ShouldCancelOnEdit { get; set; }
private int LastId { get; set; }
private void OnGridEdit(GridCommandEventArgs args)
{
if (ShouldCancelOnEdit)
{
ShouldCancelOnEdit = false;
args.IsCancelled = true;
}
}
private void OnGridUpdate(GridCommandEventArgs args)
{
var updatedItem = (SampleModel)args.Item;
if (updatedItem.Min > updatedItem.Max)
{
NotificationRef?.Show(new NotificationModel()
{
ThemeColor = ThemeConstants.Notification.ThemeColor.Error,
Text = "Min must be smaller than Max"
});
args.IsCancelled = true;
ShouldCancelOnEdit = true;
}
else
{
var originalItemIndex = GridData.FindIndex(i => i.Id == updatedItem.Id);
if (originalItemIndex != -1)
{
GridData[originalItemIndex] = updatedItem;
}
ShouldCancelOnEdit = false;
}
}
protected override void OnInitialized()
{
for (int i = 1; i <= 5; i++)
{
GridData.Add(new SampleModel()
{
Id = ++LastId,
Name = $"SampleModel {LastId}",
Min = Random.Shared.Next(1, 10),
Max = Random.Shared.Next(11, 20)
});
}
}
public class SampleModel
{
public int Id { get; set; }
[Required]
public string Name { get; set; } = string.Empty;
public int Min { get; set; }
public int Max { get; set; }
}
}
Please add the ability to expand or collapse all rows as a default feature of the Grid.
I've seen the Expand Rows From Code example, but I'd like this to be part of the grid itself, not a button outside of the grid.
I'm trying to add a button in the unused top left cell of the grid, but I've not found a way to use that cell.