The Grid will cancel the insertion of a new item when:
===
In the meantime, a possible workaround is to hide the expand button for items, which are not added to the "permanent" Grid data yet. Here is how to do it with CSS:
.k-grid-add-row .k-hierarchy-cell .k-icon {
display: none;
}
In this example. Select a cell in column C. Then double click on another cell in column C. The unhandled exception will show up and a null reference exception is logged in the console.
https://blazorrepl.telerik.com/QHuSQBlj170zO4u130
The exception message is:
System.InvalidOperationException: TelerikValidationComponent requires a cascading parameter of type EditContext. You can use Telerik.Blazor.Components.TelerikValidationTooltip`1[System.String] inside a EditForm or TelerikForm.
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
Error: System.OverflowException: Value was either too large or too small for a Decimal.
The Grid exits edit mode when expanding or collapsing rows in a hierarchy scenario. This only happens when OnStateChanged is set.
Test page that reproduces the behavior: https://blazorrepl.telerik.com/wIkJvdlo09hXCV8u03
I have the following Grid setup:
Exception: System.ArgumentException: Operator 'IsEqualTo' is incompatible with operand types 'DateOnly?' and 'DateTime'
The header cell includes the following inner elements when the Grid is sortable:
However, if I disable sorting all those elements are omitted which is not consistent.
The value of the FileName parameter is not updated properly in the OnBeforeExport event handler.
<AdminEdit>
A workaround for the time being: REPL snippet.
</AdminEdit>
When using the Filter Menu inside the Column Menu filter value is reset if Rebind is called. For reference, if using FIlter Row or a standalone Filter Menu value is not reset upon invoking Rebind.
Reproduction: https://blazorrepl.telerik.com/mdOJYHas48vPCPUv47.
On Hierarchy grids with Inline edit mode, I noticed that if a row is currently being edited and I try to expand the row to show the child grid an exception is thrown: "Error: System.InvalidOperationException: TelerikValidationComponent requires a cascading parameter of type EditContext. You can use Telerik.Blazor.Components.TelerikValidationTooltip`1[System.String] inside a EditForm or TelerikForm".
The problem stems from a validation tool inside the Grid EditorTemplate.
When a user deletes a record that decreases the number of pages on that Grid, and then they try to edit or add a record, they get stuck in the OnCancel event handler, which gets called over and over in an endless loop.
The behavior can be seen:
Steps To Reproduce
https://blazorrepl.telerik.com/GokIvFva42BLx7yl37
1. Delete item 11. The Grid will move you to page 1.
2. Try to edit or add a new item. OnCancel will fire in a loop.
3. If OnAdd and OnEdit are not defined, the loop will occur in OnUpdate and OnCancel.
In the case of a sorted column, NVDA is not narrating the correct column name and narrating the incorrect Roles for the column headers.
In the case of an unsorted column, NVDA is narrating the column name twice and repeating the information.
I have a Grid bound to ObservableCollection and I try to add a new record, the Grid stays in edit mode even if I click the Save button.
Workaround:
@using System.Collections.ObjectModel
@using Telerik.FontIcons
<TelerikGrid Data="@Cards"
Height="800px"
FilterMode="GridFilterMode.FilterRow"
EditMode="GridEditMode.Inline"
OnCreate="NewCard"
OnUpdate="UpdateCard"
OnDelete="DeleteCard"
ConfirmDelete="true"
@ref="@GridReference">
<GridToolBarTemplate>
<GridCommandButton Command="Add" Icon="@FontIcon.Plus">New</GridCommandButton>
</GridToolBarTemplate>
<GridColumns>
<GridColumn Field="@nameof(AdminCard.SerialNumber)" Title="Serial number" />
<GridColumn Field="@nameof(AdminCard.DisplayNumber)" Title="Display number" />
<GridColumn Field="@nameof(AdminCard.Name)" />
<GridCommandColumn Width="140px">
<GridCommandButton Command="Save" Icon="@FontIcon.Save" ShowInEdit="true" />
<GridCommandButton Command="Edit" Icon="@FontIcon.Pencil" />
<GridCommandButton Command="Delete" Icon="@FontIcon.Trash" />
<GridCommandButton Command="Cancel" Icon="@FontIcon.Cancel" ShowInEdit="true" />
</GridCommandColumn>
</GridColumns>
</TelerikGrid>
@code {
TelerikGrid<AdminCard> GridReference { get; set; }
public ObservableCollection<AdminCard> Cards { get; set; } = new();
protected override async Task OnInitializedAsync() =>
Cards = new ObservableCollection<AdminCard>{
new AdminCard{SerialNumber="123", DisplayNumber="1234 1234", Name="Jim"}
};
private async Task NewCard(GridCommandEventArgs args)
{
AdminCard card = (AdminCard)args.Item;
Cards.Add(card);
//apply this after saving the new record to the database
var gridState = GridReference.GetState();
gridState.InsertedItem = null;
gridState.OriginalEditItem = null;
await GridReference.SetStateAsync(gridState);
}
private async Task UpdateCard(GridCommandEventArgs args)
{
AdminCard fromGrid = (AdminCard)args.Item;
AdminCard existing = Cards.Single(c => c.Id == fromGrid.Id);
existing.SerialNumber = fromGrid.SerialNumber;
existing.DisplayNumber = fromGrid.DisplayNumber;
existing.Name = fromGrid.Name;
}
private async Task DeleteCard(GridCommandEventArgs args)
{
AdminCard card = (AdminCard)args.Item;
Cards.Remove(card);
}
public class AdminCard
{
public string Id { get; set; } = Guid.NewGuid().ToString();
public string SerialNumber { get; set; } = "";
public string DisplayNumber { get; set; } = "";
public string Name { get; set; } = "";
}
}
Consider this test page: https://blazorrepl.telerik.com/cSEQOTQY53LRL4je36
This happens only when using a column menu - ShowColumnMenu="true".
===
A possible workaround is to use a FilterButtonsTemplate and clear the filters programmatically if the filter descriptor is empty:
@using Telerik.DataSource
@using Telerik.DataSource.Extensions
<TelerikGrid TItem="@Employee"
OnRead="@OnReadHandler"
Pageable="true"
FilterMode="@GridFilterMode.FilterMenu"
FilterMenuType="@FilterMenuType.CheckBoxList"
ShowColumnMenu="true"
Height="400px">
<GridColumns>
<GridColumn Field="@(nameof(Employee.EmployeeId))" Filterable="false" />
<GridColumn Field="@nameof(Employee.Name)">
<FilterMenuTemplate Context="context">
<TelerikCheckBoxListFilter Data="@NameOptions"
Field="@(nameof(NameFilterOption.Name))"
@bind-FilterDescriptor="@context.FilterDescriptor">
</TelerikCheckBoxListFilter>
</FilterMenuTemplate>
<FilterMenuButtonsTemplate Context="filterContext">
<TelerikButton OnClick="@( async () => await ApplyFilterAsync(filterContext) )"
ThemeColor="primary">Filter</TelerikButton>
<TelerikButton OnClick="@( async () => await ClearFilterAsync(filterContext) )">Clear</TelerikButton>
</FilterMenuButtonsTemplate>
</GridColumn>
<GridColumn Field="@nameof(Employee.Team)" Title="Team">
<FilterMenuTemplate Context="context">
<TelerikCheckBoxListFilter Data="@TeamsList"
Field="@(nameof(TeamNameFilterOption.Team))"
@bind-FilterDescriptor="@context.FilterDescriptor">
</TelerikCheckBoxListFilter>
</FilterMenuTemplate>
</GridColumn>
<GridColumn Field="@nameof(Employee.IsOnLeave)" Title="On Vacation" />
</GridColumns>
</TelerikGrid>
@code {
List<Employee> AllGridData { get; set; }
#region custom-filter-data
List<TeamNameFilterOption> TeamsList { get; set; }
List<NameFilterOption> NameOptions { get; set; }
private async Task ApplyFilterAsync(FilterMenuTemplateContext filterContext)
{
var hasFilters = filterContext.FilterDescriptor.FilterDescriptors.OfType<FilterDescriptor>().Any(x => !string.IsNullOrEmpty(x.Value.ToString()));
if (hasFilters)
{
await filterContext.FilterAsync();
}
else
{
await filterContext.ClearFilterAsync();
}
}
private async Task ClearFilterAsync(FilterMenuTemplateContext filterContext)
{
await filterContext.ClearFilterAsync();
}
//obtain filter lists data from the data source to show all options
async Task GetTeamOptions()
{
if (TeamsList == null) // sample of caching since we always want all distinct options,
//but we don't want to make unnecessary requests
{
TeamsList = await GetNamesFromService();
}
}
async Task<List<TeamNameFilterOption>> GetNamesFromService()
{
await Task.Delay(500);// simulate a real service delay
// this is just one example of getting distinct values from the full data source
// in a real case you'd probably call your data service here instead
// or apply further logic (such as tie the returned data to the data the grid will have according to your business logic)
List<TeamNameFilterOption> data = AllGridData.OrderBy(z => z.Team).Select(z => z.Team).
Distinct().Select(t => new TeamNameFilterOption { Team = t }).ToList();
return await Task.FromResult(data);
}
async Task GetNameOptions()
{
if (NameOptions == null)
{
NameOptions = await GetNameOptionsFromService();
}
}
async Task<List<NameFilterOption>> GetNameOptionsFromService()
{
await Task.Delay(500);// simulate a real service delay
List<NameFilterOption> data = AllGridData.OrderBy(z => z.Name).Select(z => z.Name).
Distinct().Select(n => new NameFilterOption { Name = n }).ToList();
return await Task.FromResult(data);
}
#endregion custom-filter-data
async Task OnReadHandler(GridReadEventArgs args)
{
//typical data retrieval for the grid
var filteredData = await AllGridData.ToDataSourceResultAsync(args.Request);
args.Data = filteredData.Data as IEnumerable<Employee>;
args.Total = filteredData.Total;
}
protected override async Task OnInitializedAsync()
{
AllGridData = new List<Employee>();
var rand = new Random();
for (int i = 1; i <= 15; i++)
{
AllGridData.Add(new Employee()
{
EmployeeId = i,
Name = "Employee " + i.ToString(),
Team = "Team " + i % 3,
IsOnLeave = i % 2 == 0
});
}
await GetTeamOptions();
await GetNameOptions();
}
public class Employee
{
public int EmployeeId { get; set; }
public string Name { get; set; }
public string Team { get; set; }
public bool IsOnLeave { get; set; }
}
// in this sample we use simplified models to fetch less data from the service
// instead of using the full Employee model that has many fields we do not need for the filters
public class TeamNameFilterOption
{
public string Team { get; set; }
}
public class NameFilterOption
{
public string Name { get; set; }
}
}
I noticed a different behavior when filtering programmatically through the state and when you use the filter UI.
When filtering programmatically the filter is set after the data arrives. I am using a FiltterMenu and the filter icon is colored to indicate there is an applied filter only after the data is filtered. When filtering from the menu, I can the opposite behavior - the filter is set first and then the data is filtered. To me, this seems to be the correct behavior.
Reproduction: https://blazorrepl.telerik.com/wSavwTPd367WqA9r37.