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/
I have applications for which I would like to define the default join operator for Grid filters to be "OR" instead of the default "AND."
Please expose an option to customize the default logical operator in Filter Menu.
I AutoFit all columns in the Grid but would like to be able to reset their width to the initial value at a later point.
===
TELERIK EDIT: Here are two workarounds for two possible scenarios:
<TelerikButton ThemeColor="@ThemeConstants.Button.ThemeColor.Primary"
OnClick="@AutoFitColumns">AutoFit Columns</TelerikButton>
<TelerikButton ThemeColor="@ThemeConstants.Button.ThemeColor.Success"
OnClick="@ResetColumns">Reset Column Widths</TelerikButton>
<TelerikGrid @ref="@GridRef"
Data="@GridData"
Reorderable="true"
Resizable="true">
<GridColumns>
<GridColumn Field="@nameof(Product.Id)" />
<GridColumn Field="@nameof(Product.Name)" />
<GridColumn Field="@nameof(Product.Category)" />
<GridColumn Field="@nameof(Product.Stock)" />
<GridColumn Field="@nameof(Product.Discontinued)" />
</GridColumns>
</TelerikGrid>
@code {
private TelerikGrid<Product>? GridRef { get; set; }
private List<Product> GridData { get; set; } = new();
private async Task AutoFitColumns()
{
if (GridRef == null)
{
return;
}
await GridRef.AutoFitAllColumnsAsync();
}
private async Task ResetColumns()
{
if (GridRef == null)
{
return;
}
var gridState = GridRef.GetState();
foreach (var columnState in gridState.ColumnStates)
{
columnState.Width = "auto;";
}
gridState.TableWidth = $"99.9{DateTime.Now.Millisecond}%"; // Set something close to 100% instead of removing the value
await GridRef.SetStateAsync(gridState);
}
protected override void OnInitialized()
{
for (int i = 1; i <= 5; i++)
{
GridData.Add(new Product()
{
Id = i,
Name = $"Product {i}",
Category = $"Category {i % 4 + 1}",
Stock = Random.Shared.Next(0, 100),
Discontinued = i % 3 == 0
});
}
}
public class Product
{
public int Id { get; set; }
public string Name { get; set; } = string.Empty;
public string Category { get; set; } = string.Empty;
public int Stock { get; set; }
public bool Discontinued { get; set; }
}
}
<TelerikGrid @ref="@GridRef"
Data="@GridData"
Reorderable="true"
Resizable="true"
Width="@GridWidth"
ShowColumnMenu="true"
OnStateChanged="@( (GridStateEventArgs<Product> args) => OnGridStateChanged(args) )">
<GridColumns>
<GridCheckboxColumn SelectAll="true" />
<GridColumn Field="@nameof(Product.Id)" />
<GridColumn Field="@nameof(Product.Name)" />
<GridColumn Field="@nameof(Product.Category)" />
<GridColumn Field="@nameof(Product.Stock)" />
<GridColumn Field="@nameof(Product.Discontinued)" />
</GridColumns>
</TelerikGrid>
@code {
private TelerikGrid<Product>? GridRef { get; set; }
private List<Product> GridData { get; set; } = new();
private string GridWidth => $"{GridIntWidth}px";
private int GridIntWidth = 1000; // A pixel Grid width is required for this scenario
private int GridMaxTableIntWidth => GridIntWidth - 17; // Assuming no horizontal scrolling
private async Task OnGridStateChanged(GridStateEventArgs<Product> args)
{
if (args.PropertyName == "ColumnStates" && Double.Parse(args.GridState.TableWidth.Replace("px", "")) < GridMaxTableIntWidth)
{
args.GridState.TableWidth = $"99.9{DateTime.Now.Millisecond}%"; // Set something close to 100% instead of removing the value
int lastVisibleColumnIndex = GetLastVisibleIndex(args.GridState.ColumnStates);
args.GridState.ColumnStates.First(x => x.Index == lastVisibleColumnIndex).Width = "auto";
await GridRef!.SetStateAsync(args.GridState);
}
}
private int GetLastVisibleIndex(ICollection<GridColumnState> columnStates)
{
int index = 0;
var visibleColumnStates = columnStates.Where(x => !x.Visible.HasValue || x.Visible.Value);
foreach (var columnState in visibleColumnStates)
{
index = Math.Max(index, columnState.Index);
}
return index;
}
protected override void OnInitialized()
{
for (int i = 1; i <= 5; i++)
{
GridData.Add(new Product()
{
Id = i,
Name = $"Product {i}",
Category = $"Category {i % 4 + 1}",
Stock = Random.Shared.Next(0, 100),
Discontinued = i % 3 == 0
});
}
}
public class Product
{
public int Id { get; set; }
public string Name { get; set; } = string.Empty;
public string Category { get; set; } = string.Empty;
public int Stock { get; set; }
public bool Discontinued { get; set; }
}
}
The Grid selection performance is worse in WASM when there is a command column. Here is a test page with a large page size, which makes this more evident.
<label><TelerikCheckBox @bind-Value="@ShowCommandColumn" /> Show Command Column</label>
<TelerikGrid Data="@DataList"
SelectionMode="@GridSelectionMode.Single"
Height="700px">
<GridColumns>
<GridColumn Field="@(nameof(DataModel.Pos))" Title="Pos" />
@if (ShowCommandColumn)
{
<GridCommandColumn Width="300px">
<GridCommandButton Command="Save" Icon="save">Reset Volume</GridCommandButton>
<GridCommandButton Command="Delete" Icon="delete">Delete</GridCommandButton>
</GridCommandColumn>
}
</GridColumns>
</TelerikGrid>
@code {
bool ShowCommandColumn { get; set; } = true;
List<DataModel> DataList { get; set; }
protected override async Task OnInitializedAsync()
{
DataList = new List<DataModel>();
for (int i = 1; i <= 500; i++)
{
DataList.Add(new DataModel
{
Pos = i
});
}
}
public class DataModel
{
public int Pos { get; set; }
}
}
I have a Grid with Navigable="true" and FilterRow. If I focus a string filter input and press the left/right arrow keys, the focus moves away from the cell. This behavior also occurs when I press up/down arrows in numeric filter inputs.
Reproduction: https://blazorrepl.telerik.com/GcvPkekt36Mxgygv07.
Hello,
Currently the Id and Field properties of GridColumnState in the GridState do not have setters. As a result, these properties are not deserialized, e.g. when sending GridState information from the client to the server in WebAssembly apps.
I would like to determine the existing columns in the Grid and tailor the database request, so that the fetched data includes only the required columns.
Another possible use case is detecting outdated GridState information in localStorage, after the app has been updated and the Grid contains different columns.
The select-all functionality of the Grid is slow in WebAssembly apps, when SelectAllMode="GridSelectAllMode.All".
A possible workaround is to use a CheckBoxColumn HeaderTemplate.
I have a Grid with numerous columns and I am using inline editing. When in edit mode, I'd like to add custom content to each cell - for example, a validation error message from server validation.
To achieve that, I have to use EditorTemplate. However, I want to keep the default editor because I'd like to avoid having to add the relevant control for every single cell each time I add a new Grid.
The `Context` of `<GridColumn>` is of type `object`, requiring typecasting in order to use the value.
Instead, make `<GridColumn>` generic so that `Context` is strongly typed. If you use `TItem` as the name for the generic then Blazor will infer it without the user having to specify it.
Description
The left offset style value is not correctly formatted. It is culture-specific, however, the CSS rules should be formatted with culture invariant decimal separator - dot.
Reproduction (if bug)
1. Create a grid with locked columns.
2. Set the culture to one that has a comma as the decimal separator.
3. Resize the frozen columns, the left value is formatted with a comma instead of a dot.
Expected (if bug)
The value should be formatted with a dot.
Browser (if bug)
All
Project type (if bug)
All
The request targets a hierarchical Grid where some items are expanded - when I edit a parent item and then update it, all the respective detail items collapse.
Please add support for persisting the expanded state of the items.
---
ADMIN EDIT
---
The feature applies to the other data operations as well (for example, paging, sorting, filtering etc.).