OnChange and OnBlur event for editors (TelerikTextBox, NumericTextBox, and others) is not fired in InCell edit mode with Tab key.
Hello,
When a Grid is using multi column headers, and I add one more column in the OnBeforeExport event, this new column has no title in the exported file.
A possible workaround might be to use a column with zero Width and change the width in OnBeforeExport.
@using Telerik.Blazor.Common.Export.Excel
@using Telerik.Blazor.Components.Grid
<TelerikGrid TItem="@FlowRun"
Pageable="true"
OnRead="@GetData">
<GridToolBar>
<GridCommandButton Command="ExcelExport" Icon="file-excel">Export to Excel</GridCommandButton>
<GridCommandButton Command="CsvExport" Icon="file-csv">Export to CSV</GridCommandButton>
<label class="k-checkbox-label"><TelerikCheckBox @bind-Value="@ExportAllPages" />Export All Pages</label>
</GridToolBar>
<GridExport>
<GridExcelExport FileName="telerik-grid-export" AllPages="@ExportAllPages" OnBeforeExport="@BeforeExcelExport" />
<GridCsvExport FileName="telerik-grid-export" AllPages="@ExportAllPages" OnBeforeExport="@BeforeCsvExport" />
</GridExport>
<GridColumns>
<GridColumn Field="@nameof(FlowRun.FileName)" Title="File Name" Width="300px" />
<GridColumn Field="@nameof(FlowRun.Type)" Title="Type" Width="100px" />
<GridColumn Field="@nameof(FlowRun.FileSize)" Title="File Size" Width="200px" />
<GridColumn Title="Source">
<Columns>
<GridColumn Field="@(nameof(FlowRun.Source))" Title="MPID"/>
<GridColumn Field="@(nameof(FlowRun.SourceFileProtocol))" Title="Type" />
</Columns>
</GridColumn>
<GridColumn Field="@nameof(FlowRun.ErrorMessage)"
Title = "Error"
Width="0" />
</GridColumns>
</TelerikGrid>
@code {
bool ExportAllPages { get; set; }
private async Task GetData(GridReadEventArgs args)
{
args.Data = Enumerable.Range(1, 10).Select(x => new FlowRun
{
FileName = $"File {x}",
Type = $"Type {x}",
FileSize = x * 2,
Source = $"Source {x}",
SourceFileProtocol = FileProtocol.CIX,
ErrorMessage = $"Error {x}"
}).ToList();
args.Total = 100;
}
private void BeforeCsvExport(GridBeforeCsvExportEventArgs obj)
{
AddErrorMessageColumn(obj);
}
private void BeforeExcelExport(GridBeforeExcelExportEventArgs obj)
{
AddErrorMessageColumn(obj);
}
private void AddErrorMessageColumn(GridBeforeSpreadsheetExportEventArgs args)
{
args.Columns.Find(x => x.Field == nameof(FlowRun.ErrorMessage)).Width = "100px";
//args.Columns.Add(new ExcelExportableColumn
//{
// Field = nameof(FlowRun.ErrorMessage),
// Title = "Error"
//});
}
public class FlowRun
{
public string FileName { get; set; }
public string Type { get; set; }
public long? FileSize { get; set; }
public string Source { get; set; }
public FileProtocol SourceFileProtocol { get; set; }
public string ErrorMessage { get; set; }
}
public enum FileProtocol
{
Unknown,
PIX,
CIX,
SS
}
}
I have a Telerik Pager within a Telerik Grid. If I select a larger page size within the pager, then select a smaller size and do not scroll, the next time I open the pager, the dropdown portion opens in the wrong place. When I view the inspect tool, it appears that the CSS top value is not being updated when changing page sizes from bigger to smaller. Is this a Telerik limitation with the pager?
In the images, we select items per page from 10 to 25, and then we go immediately from 25 to 10 items per page. Without scrolling, we click into the drop down list again and we are able to replicate this issue.
Before: Items per page: 10 -> 25
After:
Thank you in advance.
When the Grid is grouped and aggregate functions are enabled, paging performance degrades significantly because grouping and aggregate calculations are executed on every page change. This results in noticeable delays and UI stutter, especially in WebAssembly applications and larger datasets.
This enhancement optimizes page navigation for grouped Grid scenarios with aggregates by avoiding repeated processing when the underlying data has not changed, resulting in substantially faster paging performance while preserving existing functionality and first-load behavior.
When the user presses ESC to exit edit mode from an EditorTemplate with a ComboBox / MultiColumnComboBox / MultiSelect, the cell value is cleared and this change persists in subsequent editing. The original data item value is cleared too, although this is not immediately obvious.
The issue occurs in version 14.1.0 and WebAssembly apps are more likely to suffer from it.
To optimize performance, I built a custom component that allows the user to choose which aggregates should be calculated. This component ensures that <GridAggregate> tags are inserted into <GridAggregates> via a foreach loop.
This works without any issues, at least when the selection is made for the first time.
However, if a selection is made in which the column of a new aggregate appears before an already selected aggregate, errors occur in the grid. AggregateResults now contains duplicates of an existing aggregate, and the new aggregates are missing.
Test project available in ticket 1718830.
(bug report only)
Regression introduced in 13.0.0.
1. Run this example: https://blazorrepl.telerik.com/wUuSGClv00orFeRm59
(optional)
The Size, Rounded, FillMode parameters are ignored.
The parameter values should apply and change the appearance of the SearchBox.
I am resetting the Grid State by calling Grid.SetState(null). This doesn't reset ColumnState<T>.Locked boolean to false and the columns remain locked.
---
ADMIN EDIT
---
A possible workaround for the time being is to additionally loop through the ColumnStates collection of the State and set the Locked property to false for each column.
(bug report only)
Run this example: https://blazorrepl.telerik.com/GqaiPtbH54zmCKSH29
There are two editable columns (Price).
1. Click on the first Price column cell in the first row.
2. Press Tab key. The last editable cell on the first row is focused and is brought into view.
3. Press Tab again. The first editable cell on the second row is focused and brought into view.
4. Press Tab again. The last editable cell on the second row is focused, but it is not brought into view.
(optional)
Navigation across editable cells works inconsistently. On every other row, the last editable cell is not brought into view.
Navigation should work consistently on every row.
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?
If the GridScrollMode.Virtual is enabled for the Grid, and the NoDataTemplate exceeds the height of the Grid container, a user can infinitely scroll inside the table even when there is no data and the template is displaying.
===ADMIN EDIT===
A possible workaround is to apply "overflow-y: hidden;" when the NoDataTemplate is shown: REPL link.
Once the user locks a column through the column menu, they cannot unlock it, because the Unlock option remains disabled, while the Locked option remains enabled.
Regression in version 14.1.0. Potentially related to https://github.com/telerik/blazor/pull/14727
@page "/"
<TelerikGrid Data="@GridData"
Pageable="true"
FilterMode="@GridFilterMode.FilterRow"
Sortable="true"
ShowColumnMenu="true"
Width="700px">
<GridColumns>
<GridColumn Field="@(nameof(SampleData.Id))" Width="80px" ShowColumnMenu="false" />
<GridColumn Field="@(nameof(SampleData.FirstName))" Title="First Name" Id="firstname-column-id" Width="300px" />
<GridColumn Field="@(nameof(SampleData.LastName))" Title="Last Name" Id="lastname-column-id" Width="300px" />
<GridColumn Field="@(nameof(SampleData.CompanyName))" Title="Company" Id="companyname-column-id" Width="300px" />
<GridColumn Field="@(nameof(SampleData.Team))" Title="Team" Id="team-column-id" Width="300px" />
<GridColumn Field="@(nameof(SampleData.HireDate))" Title="Hire Date" Width="300px" />
</GridColumns>
</TelerikGrid>
@code {
private IEnumerable<SampleData> GridData = Enumerable.Range(1, 30).Select(x => new SampleData
{
Id = x,
FirstName = $"FirstName {x}",
LastName = $"LastName {x}",
CompanyName = $"Company {x}",
Team = "team " + x % 5,
HireDate = DateTime.Now.AddDays(-x).Date
});
public class SampleData
{
public int Id { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
public string CompanyName { get; set; }
public string Team { get; set; }
public DateTime HireDate { get; set; }
}
}
Cannot unlock a locked column, the Unlock option remains disabled.
The Unlock and Lock options in the column menu must reflect the current column state.