Since verion 9, the new styling is doing something strange.
The issue is also observable on the Tererik demo site (as well as our published applications) but I have noticed its on webassembly more-so than server apps;
https://demos.telerik.com/blazor-ui/grid/adaptive
If I run the demo site, the new pagination style (where you can type the page you want to navigate to) will flash up for a second, then it will go back to the old style after a second or 2.
Would anyone know why this is happening?
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.
I want to change the default Grid loading animation to a pulsing loader indicator.
Hy,
It is possible to have default color themes (Primary,Dark,Info,Error,...) for Telerik Blazor Grid component as well without having to change the color by css overriding?
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();
}
}
The Grid in-cell editor will not close if the user selects content in more than one cell in the component. This can lead to problems related to uncommitted new values if the user "forgets" to confirm their edits and navigates away.
https://demos.telerik.com/blazor-ui/grid/editing-incell
Observe the inconsistency:
===
A possible workaround is to use @onfocusout and the Grid state to detect the problematic behavior and close the edit cell programmatically:
When triggering Grid edit mode through the Grid state and the component is using adaptive mode, the edit form doesn't show.
Possible workarounds include:
1. User clicks the sparkled button that opens the AI window in this demo: https://demos.telerik.com/blazor-ui/grid/ai-data-operations
2. User chooses a predefined prompt suggestion, enters one via the keyboard, or uses voice access to dictate one, and clicks apply. The operation runs successfully and returns output.
3. Now the user clicks the sparkled button again, and the AI window opens. Once open, the prompt text box fills with the previously entered request text.
How to remove or prevent the previously entered request text from filling the text box on every sequential opening of the AI window?
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