Regression introduced in version 10.0.0.
The OnStateChanged event fires 4 times
The OnStateChanged event fires 2 times (see https://www.telerik.com/blazor-ui/documentation/components/grid/state#onstatechanged).
All
9.1.0
We are experiencing an issue where the ExportToPdfAsync() method on TelerikGrid is returning Excel data (XLSX format) instead of PDF data. This is causing MIME type errors when trying to process the exported data as a PDF.
===ADMIN EDIT===
Workaround
In the meantime, a possible workaround would be to use the document processing library (make sure the correct packages are installed for it) and import the xlsx file to a workbook, and then export the workbook to PDF. Here is an improvised example that demonstrates this by saving the file in your wwwroot folder as a pdf.
@inject IWebHostEnvironment HostingEnvironment
<TelerikGrid Data="@bookList" Height="75svh" Resizable="true" Sortable="true" Pageable="true" PageSize="15"
FilterMode="@GridFilterMode.FilterMenu" SelectionMode="@GridSelectionMode.Multiple"
SelectedItems="@SelectedBooks" @ref="@BookGrid"
SelectedItemsChanged="@((IEnumerable<BookInfo> sel) => OnRowSelect(sel))">
<GridToolBarTemplate>
<TelerikButton OnClick="@GenerateReport">Generate PDF</TelerikButton>
</GridToolBarTemplate>
<GridExport>
<GridPdfExport AllPages="true" PageOrientation="GridPdfExportPageOrientation.Landscape"
PaperSize="GridPdfExportPaperSize.A3" />
</GridExport>
<GridColumns>
<GridCheckboxColumn CheckBoxOnlySelection="true"></GridCheckboxColumn>
<GridColumn Field="ISBN">
<HeaderTemplate><b>ISBN</b></HeaderTemplate>
</GridColumn>
<GridColumn Field="Author">
<HeaderTemplate><b>Author</b></HeaderTemplate>
</GridColumn>
<GridColumn Field="Title">
<HeaderTemplate><b>Title</b></HeaderTemplate>
</GridColumn>
<GridColumn Field="Genre">
<HeaderTemplate><b>Genre</b></HeaderTemplate>
</GridColumn>
<GridColumn Field="PublishedYear">
<HeaderTemplate><b>Year</b></HeaderTemplate>
</GridColumn>
<GridColumn Field="CopiesAvailable">
<HeaderTemplate><b>Copies</b></HeaderTemplate>
</GridColumn>
</GridColumns>
</TelerikGrid>
@code {
private async Task GenerateReport()
{
isLoading = true;
var pdfStream = await BookGrid.ExportToPdfAsync();
// The stream is actually XLSX, so convert it to PDF
using var ms = new MemoryStream(pdfStream.ToArray());
var xlsxProvider = new Telerik.Windows.Documents.Spreadsheet.FormatProviders.OpenXml.Xlsx.XlsxFormatProvider();
var workbook = xlsxProvider.Import(ms);
var rootPath = HostingEnvironment.WebRootPath;
var saveLocation = Path.Combine(rootPath, "LibraryBooks.pdf");
var pdfProvider = new Telerik.Windows.Documents.Spreadsheet.FormatProviders.Pdf.PdfFormatProvider();
using (var fileStream = new FileStream(saveLocation, FileMode.Create))
{
pdfProvider.Export(workbook, fileStream);
}
}
public class BookInfo
{
public string ISBN { get; set; }
public string Author { get; set; }
public string Title { get; set; }
public string Genre { get; set; }
public int PublishedYear { get; set; }
public int CopiesAvailable { get; set; }
}
private List<BookInfo> bookList = new()
{
new BookInfo { ISBN = "978-0451524935", Author = "George Orwell", Title = "1984", Genre = "Dystopian", PublishedYear = 1949, CopiesAvailable = 4 },
new BookInfo { ISBN = "978-0439139601", Author = "J.K. Rowling", Title = "Harry Potter and the Goblet of Fire", Genre = "Fantasy", PublishedYear = 2000, CopiesAvailable = 7 },
new BookInfo { ISBN = "978-0140449266", Author = "Homer", Title = "The Odyssey", Genre = "Epic Poetry", PublishedYear = -800, CopiesAvailable = 2 }
};
private TelerikGrid<BookInfo> BookGrid;
private List<BookInfo> SelectedBooks = new();
private bool isLoading = false;
private void OnRowSelect(IEnumerable<BookInfo> selected)
{
SelectedBooks = selected.ToList();
}
}
A Grid component with GridToolBar increases memory usage due to event handler leaks, specifically associated with the GridToolBar and ColumnMenuToolBar.
Hello,
I’ve run into a reproducible issue with the Blazor Grid in Adaptive mode. After the grid adapts to a smaller container and then the container is expanded again, the data rows scroll while the header remains fixed, so the header and data become detached.
I’m attaching three screenshots that show the sequence:
Steps to reproduce
Expected behavior
Header and data remain synchronized—when the grid is scrolled horizontally/vertically, both header and rows should scroll together.
Actual behavior
After returning from Adaptive to the standard layout, the header does not move with the rows when scrolling; it appears “detached”.
Notes
Please let me know if this is a known issue, if there’s a fix/workaround, or if you need any additional details.
Workaround:
<TelerikGrid Data="@GridData"
SelectionMode="@GridSelectionMode.Multiple"
SelectedItems="@SelectedItems"
SelectedItemsChanged="@( (IEnumerable<Employee> newSelected) => OnSelectedItemsChanged(newSelected) )"
Height="300px">
<GridToolBarTemplate>
<TelerikButton Enabled="@(SelectedItems.Any())" OnClick="@DeleteSelectedEmployees">Delete</TelerikButton>
</GridToolBarTemplate>
<GridColumns>
<GridCheckboxColumn SelectAll="true" />
<GridColumn Field="Name" Title="Name" />
<GridColumn Field="Team" Title="Team" />
</GridColumns>
</TelerikGrid>
@code {
private List<Employee> GridData { get; set; } = Enumerable.Range(1, 10).Select(i => new Employee
{
EmployeeId = i,
Name = $"Employee {i}",
Team = $"Team {i % 3}"
}).ToList();
private List<Employee> SelectedItems { get; set; } = new();
private void OnSelectedItemsChanged(IEnumerable<Employee> items)
{
SelectedItems = items.ToList();
}
private void DeleteSelectedEmployees()
{
if (SelectedItems.Any())
{
GridData = GridData.Except(SelectedItems).ToList();
SelectedItems.Clear();
}
}
public class Employee
{
public int EmployeeId { get; set; }
public string Name { get; set; }
public string Team { get; set; }
public override bool Equals(object obj) => obj is Employee e && e.EmployeeId == EmployeeId;
public override int GetHashCode() => EmployeeId.GetHashCode();
}
}
Please add support for programmatic exporting of Grids (SaveAsExcelFileAsync() and ExportToExcelAsync() ) with a GridExcelExportOptions argument and multi-column headers.
===
A potential workaround is to programmatically click the built-in export command button, which can even be hidden:
@using Telerik.Blazor.Components.Grid
@inject IJSRuntime JS
<PageTitle>Home</PageTitle>
<TelerikGrid Data="@GridData">
<GridToolBarTemplate>
<TelerikButton OnClick="@ExportGridWithOtherColumns">Export Programmatically</TelerikButton>
<GridCommandButton Class="hidden-export-button" Command="ExcelExport">Export Natively</GridCommandButton>
</GridToolBarTemplate>
<GridSettings>
<GridExcelExport OnBeforeExport="@OnGridBeforeExport" />
</GridSettings>
<GridColumns>
<GridColumn Field="@nameof(Product.Id)" Width="100px" />
<GridColumn Field="@nameof(Product.Name)" Width="120px" />
<GridColumn Title="Product Details">
<Columns>
<GridColumn Field="@nameof(Product.Group)" Width="180px" />
<GridColumn Field="@nameof(Product.Price)" DisplayFormat="{0:c2}" Width="120px" />
<GridColumn Field="@nameof(Product.Quantity)" DisplayFormat="{0:n0}" Width="120px" />
<GridColumn Field="@nameof(Product.Released)" DisplayFormat="{0:d}" Width="180px" />
<GridColumn Field="@nameof(Product.Discontinued)" Width="100px" />
</Columns>
</GridColumn>
</GridColumns>
</TelerikGrid>
<style>
.hidden-export-button {
display: none;
}
</style>
<script suppress-error="BL9992">
function clickExportCommandButton() {
let hiddenExportButton = document.querySelector(".hidden-export-button");
if (hiddenExportButton) {
hiddenExportButton.click();
}
}
</script>
@code {
private List<Product> GridData { get; set; } = new();
private void OnGridBeforeExport(GridBeforeExcelExportEventArgs args)
{
List<string> exportableColumnFields = new List<string> { nameof(Product.Name), nameof(Product.Price), nameof(Product.Quantity) };
List<GridExcelExportColumn> ColumnsToExport = new();
foreach (GridExcelExportColumn column in args.Columns)
{
if (exportableColumnFields.Contains(column.Field))
{
ColumnsToExport.Add(column);
}
}
args.Columns = ColumnsToExport;
}
private async Task ExportGridWithOtherColumns()
{
await JS.InvokeVoidAsync("clickExportCommandButton");
}
protected override void OnInitialized()
{
var rnd = Random.Shared;
for (int i = 1; i <= 7; i++)
{
GridData.Add(new Product()
{
Id = i,
Name = $"Name {i} {(char)rnd.Next(65, 91)}{(char)rnd.Next(65, 91)}",
Group = $"Group {i % 3 + 1}",
Price = rnd.Next(1, 100) * 1.23m,
Quantity = rnd.Next(0, 10000),
Released = DateTime.Today.AddDays(-rnd.Next(60, 1000)),
Discontinued = i % 4 == 0
});
}
}
public class Product
{
public int Id { get; set; }
public string Name { get; set; } = string.Empty;
public string Group { get; set; } = string.Empty;
public decimal Price { get; set; }
public int Quantity { get; set; }
public DateTime Released { get; set; }
public bool Discontinued { get; set; }
}
}
The TelerikGrid never loads any data. the app just hangs.
I copied the Telerik sample from the online demo.
The HTML table loads perfectly.
Using VS 2019 16.1.0 Preview 2.0.
Acquired Telerik nuget package directly from Telerik feed.
<TelerikGrid Data=@ViewModel.GetCorePharmacies() Height="300">
<TelerikGridColumns>
<TelerikGridColumn Field="ID" Title="NCPDP#" />
<TelerikGridColumn Field="NPINumber" Title="NPI#" />
<TelerikGridColumn Field="DBAName" Title="Pharmacy" />
<TelerikGridColumn Field="StoreNumber" Title="Store#" />
</TelerikGridColumns>
</TelerikGrid>
@*<table class="table">
<thead>
<tr>
<th>NCPDP</th>
<th>NPI</th>
<th>DBA Name</th>
<th>Store#</th>
</tr>
</thead>
<tbody>
@foreach (var pharmacy in ViewModel.GetCorePharmacies())
{
<tr>
<td>@pharmacy.ID.ToString()</td>
<td>@pharmacy.NPINumber.ToString()</td>
<td>@pharmacy.DBAName</td>
<td>@pharmacy.StoreNumber</td>
</tr>
}
</tbody>
</table>*@
Any thoughts.
Super low priority and super nit picky ... The command buttons on the Blazor Grid have extra space after the icon if you leave the name blank. Either remove the space or center the icon when no name is entered.
Dear Telerik,
i have a TelerikGrid with a TelerikGridColumn bound to a Decimal field.
The property Editable="true" is set.
I can edit the number , but only 1 number at te time.
If I type one number, the edit-cell is closed immediately.
If I want to input the number 1000 , I habe to click the cell 4 times for each number . I cannot type 1000 in one action.
The problem does not occur with a String column.
Regards,
Gert
Hello,
I'm trying the grid component and I'm able to add a row to the grid using the embbed editor. But I wanted to add an item externally to the list:
<button @onclick="@MyClick">Add item</button>
void MyClick()
{
MyData.Add(new SampleData() { ID = 46, Name = "from click" });
StateHasChanged();
}The new line does not appear on the grid but if I add a second item through the embbed editor then I get the 2 items!
I also try to replace the List<MyData> by an ObservableCollection<MyData> unsuccessfully.
Thanks & regards,
Here is how this page looks on mac, multiple browsers: https://demos.telerik.com/blazor-ui/grid/grouping
Notice that the columns are misaligned. I believe this is because the scrollbar isn't rendered on a mac if it is "disabled" (there is nothing to scroll).
Probably the best solution would be for it to render like this on all browsers, but have the columns line up (get rid of the spacer in the end of the header row) as the 'empty' scrollbar is not attractive :)
Telerik Blazor version 1.5.0 Trial
Steps to reproduce:
This behaviour is inconsistent as the user is required to press the Update button to save a new row, but not to save changes for an existing row. Can the grid be made to retain the new row when the Add button is pressed (or can we have that option)?
I think the base issue here is that the new row isn't added automatically when the cell/row loses focus. The same issue therefore occurs if you press one of the page buttons at the bottom of the grid at step 3 instead.
Hi,
I cant see what it is that's causing this error. evertime i run my app, i get the follwoing error below:
Microsoft.AspNetCore.Components.Reflection.ComponentProperties.ThrowForUnknownIncomingParameterName(Type targetType, string parameterName
@page "/Table"
@inject IPurchaseOrderRepository purchaseOrderRepository
@using Telerik.Blazor.Components.Grid
<h3>Table</h3>
<TelerikGrid Data=@auditEventTypeDTOs>
<TelerikGridColumn Field="AuditEventName">
</TelerikGridColumn>
</TelerikGrid>
@code{
public IEnumerable<AuditEventTypeDTO> auditEventTypeDTOs { get; set; }
protected override async Task OnInitializedAsync()
{
auditEventTypeDTOs = await purchaseOrderRepository.GetAllAuditEventTypes();
}
}
The IEnumerable object 'auditEventTypeDTOs' is getting the data from the repository and i've made sure that i don't have any component with the same name within Telerik.blazor namespace.
Do let me know if you need me me to supply more information.
many thanks in advance
George.
@using ClientApp.Shared
@inject HttpClient Http
<TelerikGrid Data=@forecasts Height="550px"
Pageable="true" Sortable="true"
PageSize="20" Groupable="true">
<GridColumns>
<GridColumn Field="Date">
<Template>
@((context as WeatherForecast).Date.ToString("dddd, dd MMM yyyy"))
</Template>
</GridColumn>
<GridColumn Field="TemperatureC" Title="Temp. C" />
<GridColumn Field="TemperatureF" Title="Temp. F" />
<GridColumn Field="Summary" />
</GridColumns>
</TelerikGrid>
@code {
//List<WeatherForecast> forecasts { get; set; } = new List<WeatherForecast>(); // Works fine!
List<WeatherForecast> forecasts { get; set; } //Need to sort a field to show the rows
protected override async Task OnInitializedAsync()
{
//forecasts = new List<WeatherForecast>(); //this helps
forecasts = await Http.GetJsonAsync<List<WeatherForecast>>("WeatherForecast");
//these do not help
//await Task.Delay(200);
//StateHasChanged();
}
}I had a working server-side Blazor project that was working, but a problem appears to have begun without me changing any code. I upgraded to the latest version (2.4.0) and am having the same problem.
The SelectedItemsChanged event is not working when a checkbox is checked. If I click outside the checkbox in the same column, the event fires however.
I see similar behavior on your own demo page, so this seems like a bug: https://demos.telerik.com/blazor-ui/grid/selection Check some products on that grid and the selected items do not change below. I've tested this in Vivaldi and Edge.
Thanks,
Sean
Hello!
The multiple selection functionality in the grid no longer works as expected.
The select check boxes doesn't seem to do anything and the only way to select something is when clicking on the actual row.
The problem is also present on your demo page.
ADMIN EDIT: Duplicate of https://feedback.telerik.com/blazor/1443720-selection-does-not-work-when-clicking-on-the-checkbox-works-when-clicking-the-row
Best regards.