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)
By the following steps, the problem occurs:
So, it not possible to navigate through the whole grid with virtualized rows when Navigable=true
@* Scroll the grid instead of paging *@
<TelerikGrid Data=@GridData
ScrollMode="@GridScrollMode.Virtual" Navigable="true"
Height="480px" RowHeight="60" PageSize="20"
Sortable="true" FilterMode="@GridFilterMode.FilterMenu">
<GridColumns>
<GridColumn Field="Id" />
<GridColumn Field="Name" Title="First Name" />
<GridColumn Field="LastName" Title="Last Name" />
<GridColumn Field="HireData" Width="200px">
<Template>
@((context as SampleData).HireDate.ToString("MMMM dd, yyyy"))
</Template>
</GridColumn>
</GridColumns>
</TelerikGrid>
@code {
public List<SampleData> GridData { get; set; }
protected override async Task OnInitializedAsync()
{
GridData = await GetData();
}
private async Task<List<SampleData>> GetData()
{
return Enumerable.Range(1, 1000).Select(x => new SampleData
{
Id = x,
Name = $"name {x}",
LastName = $"Surname {x}",
HireDate = DateTime.Now.Date.AddDays(-x)
}).ToList();
}
public class SampleData
{
public int Id { get; set; }
public string Name { get; set; }
public string LastName { get; set; }
public DateTime HireDate { get; set; }
}
}
I want to be able to use interfaces and models that are created from a service when working with the grid. A parameterless constructor is not enough for me, I need to be able to instantiate models in a more complex manner.
---
ADMIN EDIT
The tentative event name I have put in the title might vary when the implementation is researched. The goal would still be the same - the grid to provide an event when it needs an instance of the model so you can provide it with one. At the moment this happens when a row enters edit mode, when the filter list needs to be built, and when you are inserting an item (a caveat with the last one might be the OnClick event for the command button - the new event might have to fire before OnClick so it can give you the model).
---
When the Grid has a non-grouped column at first position, there is a missing left border in an adjacent cell on the second line of the header area.
First reported in:
https://www.telerik.com/forums/multi-column-line-in-grid-occasionally-missing
Possible workarounds:
Test page to reproduce:
(Uncomment the group column to use the second workaround from above.)
<TelerikGrid Data="@Data">
<GridColumns>
@*<GridColumn Title="Title">
<Columns>*@
<GridColumn Field="ID" />
@*</Columns>
</GridColumn>*@
<GridColumn Title="Group">
<Columns>
<GridColumn Field="Name" />
</Columns>
</GridColumn>
</GridColumns>
</TelerikGrid>
@code {
public List<GridItem> Data { get; set; } = new List<GridItem>() {
new GridItem() { ID = 1, Name = "Name 1" }
};
public class GridItem
{
public int ID { get; set; }
public string Name { get; set; }
}
}
Grid popup editing throws about parameterless constructor even when I use the OnModelInit event.
The inline and incell edit modes are still working.
The regression occurs in version 4.2.0.
Selection performance suffers if the Grid has a large page size and uses child components in column templates:
https://blazorrepl.telerik.com/QHaLcVbl25YrVZU821
This is because the Grid doesn't apply performance optimizations for templates and always re-renders them.
Please expose a setting to disable re-rendering if it's not necessary.
The need is to update, add or delete a lot of items at once (for example, the selected items). Sample of batch editing: https://demos.telerik.com/kendo-ui/grid/editing.
Perhaps this may become possible through methods on the grid that invoke the CUD operations.
---
ADMIN EDIT
There is a sample project that accomplishes most of these goals: https://github.com/telerik/blazor-ui/tree/master/grid/batch-editing
The grid state offers a great deal of flexibility in terms of controlling the grid, up to putting it in edit/insert mode.
---
I added a comment to this feedback post. In this post, I made a comment on how to get Tab select working in a grid component for a combobox.
It would be nice if tab select was a parameter for any dropdown component and autocomplete. Maybe a parameter called "TabSelect"? It would need to fire before the grid component picks up the Tab key first in InCellEdit mode.
If that was changed above, then the grid component could have the following:
Enter key to move down the list, and Shift-Enter keys to move up the list. Is there a way to do that currently, or could it be added?
When I define a bigger number of MultiColumn Header the rendering performance of the Grid component quickly deteriorates.
I would like an improvement in this regard.
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.