When you scroll to the right in a grid and filter so that there are no items, the horizontal scroll disappears and you can no longer come back to the filter in order to clear it and work with the grid again.
If I add an await-ed call in the OnRowClick handler, then I cannot alter the grid state later in the code. It only works if the method is called again (e.g., a second click on the same row).
<AdminEdit>
This affects other Grid events too, for example, the PageChanged
</AdminEdit>
A workaround is to use synchronous code (remove the await call):
@inject IJSRuntime JsInterop
<TelerikGrid Data="@salesTeamMembers" OnRowClick="@OnRowClickHandler" @ref="@GridRef">
<DetailTemplate>
@{
var employee = context as MainModel;
<TelerikGrid Data="employee.Orders" Pageable="true" PageSize="5">
<GridColumns>
<GridColumn Field="OrderId"></GridColumn>
<GridColumn Field="DealSize"></GridColumn>
</GridColumns>
</TelerikGrid>
}
</DetailTemplate>
<GridColumns>
<GridColumn Field="Id"></GridColumn>
<GridColumn Field="Name"></GridColumn>
</GridColumns>
</TelerikGrid>
@code {
List<MainModel> salesTeamMembers { get; set; }
TelerikGrid<MainModel> GridRef { get; set; }
async Task OnRowClickHandler(GridRowClickEventArgs args) {
// After adding this line, it now requires a double click when the InvokeAsync call uses "await"
var width = JsInterop.InvokeAsync<int>("getWidth");
var model = args.Item as MainModel;
int index = salesTeamMembers.IndexOf(model);
//todo: you may want to take paging into account for example, or use js interop to get the index of the row based on contents from it like id
if (index > -1) {
var state = GridRef.GetState();
state.ExpandedRows = new List<int> { index };
await GridRef.SetState(state);
}
}
protected override void OnInitialized() {
salesTeamMembers = GenerateData();
}
private List<MainModel> GenerateData() {
List<MainModel> data = new List<MainModel>();
for (int i = 0; i < 5; i++) {
MainModel mdl = new MainModel { Id = i, Name = $"Name {i}" };
mdl.Orders = Enumerable.Range(1, 15).Select(x => new DetailsModel { OrderId = x, DealSize = x ^ i }).ToList();
data.Add(mdl);
}
return data;
}
public class MainModel {
public int Id { get; set; }
public string Name { get; set; }
public List<DetailsModel> Orders { get; set; }
}
public class DetailsModel {
public int OrderId { get; set; }
public double DealSize { get; set; }
}
}
I would like to request a simple update to the Grid component.
When a column width is too small - the column header text is cut-off or is unreadable.
For example:
It would be nice that on mouse hover, the full title would be rendered. Currently to achieve this, I have to implement a custom <HeaderTemplate> for every grid column and add a span myself:
<GridColumn Field="@nameof(SalesOrderLineItem.Quantity)">
<HeaderTemplate>
<span title="Order Quantity">Order Quantity</span>
</HeaderTemplate>
</GridColumn>
Can you update the GridColumn component and add a title attribute to the column <th> element so the browser can show the fill title should the user hover over it?
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; }
}
}
Dear Telerik,
I'd like to post a new feature request- > A checkbox column.
Where it is possible to select multiple rows.
Regards,
Gert
Would be helpful to have the feature of copying selected row to the clipboard.
The copy format could be CSV or just tabbed delimiter.
---
ADMIN EDIT
In the meantime, you can consider your own JS-based solution (example StackOverflow thread) and integrate them on a command button in the grid or in the row context menu.
---
Hi
I have a question regarding the telerik grid component particularly the hierarchy. Is it possible to open a hierarchy programmatically? For example:
I have my grid with information. Every row have more information to show. Those are stored in a hierarchy level to this row. Can I, instead of clicking the '+'-button in the row, just open it with with a method that i call e.g. in another button?
I want to make the rows clickable, i saw in the forum that this isn't yet supported for the grid. Now, I'm placing a div-Tag in the DetailTemplate of this row, and give that div a onclick-Attribute. The method the div invokes, should open the row for me respectively show the hierarchy of this row.
Is this possible?
thanks for your support.
regards
Ali Shala
Hello Team,
I am using "FilterMode="GridFilterMode.FilterRow". For int values there is a "numeric chooser" in the column header and the filter option "contains" is not available.
This is the correct behaviour. But when I bind the column to a ulong, ushort, ... value theses seems to be considered as string. There is no "numeric chooser" and the filter "contains" is available, which resullts in further problems with the OData endpoint.
1. Load a page with a Grid with Reorderable = true
2. While Grid is rendering load a different page
--> Unhandled ObjectDisposedException
Error: System.ObjectDisposedException: Cannot access a disposed object. Object name: 'DotNetObjectReference`1'. at Microsoft.JSInterop.DotNetObjectReference`1.ThrowIfDisposed() at Microsoft.JSInterop.JSRuntime.TrackObjectReference[TValue](DotNetObjectReference`1 dotNetObjectReference) at Microsoft.JSInterop.Infrastructure.DotNetObjectReferenceJsonConverter`1.Write(Utf8JsonWriter writer, DotNetObjectReference`1 value, JsonSerializerOptions options) at System.Text.Json.JsonSerializer.WriteDictionary[TProperty](JsonConverter`1 converter, JsonSerializerOptions options, WriteStackFrame& current, Utf8JsonWriter writer) at System.Text.Json.JsonPropertyInfoNotNullable`4.OnWriteDictionary(WriteStackFrame& current, Utf8JsonWriter writer) at System.Text.Json.JsonPropertyInfo.WriteDictionary(WriteStack& state, Utf8JsonWriter writer) at System.Text.Json.JsonSerializer.HandleDictionary(JsonClassInfo elementClassInfo, JsonSerializerOptions options, Utf8JsonWriter writer, WriteStack& state) at System.Text.Json.JsonSerializer.Write(Utf8JsonWriter writer, Int32 originalWriterDepth, Int32 flushThreshold, JsonSerializerOptions options, WriteStack& state) at System.Text.Json.JsonSerializer.WriteCore(Utf8JsonWriter writer, Object value, Type type, JsonSerializerOptions options) at System.Text.Json.JsonSerializer.WriteCore(PooledByteBufferWriter output, Object value, Type type, JsonSerializerOptions options) at System.Text.Json.JsonSerializer.WriteCoreString(Object value, Type type, JsonSerializerOptions options) at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](String identifier, CancellationToken cancellationToken, Object[] args) at Microsoft.JSInterop.JSRuntime.InvokeWithDefaultCancellation[T](String identifier, Object[] args) at Telerik.Blazor.Components.Grid.GridHeaderRowBase`1.InitColumnReorderable() at Telerik.Blazor.Components.Grid.GridHeaderRowBase`1.OnAfterRenderAsync(Boolean firstRender) at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle)
You might have to try a few times to dispose the page at the correct time. With larger Grids it happens more frequently.
Grids without Reorderable = true do not throw an exception!
Hi,
It would be nice to have a property available on a GridColumn where you could indicate that the column should only be visible when you export the data, and not on, screen.
Thanks,
Tom