The Grid is supposed to show a loading animation when it detects a data operation that requires more than 600ms to complete. However, if this operation is triggered programmatically through the state and not through the UI, the loading indicator is not shown.
Reproduction: https://blazorrepl.telerik.com/mSuPQpvx498wHvV816.
===
ADMIN EDIT
===
A possible workaround for the time being is to use a LoaderContainer component when invoking programmatic data operation similar to how the initial loader is shown here: https://demos.telerik.com/blazor-ui/grid/loading-animation.
I have created a custom model where I added an ExpandoObject and a couple properties to it. The Grid seems to render the data successfully but the data operations are not possible - the nested properties are treated as invalid. Please add support for nested ExpandoObject properties in custom models.
---
ADMIN EDIT
---
For the time being, there is a workaround that you may try. Use the ExpandoObject directly, do not nest it in the custom model - bind the Grid Data to a collection of ExpandoObject and populate its properties in the OnInitialized.
@using System.Dynamic
<TelerikGrid Data="@Data"
Pageable="true" Sortable="true" Groupable="true"
FilterMode="Telerik.Blazor.GridFilterMode.FilterRow"
EditMode="@GridEditMode.Incell"
Resizable="true" Reorderable="true">
<GridColumns>
<GridColumn Field="Id" FieldType="typeof(string)" Width="120px" />
<GridColumn Field="DetailData.PropertyInt" Title="Column A" FieldType="@typeof(int)" />
<GridColumn Field="DetailData.ProptertyString" Title="Column B" FieldType="@typeof(string)"/>
<GridColumn Field="DetailData.PropertyDate" Title="Column C" FieldType="@typeof(DateTime)"/>
</GridColumns>
</TelerikGrid>
@code {
public ExpandoObject[] Data { get; set; } = Array.Empty<ExpandoObject>();
protected override async Task OnInitializedAsync()
{
Data = new ExpandoObject[]
{
GetPopulatedExpando(1),
GetPopulatedExpando(2),
GetPopulatedExpando(3),
GetPopulatedExpando(4),
GetPopulatedExpando(5),
};
}
private ExpandoObject GetPopulatedExpando(int id)
{
dynamic expando = new ExpandoObject();
expando.Id = id;
dynamic nested = new ExpandoObject();
nested.PropertyInt = id;
nested.ProptertyString = "ID " + id;
nested.PropertyDate = new DateTime(2022, 4, id);
expando.DetailData = nested;
return expando;
}
}
When PageSize is set to "All" and a new item is added to the grid's data source, the PageSize parameter is not updated, so the new item is sent to a second page. Instead of being added at the top or bottom of the page.
Reproduction
1. Run this REPL
2. Set PageSize to All from the dropdown at the bottom
3. Add a new item from Update Data or Add
4. New Item is added to the second page
5. Video Example
The Grid PageSizes DropDownList will not select a new value if it the current value is not visible in the open dropdown. This can happen if there are too many items in the DropDownList and the user has scrolled the PageSizes dropdown.
The problem occurs only when Navigable="true".
Here is a REPL test page
The easiest workaround is to fewer items in the PageSizes DropDownList, so that there is no need for scrolling.
I have a Grid with TItem="Dictionary<string, object>". I am not able to programmatically set EditItem and EditField through state.
I tried saving the state while editing to ensure the EditItem and EditField will be properly stored. When I try to retrieve this state object afterwards nothing happens.
Reproduction: https://blazorrepl.telerik.com/GnvYaIbd19iOZ6GH08.
Hi
The reset button is not working when we use the column template with the Telerik grid. How to solve this problem? Can you please send it example for reference?
Example Link :
Working Without Column Template
=>https://demos.telerik.com/blazor-ui/grid/column-menu
Not Working With Column Template
=>https://demos.telerik.com/blazor-ui/grid/custom-column-menu
Thanks
When initial grouping is set through the state, the GroupFooterTemplate does not render. One has to perform some action for refreshing the Grid in order to display the template - for example, collapsing/expanding a group.
For reference, the GroupHeaderTemplate renders correctly.
Reproduction: https://blazorrepl.telerik.com/wRaJFgFy10vagYnf05
===
ADMIN EDIT
===
The GroupFooterTemplate renders with a delay after the Grid. A possible workaround for the time being is to refresh the Grid after it has been initialized to ensure the GroupFooterTemplate will be displayed.
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
App just crashed with the below exception. My code isn't in the stack trace. Chances are there is no proper validation on parameters, allowing me to supply bad data, which later causes this problem. Please validate the data better, debugging these things is not easy.
Microsoft.AspNetCore.Diagnostics.ExceptionHandlerMiddleware: Error: An unhandled exception has occurred while executing the request.
System.ArgumentNullException: Value cannot be null. (Parameter 'source')
at System.Linq.ThrowHelper.ThrowArgumentNullException(ExceptionArgument argument)
at System.Linq.Enumerable.ToList[TSource](IEnumerable`1 source)
at Telerik.Blazor.Components.TelerikGrid`1.SetProcessedData(IEnumerable data)
at Telerik.Blazor.Components.Common.DataBoundComponent`1.ProcessDataSourceResult(DataSourceResult result)
at Telerik.Blazor.Components.Common.GridBase`1.ProcessDataSourceResult(DataSourceResult result)
at Telerik.Blazor.Components.Common.DataBoundComponent`1.ProcessDataInternal()
at Telerik.Blazor.Components.TelerikGrid`1.ProcessDataInternal()
at Telerik.Blazor.Components.Common.DataBoundComponent`1.OnParametersSetAsync()
at Telerik.Blazor.Components.TelerikGrid`1.OnParametersSetAsync()
at Microsoft.AspNetCore.Components.ComponentBase.CallStateHasChangedOnAsyncCompletion(Task task)
at Microsoft.AspNetCore.Components.ComponentBase.RunInitAndSetParametersAsync()
at Microsoft.AspNetCore.Components.Rendering.ComponentState.SetDirectParameters(ParameterView parameters)
at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.InitializeNewComponentFrame(DiffContext& diffContext, Int32 frameIndex)
at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.InitializeNewSubtree(DiffContext& diffContext, Int32 frameIndex)
at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.InsertNewFrame(DiffContext& diffContext, Int32 newFrameIndex)
at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.AppendDiffEntriesForRange(DiffContext& diffContext, Int32 oldStartIndex, Int32 oldEndIndexExcl, Int32 newStartIndex, Int32 newEndIndexExcl)
at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.ComputeDiff(Renderer renderer, RenderBatchBuilder batchBuilder, Int32 componentId, ArrayRange`1 oldTree, ArrayRange`1 newTree)
at Microsoft.AspNetCore.Components.Rendering.ComponentState.RenderIntoBatch(RenderBatchBuilder batchBuilder, RenderFragment renderFragment, Exception& renderFragmentException)
at Microsoft.AspNetCore.Components.RenderTree.Renderer.ProcessRenderQueue()
--- End of stack trace from previous location ---
at Microsoft.AspNetCore.Components.RenderTree.Renderer.ProcessRenderQueue()
at Microsoft.AspNetCore.Components.RenderTree.Renderer.AddToRenderQueue(Int32 componentId, RenderFragment renderFragment)
at Microsoft.AspNetCore.Components.ComponentBase.StateHasChanged()
at Microsoft.AspNetCore.Components.ComponentBase.CallOnParametersSetAsync()
at Microsoft.AspNetCore.Components.ComponentBase.RunInitAndSetParametersAsync()
at Microsoft.AspNetCore.Components.Rendering.ComponentState.SetDirectParameters(ParameterView parameters)
at Microsoft.AspNetCore.Components.RenderTree.Renderer.RenderRootComponentAsync(Int32 componentId, ParameterView initialParameters)
at Microsoft.AspNetCore.Components.Rendering.HtmlRenderer.RenderComponentAsync(Type componentType, ParameterView initialParameters)
at Microsoft.AspNetCore.Components.Rendering.RendererSynchronizationContext.<>c__11`1.<<InvokeAsync>b__11_0>d.MoveNext()
--- End of stack trace from previous location ---
at Microsoft.AspNetCore.Mvc.ViewFeatures.StaticComponentRenderer.PrerenderComponentAsync(ParameterView parameters, HttpContext httpContext, Type componentType)
at Microsoft.AspNetCore.Mvc.ViewFeatures.ComponentRenderer.PrerenderedServerComponentAsync(HttpContext context, ServerComponentInvocationSequence invocationId, Type type, ParameterView parametersCollection)
at Microsoft.AspNetCore.Mvc.ViewFeatures.ComponentRenderer.RenderComponentAsync(ViewContext viewContext, Type componentType, RenderMode renderMode, Object parameters)
at Microsoft.AspNetCore.Mvc.TagHelpers.ComponentTagHelper.ProcessAsync(TagHelperContext context, TagHelperOutput output)
at Microsoft.AspNetCore.Razor.Runtime.TagHelpers.TagHelperRunner.<RunAsync>g__Awaited|0_0(Task task, TagHelperExecutionContext executionContext, Int32 i, Int32 count)
at EnrichmentEngine.Pages.Pages__Host.<ExecuteAsync>b__15_1() in C:\Users\PeterDrier\source\repos\fleet\src\sovereign\dotnet\services\studio-calc-engine\SummaReportsPoc\Pages\_Host.cshtml:line 25
at Microsoft.AspNetCore.Razor.Runtime.TagHelpers.TagHelperExecutionContext.SetOutputContentAsync()
at EnrichmentEngine.Pages.Pages__Host.ExecuteAsync() in C:\Users\PeterDrier\source\repos\fleet\src\sovereign\dotnet\services\studio-calc-engine\SummaReportsPoc\Pages\_Host.cshtml:line 7
at Microsoft.AspNetCore.Mvc.Razor.RazorView.RenderPageCoreAsync(IRazorPage page, ViewContext context)
at Microsoft.AspNetCore.Mvc.Razor.RazorView.RenderPageAsync(IRazorPage page, ViewContext context, Boolean invokeViewStarts)
at Microsoft.AspNetCore.Mvc.Razor.RazorView.RenderAsync(ViewContext context)
at Microsoft.AspNetCore.Mvc.ViewFeatures.ViewExecutor.ExecuteAsync(ViewContext viewContext, String contentType, Nullable`1 statusCode)
at Microsoft.AspNetCore.Mvc.ViewFeatures.ViewExecutor.ExecuteAsync(ViewContext viewContext, String contentType, Nullable`1 statusCode)
at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.<InvokeResultAsync>g__Logged|22_0(ResourceInvoker invoker, IActionResult result)
at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.<InvokeNextResultFilterAsync>g__Awaited|30_0[TFilter,TFilterAsync](ResourceInvoker invoker, Task lastTask, State next, Scope scope, Object state, Boolean isCompleted)
at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.Rethrow(ResultExecutedContextSealed context)
at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.ResultNext[TFilter,TFilterAsync](State& next, Scope& scope, Object& state, Boolean& isCompleted)
at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.InvokeResultFilters()
--- End of stack trace from previous location ---
at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.<InvokeNextResourceFilter>g__Awaited|25_0(ResourceInvoker invoker, Task lastTask, State next, Scope scope, Object state, Boolean isCompleted)
at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.Rethrow(ResourceExecutedContextSealed context)
at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.Next(State& next, Scope& scope, Object& state, Boolean& isCompleted)
at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.InvokeFilterPipelineAsync()
--- End of stack trace from previous location ---
at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.<InvokeAsync>g__Logged|17_1(ResourceInvoker invoker)
at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.<InvokeAsync>g__Logged|17_1(ResourceInvoker invoker)
at Microsoft.AspNetCore.Routing.EndpointMiddleware.<Invoke>g__AwaitRequestTask|6_0(Endpoint endpoint, Task requestTask, ILogger logger)
at Microsoft.AspNetCore.Authorization.AuthorizationMiddleware.Invoke(HttpContext context)
at Microsoft.AspNetCore.Diagnostics.ExceptionHandlerMiddlewareImpl.<Invoke>g__Awaited|8_0(ExceptionHandlerMiddlewareImpl middleware, HttpContext context, Task task)
Hello,
I have a problem with the subject. Please run this REPL snippet https://blazorrepl.telerik.com/QHusmyOJ027Rp5Ok38, click on any column, the appropriate row will be selected and the corresponding table cell will be focused. Try to navigate to the right by using Right cursor key - you will not be able to navigate through the whole table, values in last columns will not be displayed and the grid seems think they are in the same cell with User Number in my particular case. When you use Left cursor key and then the Right one again you will not be able to see even these columns headers.
I attached a small video to better demonstarte the issue on my particular machine.
Very thanks.
Miroslav
Hi Telerik Support
Facing an issue with Keyboard navigation in Telerik Grid component.
When we use TAB to navigate, the grid header gets focus only for the first time. After completing one round of navigation, second time after the Toolbar buttons, if we TAB out, focus goes to the pager sections skipping the grid header part.
Pls refer the REPL sample from Telerik website:
Steps to reproduce:
1) Use ALT + W and then use TAB key to navigate
2) First focus goes to the Toolbar button (Add Product), then goes to the Grid Header and then if we TAB again focus goes to the Pager section
3) After the Pager section, if we do steps 1 and 2 again, we can see that it skips the Grid Header focus second time onwards.
Here is a runnable REPL test page. A possible workaround is to render the Grid only if it has columns:
@{
if (GridColumns.Count() > 0)
{
<TelerikGrid Data="@Data">
<GridColumns>
@foreach (var column in GridColumns)
{
<GridColumn Field="@column.DataField"
ShowColumnMenu="false" Title="@column.DisplayName" Resizable="true" Width="500px">
<FooterTemplate>
foo
</FooterTemplate>
</GridColumn>
}
</GridColumns>
</TelerikGrid>
}
}
Scenario #1
I want my users to confirm the update of a cell value with the built-in Confirmation Dialog for Blazor. If I use the keyboard (Enter, Tab) to close the edit the Confirmation dialog will popup, but after closing it the Grid hangs.
Scenario #2
If I edit a cell and press enter very quickly, the grid is not able to get the new value inserted after confirming it through the dialog.
Scenario #3
If you press Enter very quickly to confirm the value for deletion, the value is not always removed.
Hello
What is the purpose of this (https://docs.telerik.com/blazor-ui/components/grid/selection/overview#row-drag-and-drop);
If the user drags selected rows, the current row selection will be cleared on row drop.
Is this a bug? As when you select multiple rows, then drag and drop the rows, it clears the bound selectedItems object (but the rows still remain ticked in the UI). Just confirming this is something that will be fixed?
Cheers
Phil
I am binding a Grid to a collection of ExpandoObjects. In the collection, there are decimal values. When I try to add Aggregates for the decimal values the Grid throws an exception.
<AdminEdit>
As a workaround, you can cast the decimal values to double instead.
</AdminEdit>