We found out during SQL profiling that when bound to an IQueryable (linked to DbContext) with pagination enabled, the Telerik data grid called SQL to count elements twice. This is not a pre-render problem as those deplicated queries are actually executed twice (one pair for each render).
Our simplified code:
<TelerikGrid TItem="Item"
Data="_data"
PageSize="10"
Pageable="true"
Sortable="true">
<GridColumns>
<GridColumn Field="@nameof(Item.Id)" />
<GridColumn Field="@nameof(Item.Code)" />
</GridColumns>
</TelerikGrid>
@code {
[Inject] protected DbContext DbContext { get; set; }
private IEnumerable<Item> _data;
protected override void OnInitialized()
{
base.OnInitialized();
_data = DbContext.Items
.Select(x => new Item()
{
Id = x.Id,
Code = x.Code
});
}
}
===
ADMIN EDIT:
There are two possible ways to avoid the double COUNT:
When the user tries to edit a cell in the Grid an exception is thrown. This happens if the Model to which the Grid is bound has an indexer property.
Reproduction: https://blazorrepl.telerik.com/mdEcQxkr15PH4bip51
===
A possible workaround is to map the data to a collection of a different type that has no indexer property: https://blazorrepl.telerik.com/cxaGwcOC383PD8Jr24
When the Grid is databound via OnRead event, the initially displayed aggregates are wrong and take into account the first page only.
A possible workaround is to bind the Grid in OnAfterRenderAsync -
@using Telerik.DataSource
@using Telerik.DataSource.Extensions
<TelerikGrid @ref="@GridRef"
OnRead="@OnGridRead"
TItem="@Product"
Pageable="true">
<GridAggregates>
<GridAggregate Field="@nameof(Product.Name)" Aggregate="@GridAggregateType.Count" FieldType="@(typeof(System.String))" />
</GridAggregates>
<GridColumns>
<GridColumn Field="@nameof(Product.Name)" Title="Product Name">
<FooterTemplate>
@context.Count
</FooterTemplate>
</GridColumn>
<GridColumn Field="@nameof(Product.Price)" />
<GridColumn Field="@nameof(Product.ReleaseDate)" Title="Release Date" />
<GridColumn Field="@nameof(Product.Active)" />
</GridColumns>
</TelerikGrid>
@code {
TelerikGrid<Product> GridRef { get; set; }
List<Product> GridData { get; set; }
bool ShouldBindGrid { get; set; }
async Task OnGridRead(GridReadEventArgs args)
{
if (!ShouldBindGrid)
{
return;
}
await Task.Delay(200); // simulate network delay
DataSourceResult result = GridData.ToDataSourceResult(args.Request);
args.Data = result.Data;
args.Total = result.Total;
args.AggregateResults = result.AggregateResults;
}
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
// workaround for initial Grid aggregates
ShouldBindGrid = true;
GridRef.Rebind();
StateHasChanged();
}
}
protected override void OnInitialized()
{
GridData = new List<Product>();
var rnd = new Random();
for (int i = 1; i <= 50; i++)
{
GridData.Add(new Product()
{
Id = i,
Name = "Product " + i.ToString(),
Price = (decimal)rnd.Next(1, 100),
ReleaseDate = DateTime.Now.AddDays(-rnd.Next(60, 1000)),
Active = i % 3 == 0
});
}
}
public class Product
{
public int Id { get; set; }
public string Name { get; set; }
public decimal Price { get; set; }
public DateTime ReleaseDate { get; set; }
public bool Active { get; set; }
}
}
Currently, the empty cells in the exported Excel file contain zero-length strings. As a result, the ISBLANK() function returns false for them while the cells essentially do not have content.
Please allow the empty Grid cells to be treated as blank in the exported Excel file.
===
ADMIN EDIT
===
For the time being, you may extend the formula to also check whether the length of the cell content is 0. For that purpose, you may use the LEN() function as suggested here: https://learn.microsoft.com/en-us/office/troubleshoot/excel/isblank-function-return-false#workaround.
When I autofit all columns multiple times in a row, the Grid misbehaves and wraps longer column content in multiple lines.
<AdminEdit>
As a workaround, set the MinResizableWidth parameter of the Grid columns that wrap their content.
</AdminEdit>
Similar to the WPF grid I would like the option to require the user hold shift to sort by multiple columns, otherwise the grid would sort by only a single column.
https://docs.telerik.com/devtools/wpf/controls/radgridview/sorting/multiple-column-sorting
Hello,
Imagine a Grid with in-cell editing and a cell X, which restricts editing via IsCancellable = true in the OnEdit event.
If the user clicks on cell X, then editing will be cancelled and the focus will be on this cell.
If the user tabs from the previous cell, then editing will be cancelled and the focus will be on the previous cell.
This looks like an inconsistency. Can the focus go to cell X when editing is cancelled from a tab?
When the Virtualization feature is enabled, triggering Incell edit causes the Grid to scroll. When we scroll the edit is canceled. This happens when the row is partially visible.
https://www.screencast.com/t/zCJ9z9P83c
A more specific case is when you try to edit the last row. In case the editor height is bigger than the row height the Grid tries to scroll but there is no more data. The editor is closed and the item cannot be edited.
https://www.screencast.com/t/331cT4xxt
Reproduction: https://blazorrepl.telerik.com/QxEcECvx22pq4BBG59
I'm trying to use the FilterMenu with the CheckBoxListFilter, and it seems like it's sooo close to what I want, if it only had an option for FieldText and FeildValue or something like that. Any way I can get this working to use the ID field as the value and the Name as the text? The highlighted section below is what I would envision it working perfectly as.
<GridColumn Field="@nameof(WorkActivity.WorkGroupId)" Title="Work Group" Width="135px">Hello,
Please consider a Grid feature that changes the component layout on mobile devices or narrow screens. The idea is to switch the column layout to a card layout or anything similar to this example: https://css-tricks.com/responsive-data-tables/
It is possible to implement a similar behavior with the Telerik Blazor Grid and MediaQuery components, but it requires reusing the column titles in the CSS code: https://blazorrepl.telerik.com/GnYPmHFR176Jg5Yg02
===
Telerik Blazor team: Everyone who is interested in this feature, please vote for it to help us prioritize. Also, share your opinion about which Grid features you strictly need in the "mobile" layout and which ones you are ready to sacrifice. Some features don't make sense in a card / listview layout anyway, but still, the mobile-friendly Grid may require completely different HTML markup and UX, so some features may need to be completely revamped.
Page Down and Page Up buttons are not working until the user clicks on the scroll when virtual scrolling is enabled.
To reproduce the issue:
1. Open the following REPL example:
https://blazorrepl.telerik.com/QHYPQVFv55nHGRWV59
2. Focus on the Grid.
3. Try to scroll with the PageDown button.
Hello,
The filter row noticeably slows down the tabbing speed during Grid in-cell editing in WASM apps.
As of UI for Blazor 4.0. ExcelExportableColumn is inaccessible due to its protection level and GridExcelExportColumn should be used instead.
I am trying to add the hidden columns to the exported file through the OnBeforeExport event. However, I am unable to create an exportable column instance using the GridExcelExportColumn. I get the following error:
CS1729: GridExcelExportColumn does not contain a constructor that takes 0 arguments.
Hello,
Please consider Grid data binding support for ImmutableArray. Currently, it crashes when the Grid tries to retrieve the total items count at:
Data.AsQueryable().Count();
Immutable*<T> classes are popular in state libraries.
Currently, the possible workarounds are:
If LoadGroupsOnDemand="false", I am able to programmatically expand the groups through the state. However, this is not possible when loading group data on demand.
Please allow programmatically expanding the groups when LoadGroupsOnDemand="true". This should go together with an event (OnStateChanged?) that will fire when LOD groups are expanded or collapsed.
Feature Request
Currently, when a grid is rendered with 500 rows in a WASM application and expand/collapse action is initiated, it takes a few seconds to finish grouping and rendering.
Steps to reproduce
1. Create a grid in WASM app.
2. Add 500 rows.
3. Do not enable paging.
4. Group by any field and initiate expand/collapse.
5. All rows are re-rendered which leads to a few seconds delay.
A nice feature would be frozen Group Rows.
So if you grouped your data in the Grid and scroll. The Group should stick underneath the header.
As an example look here: https://www.ag-grid.com/angular-data-grid/grouping-sticky-groups/