Here is how this page looks on mac, multiple browsers: https://demos.telerik.com/blazor-ui/grid/grouping
Notice that the columns are misaligned. I believe this is because the scrollbar isn't rendered on a mac if it is "disabled" (there is nothing to scroll).
Probably the best solution would be for it to render like this on all browsers, but have the columns line up (get rid of the spacer in the end of the header row) as the 'empty' scrollbar is not attractive :)
Telerik Blazor version 1.5.0 Trial
Steps to reproduce:
- Open a page with a grid in incell edit mode, e.g. https://demos.telerik.com/blazor-ui/grid/editing-incell
- Put the cursor in the Name field of the first row and edit the just the Name field, do not click out of the cell or cause it to lose focus, do not edit any other cells first
- Press the Add button
- The grid will update the dataset and the edit you made is shown in the grid
- Press the Add button
- Enter the all of the data for the row, but do not press the row's 'Update' button
- Press the Add button again
- The new data you added is lost
This behaviour is inconsistent as the user is required to press the Update button to save a new row, but not to save changes for an existing row. Can the grid be made to retain the new row when the Add button is pressed (or can we have that option)?
I think the base issue here is that the new row isn't added automatically when the cell/row loses focus. The same issue therefore occurs if you press one of the page buttons at the bottom of the grid at step 3 instead.
Hi,
I cant see what it is that's causing this error. evertime i run my app, i get the follwoing error below:
An unhandled exception occurred while processing the request.
Microsoft.AspNetCore.Components.Reflection.ComponentProperties.ThrowForUnknownIncomingParameterName(Type targetType, string parameterName
My Code:
@page "/Table"
@inject IPurchaseOrderRepository purchaseOrderRepository
@using Telerik.Blazor.Components.Grid
<h3>Table</h3>
<TelerikGrid Data=@auditEventTypeDTOs>
<TelerikGridColumn Field="AuditEventName">
</TelerikGridColumn>
</TelerikGrid>
@code{
public IEnumerable<AuditEventTypeDTO> auditEventTypeDTOs { get; set; }
protected override async Task OnInitializedAsync()
{
auditEventTypeDTOs = await purchaseOrderRepository.GetAllAuditEventTypes();
}
}
The IEnumerable object 'auditEventTypeDTOs' is getting the data from the repository and i've made sure that i don't have any component with the same name within Telerik.blazor namespace.
Do let me know if you need me me to supply more information.
many thanks in advance
George.
Expected: the grid has data
Actual: the grid has no data, it shows up after a data source operation like filter/group
Sample:
@using ClientApp.Shared
@inject HttpClient Http
<TelerikGrid Data=@forecasts Height="550px"
Pageable="true" Sortable="true"
PageSize="20" Groupable="true">
<GridColumns>
<GridColumn Field="Date">
<Template>
@((context as WeatherForecast).Date.ToString("dddd, dd MMM yyyy"))
</Template>
</GridColumn>
<GridColumn Field="TemperatureC" Title="Temp. C" />
<GridColumn Field="TemperatureF" Title="Temp. F" />
<GridColumn Field="Summary" />
</GridColumns>
</TelerikGrid>
@code {
//List<WeatherForecast> forecasts { get; set; } = new List<WeatherForecast>(); // Works fine!
List<WeatherForecast> forecasts { get; set; } //Need to sort a field to show the rows
protected override async Task OnInitializedAsync()
{
//forecasts = new List<WeatherForecast>(); //this helps
forecasts = await Http.GetJsonAsync<List<WeatherForecast>>("WeatherForecast");
//these do not help
//await Task.Delay(200);
//StateHasChanged();
}
}
I had a working server-side Blazor project that was working, but a problem appears to have begun without me changing any code. I upgraded to the latest version (2.4.0) and am having the same problem.
The SelectedItemsChanged event is not working when a checkbox is checked. If I click outside the checkbox in the same column, the event fires however.
I see similar behavior on your own demo page, so this seems like a bug: https://demos.telerik.com/blazor-ui/grid/selection Check some products on that grid and the selected items do not change below. I've tested this in Vivaldi and Edge.
Thanks,
Sean
Hello!
The multiple selection functionality in the grid no longer works as expected.
The select check boxes doesn't seem to do anything and the only way to select something is when clicking on the actual row.
The problem is also present on your demo page.
ADMIN EDIT: Duplicate of https://feedback.telerik.com/blazor/1443720-selection-does-not-work-when-clicking-on-the-checkbox-works-when-clicking-the-row
Best regards.
Hi,
when scrolling all the way down on a grid and then using horizontal scroll, grid is scrolled vertically a bit.
Here is the video
https://drive.google.com/file/d/16GXvUO9Q9kTI2MSkn2t8_9-2ZBn44QO6/view?usp=sharing
Best regards,
Robert
There's a bug when using the popup mode and adding a record
https://demos.telerik.com/blazor-ui/grid/editing-popup
- Click 'Add Employee'
- Click the X at the top right of the modal popup
- You are left with a row in the grid
I would like to request these features on the Blazor Grid:
- Add column pinning/freezing
- Add selectable column totals sum/min/max/count/avg functions and/or a way to define custom column totals calculations
Thanks.
This worked in 2.5.1.
Sample repro (focus the textbox and try moving the cursor with the left and right arrows)
<TelerikTabStrip>
<TabStripTab Title="first tab">
<TelerikTextBox Value="@TbValue"></TelerikTextBox>
<input type="text" value="@TbValue" />
</TabStripTab>
<TabStripTab Title="second tab">another tab</TabStripTab>
</TelerikTabStrip>
@code{
string TbValue { get; set; } = "lorem ipsum";
}
There is an issue with setting the Grid's Page property to values other than 1.
This is visible on the Blazor Demo for Grid Paging (https://demos.telerik.com/blazor-ui/grid/paging).
Initially the CurrentPage variable is set to 3, and thus the Page property on the Grid is set to 3. The Pager in the grid correctly shows Page 3 and the Pager Info is also correct, however, the data in the Grid is not filtered to the correct page. This can be seen by clicking Page 1 in the Pager (the data remains the same), and then clicking Page 3 in the Pager (the data changes, and is different than the initial data).
Video here
https://drive.google.com/file/d/12em-oc6xRJ_JjbFSANK9IqKDkK0f7p6y/view
Select an item in the grid and press and hold down arrow...
System.NullReferenceException: Object reference not set to an instance of an object. at Telerik.Blazor.Components.TelerikGridBase`1.FocusPagerAsync() at Telerik.Blazor.Components.TelerikGridBase`1.FocusCellAsync(GridNavigationCommandEventArgs args) at Telerik.Blazor.Components.TelerikGridBase`1.FocusAdjacentCellAsync(GridNavigationCommandEventArgs args, Int32 rowIndexOffset, Int32 columnIndexOffset) at Telerik.Blazor.Components.TelerikGridBase`1.FocusBottomCellAsync(GridNavigationCommandEventArgs args) at Telerik.Blazor.Components.TelerikGridBase`1.ExecuteNavigationCommandAsync(GridNavigationCommandEventArgs args) at Telerik.Blazor.Components.TelerikGridBase`1.ExecuteCommand(Object args) at Telerik.Blazor.Components.Grid.GridRowBase`1.OnExecuteCommand(GridCommandEventArgs commandArgs) at Telerik.Blazor.Components.Grid.GridDataCellBase`1.ExecuteCommandAsync(GridCommandEventArgs args) at Telerik.Blazor.Components.Grid.GridNavigableCellBase`1.ExecuteNavigationCommandAsync(String commandName, Int32 rowIndexOffset, Int32 columnIndexOffset, KeyboardEventArgs args) at Telerik.Blazor.Components.Grid.GridNavigableCellBase`1.ProcessKeyDown(KeyboardEventArgs args) at Telerik.Blazor.Components.Grid.GridContentCell`1.ProcessKeyDown(KeyboardEventArgs args) at Telerik.Blazor.Components.Grid.GridNavigableCellBase`1.OnKeyDown(KeyboardEventArgs args) at Microsoft.AspNetCore.Components.ComponentBase.CallStateHasChangedOnAsyncCompletion(Task task) at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle)
Hiding a grid column causes data columns to be misaligned with headers.
The issue can be reproduced by clicking the "Show/Hide Summary Column" button in the following demo:
I want to expand on another feature request regarding grid excel behaviour.
Like in excel moving into cell enables edit mode. Using arrow keys or enter key moves out of edit mode and do an automatic update of cell. Escape cancels the editing.
With Wpf you have can extend the grid behaviour in order to do things like moving to the beginning of first column of next row when you are on the last column of row and you press the right arrow / tab / enter key
Likely related to https://feedback.telerik.com/blazor/1432615-support-for-nested-complex-models
Issue - Filtering / Sorting on a column that is bound to a complex object fails to generate the proper OData string.
Example Grid Code, three columns, column 1 and 3 are bound to a complex class, column 2 just a string:
<TelerikGrid Data=@sysVars.Dtos Pageable="true" Sortable="true" FilterMode="Telerik.Blazor.GridFilterMode.FilterRow" PageSize="20" TotalCount=@sysVars.Count OnRead=@ReadItems>
<GridColumns>
<GridColumn Field=@nameof(SysVar.SysVarType.Name) Title="Type" Editable="false">
<Template>
@{
var data = context as SysVar;
@data.SysVarType.Name
}
</Template>
</GridColumn>
<GridColumn Field=@nameof(SysVar.Value) Title="Value">
<Template>
@{
var data = context as SysVar;
var link = SysVarDto.FrontEndEditUrl(data.Id.Value);
<NavLink href=@link>@data.Value</NavLink>
}
</Template>
</GridColumn>
<GridColumn Field=@nameof(SysVar.Hierarchy.Description) Title="Hierarchy">
<Template>
@{
var data = context as SysVar;
@data.Hierarchy.Description
}
</Template>
</GridColumn>
</GridColumns>
</TelerikGrid>The values bound to the grid are made up of a complex object. For the sake of the example
public class SysVar
{
public string Value { get; set; }
public Hierarchy Hierarchy { get; set; }
public SysVarType SysVarType { get; set; }
}
public class Hierarchy
{
public string Description { get; set; }
}
public class SysVarType
{
public string Name { get; set; }
}Right now I know I can't have the Grid render SysVarType.Name, so I use a custom cell and everything works. However, if I try to sort/filter on my complex columns, SysVarType or Hierarchy the resulting OData string that is generated is incorrect.
Example of what is should look like, from a Telerik Grid in my React application if I sort on the sysVarType column:
https://localhost:44335/odata/v1/SysVarOData?$count=true&$expand=sysVarType($select=name),hierarchy($select=description)&$skip=0&$top=20&$orderby=value,sysVarType/name
Same string generated by the Telerik Grid in Blazor
Note: I can't sort two columns at the same time, not a huge issue at this time.
What is failing is the $orderby= doesn't return sysVarType/name and only returns name, causing a 400 on my backend as the class SysVar doesn't have a name field.