When you change the data source of the grid, it must re-render the data again.
For example, when you use a custom edit form, you add/edit the data with your own code and not through the grid. This is useful, for example, when you only want to show a few columns in the grid, but the model has many more editable fields. Or, when you want a customized layout/behavior of the edit form.
Minimum repro:
@
using
Telerik.Blazor.Components.Grid
@
using
Telerik.Blazor.Components.Button
<TelerikButton OnClick=
"@ChangeProduct"
>Works: Change an existing product</TelerikButton>
<TelerikButton OnClick=
"@AddProduct"
>Does not work: Add a
new
product</TelerikButton>
<TelerikButton OnClick=
"@RemoveProduct"
>Does not work: Remove an existing product</TelerikButton>
<TelerikGrid Data=@GridData
Pageable=
"true"
>
<TelerikGridColumns>
<TelerikGridColumn Field=@nameof(Product.ProductName) Title=
"Product Name"
/>
<TelerikGridColumn Field=@nameof(Product.UnitPrice) Title=
"Unit Price"
>
</TelerikGridColumn>
</TelerikGridColumns>
</TelerikGrid>
@functions {
public
List<Product> GridData {
get
;
set
; }
void
AddProduct()
{
GridData.Insert(0,
new
Product()
{
ProductId = DateTime.Now.Millisecond,
ProductName =
"some product name"
,
UnitPrice = DateTime.Now.Second
});
//after updating the data, the grid should show the item at the top of the first page.
//at the moment, you need to page, for example, for the data to be updated
}
protected
void
ChangeProduct()
{
GridData.Where(p => p.ProductId == 2).First().ProductName =
"changed at "
+ DateTime.Now;
}
protected
void
RemoveProduct()
{
GridData.RemoveAt(4);
//after updating the data, the grid should remove the fourth item immediately
//at the moment, you need to page, for example, for the data to be updated
}
protected
override
void
OnInit()
{
GridData =
new
List<Product>();
for
(
int
i = 0; i < 25; i++)
{
GridData.Add(
new
Product()
{
ProductId = i,
ProductName =
"Product"
+ i.ToString(),
UnitPrice = (
decimal
)(i * 3.14),
});
}
}
public
class
Product
{
public
string
ProductName {
get
;
set
; }
public
decimal
UnitPrice {
get
;
set
; }
public
int
ProductId {
get
;
set
; }
}
}
I want to know when the user moves focus to a new row - I intend to use that to select this row and to perform some operations on an adjacent grid.
----
ADMIN EDIT
The majority of things are possible through templates right now. You can put in the desired template (editor, row, cell, header, whatever you need to capture events from) and add the desired handler to your own DOM element. Then, you can alter the grid, if needed, through its state. If you need the row data item - it is available in the templates related to the data rows. If you need adjacent rows models - you can get them from the sorted list of grid data when you use its OnRead event - you have the current row and you can get a previous/next one as needed from that list.
That said, I am keeping this item open (status "Unplanned") so we can still gather any feedback and its popularity and what the community thinks, and whether it will be a meaningful addition to the component.
----
Occasionally I am getting TaskCancellation errors such as:
[13:07:52 ERR] Unhandled exception in circuit 'hQsJqY3F4XbTbzQETSggJClg_e4YRyQkrKHFMHCXugM'.
System.Threading.Tasks.TaskCanceledException: A task was canceled.
at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[] args)
at Microsoft.JSInterop.JSRuntimeExtensions.InvokeVoidAsync(IJSRuntime jsRuntime, String identifier, Object[] args)
at Telerik.Blazor.Components.TelerikComboBox`2.Dispose()
at System.Threading.Tasks.Task.<>c.<ThrowAsync>b__140_0(Object state)
at Microsoft.AspNetCore.Components.Rendering.RendererSynchronizationContext.ExecuteSynchronously(TaskCompletionSource`1 completion, SendOrPostCallback d, Object state)
at System.Threading.ExecutionContext.RunInternal(ExecutionContext executionContext, ContextCallback callback, Object state)
--- End of stack trace from previous location ---
at Microsoft.AspNetCore.Components.Rendering.RendererSynchronizationContext.ExecuteBackground(WorkItem item)
===========
ADMIN EDIT
===========
The error is related to a Microsoft bug. It occurs one minute after some client component has been disposed.
The exceptions are not bypassed due to memory leak. The bug is expected to be fixed in .NET 6 and this will be respected for the Telerik components, so that the errors do not appear.
When I override the IsValid method to return a ValidationResult the Incell & Inline edit modes allow the editing to be continued even if an invalid value is present.
===
Telerik edit: A possible workaround is to cancel OnUpdate and possibly, OnEdit too. Here is a complete example:
https://blazorrepl.telerik.com/QyaWxkvv10stL8jB06
I want to edit the Excel file the grid exports before it gets to the user. For example, to add a sheet with data I want to generate, or to change columns, formats, colors.
----
ADMIN EDIT
I have attached to this post an example that shows how you can generate your own exported file so you can customize colors, sheets and so on. It also shows how to cache the DataSourceRequest of the grid so you can extract only the current page or all data, and so you can also apply the current grid sorts/filters and so on to the export. This also lets you add metadata to the sheet such as the current user settings such as filters that resulted in this filter.
----
OnChange and OnBlur event for editors (TelerikTextBox, NumericTextBox, and others) is not fired in InCell edit mode with Tab key.
I have a Grid using checkbox selection and when I un-check a row, the SelectedItemsChanged event is not firing. I'm using an async handler.
The problem appears to happen when a row is selected and then un-selected. The event is firing when it is selected but is not firing when it is un-selected.
<TelerikGrid Data="strategicLevelItems" SelectedItems="selectedStrategic" Width="100%" Height="500px"
ScrollMode="GridScrollMode.Scrollable" SelectionMode="GridSelectionMode.Multiple"
SelectedItemsChanged="@((IEnumerable<GetNavigationNodesModel> strategicItems) => OnStrategicSelectAsync(strategicItems))"
FilterMode="GridFilterMode.FilterRow">
<GridColumns>
<GridCheckboxColumn SelectAll="true" Width="40px" OnCellRender="@GridHelpers.CenterAlign" />
<GridColumn Field="@(nameof(GetNavigationNodesModel.Name))" />
</GridColumns>
</TelerikGrid>
private async Task OnStrategicSelectAsync(IEnumerable<GetNavigationNodesModel> selectedItems)
{
selectedStrategic = selectedItems;
var state = tacticalGrid.GetState();
var compositeFilter = new CompositeFilterDescriptor() { LogicalOperator = FilterCompositionLogicalOperator.Or };
foreach (var item in selectedItems)
{
compositeFilter.FilterDescriptors.Add(new FilterDescriptor()
{
Member = "ParentId",
Operator = FilterOperator.IsEqualTo,
Value = item.Id
});
}
state.FilterDescriptors.Clear();
state.FilterDescriptors.Add(compositeFilter);
await tacticalGrid.SetState(state);
}
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.
At the moment, the focus remains on the cell. It should be in the input so the user does not have to perform an extra action (say, click with the mouse) in order to edit data.
This also applies to inserting a new row - the first cell should be focused.
Greetings!
I've been waiting for a few months now to swap to blazor, but one of the things that's currently holding us back is that the filter row can't be used together with the column menu.
I've always found this to be strange, since it's supported in the Angular and MVC versions, which we currently use.
Our users never filter via the column menu, always via the filter row. They hide/lock their columns via the column menu and sometimes sort.
This functionality is thus critical for us.
I can't find any feature request for it, nor any planned roadmap item.
Will this ever be supported because if not, we're gonna have to start looking for alternatives.
Kind regards.