When the user drags a third column to the Grid Group Panel, it ends up being second, instead of last. It looks like each new column is inserted at index 1, instead of appended last (when this is the user's intent).
@using Telerik.DataSource
<p>Group by a third column, so that it should come last in the Group Panel:</p>
<TelerikGrid @ref="@GridRef"
Data="@GridData"
Pageable="true"
Sortable="true"
Groupable="true"
FilterMode="GridFilterMode.FilterRow"
OnStateInit="@( (GridStateEventArgs<Employee> args) => OnGridStateInit(args) )"
OnStateChanged="@( (GridStateEventArgs<Employee> args) => OnGridStateChanged(args) )">
<GridColumns>
<GridColumn Field="@nameof(Employee.Name)" />
<GridColumn Field="@nameof(Employee.Team)" />
<GridColumn Field="@nameof(Employee.Salary)" />
<GridColumn Field="@nameof(Employee.OnVacation)" />
</GridColumns>
</TelerikGrid>
@code {
private TelerikGrid<Employee>? GridRef { get; set; }
private List<Employee> GridData { get; set; } = new();
private void OnGridStateInit(GridStateEventArgs<Employee> args)
{
args.GridState.GroupDescriptors = new List<GroupDescriptor>();
args.GridState.GroupDescriptors.Add(new GroupDescriptor()
{
Member = nameof(Employee.Team),
MemberType = typeof(string)
});
args.GridState.GroupDescriptors.Add(new GroupDescriptor()
{
Member = nameof(Employee.OnVacation),
MemberType = typeof(bool)
});
}
private async Task OnGridStateChanged(GridStateEventArgs<Employee> args)
{
if (args.PropertyName == "GroupDescriptors" && args.GridState.GroupDescriptors.Count > 2 && GridRef != null)
{
var secondGroupDescriptor = args.GridState.GroupDescriptors.ElementAt(1);
args.GridState.GroupDescriptors.Remove(secondGroupDescriptor);
args.GridState.GroupDescriptors.Add(secondGroupDescriptor);
await GridRef.SetStateAsync(args.GridState);
}
}
protected override void OnInitialized()
{
var rnd = new Random();
for (int i = 1; i <= 20; i++)
{
GridData.Add(new Employee()
{
Id = i,
Name = "Name " + i,
Team = "Team " + (i % 4 + 1),
Salary = (decimal)rnd.Next(1000, 3000),
OnVacation = i % 3 == 0
});
}
}
public class Employee
{
public int Id { get; set; }
public string Name { get; set; } = string.Empty;
public string Team { get; set; } = string.Empty;
public decimal Salary { get; set; }
public bool OnVacation { get; set; }
}
}
Hello,
when using grid with multiple-selection mode and row template, ONLY single row selection works. Not able to select multiple rows. Grid somehow internally "reverts"(lose) selection to single row.
Here is full detail, with video and sample "what acts weird". Start with the post " Michal - Posted on: 19 Oct 2023 08:38":
Simplified reproducible sample from Nadezhda Tacheva(thanks), has that issue also - try to select multiple rows:
Video with the problem AND expected result(video is based on sample posted at same feedback above "Posted on: 19 Oct 2023 08:38":
https://feedback.telerik.com/attachment/download/1120622
Fully working example(recorded video) in VS - GridCheckBoxColumn in sample "IS HACK!", not required at all(just hint, which can be removed):
@using System.Collections.Generic;
@using System.Dynamic;
<span>Selection bind not working as expected:</span>
<TelerikGrid TItem="ExpandoObject"
@bind-SelectedItems="@gSelectedItems"
OnRowClick="@OnGridRowClicked"
SelectionMode="GridSelectionMode.Multiple"
OnRead=@gHLReadItems
RowHeight="60">
<RowTemplate Context="ctx">
<td>
@{
var it = (ctx as IDictionary<string, object>);
@(it["Name"].ToString())
}
</td>
</RowTemplate>
<GridColumns>
<GridCheckboxColumn CheckBoxOnlySelection="true" Visible="false" @key="@("sIDX1")" SelectAll="false" />
<GridColumn Field="Name" FieldType=@typeof(string) Title="Name" />
</GridColumns>
</TelerikGrid>
<span>WORKs OK:</span>
<TelerikGrid TItem="ExpandoObject"
@bind-SelectedItems="@gSelectedItems"
OnRowClick="@OnGridRowClicked"
SelectionMode="GridSelectionMode.Multiple"
OnRead=@gHLReadItems
RowHeight="60">
<GridColumns>
<GridCheckboxColumn CheckBoxOnlySelection="true" Visible="false" @key="@("sIDX2")" SelectAll="false" />
<GridColumn Field="Name" FieldType=@typeof(string) Title="Name" />
</GridColumns>
</TelerikGrid>
@code
{
private List<ExpandoObject> RowData;
IEnumerable<ExpandoObject> gSelectedItems { get; set; } = Enumerable.Empty<ExpandoObject>();
protected override void OnInitialized()
{
RowData = new List<ExpandoObject>();
dynamic obj0 = new ExpandoObject();
obj0.Name = "Tester";
RowData.Add(obj0);
dynamic obj1 = new ExpandoObject();
obj1.Name = "Testovicz";
RowData.Add(obj1);
dynamic obj2 = new ExpandoObject();
obj2.Name = "Selectant";
RowData.Add(obj2);
}
protected async Task gHLReadItems(GridReadEventArgs args)
{
//RowData are readen from DYNAMIC source, cannot add any NEW property to it
args.Data = RowData;
args.Total = 3;
}
protected void OnGridRowClicked(GridRowClickEventArgs args)
{
var it = args.Item as ExpandoObject;
if (gSelectedItems.Any(x => x == it))
{
gSelectedItems = gSelectedItems.Where(x => x != it);
}
else
{
gSelectedItems = gSelectedItems.Union(RowData.Where(x => x == it));
}
}
}
thanks
Description
When the state is loaded and there is a value in the search box, the X (clear button) is missing.
Reproduction (if bug)
Expected (if bug)
The X icon should be visible.
Browser (if bug)
All
Project type (if bug)
All
Last working version of Telerik UI for Blazor (if regression)
3.5.0
As you can see in the provided example : https://blazorrepl.telerik.com/QcaiPbkL56qf6XQ747
I have the following situation. I'm using a custom editor template with two-way binding for the column : OrderToEdit.ShipCity. If I change the value of this column in a row and press Enter, Tab or mouse focus out very quickly (immediately after value change), UpdateHandler is triggered before the valueChanged event of the context and as a result changes are not shown. If there is a delay ( i.e 1 second ) all works fine. This is not happening when i'm using the builtin editor GridEditorType.TextBox. Could you provide me a solution ?
There is another problem. if a click inside a cell edit mode is triggered. But if i click in a button in the toolbar or in column menu the cell remains open is not closed. I think this should not happen.
Hello,
The Grid header and data cells become misaligned if the user changes the page zoom level. The right padding of the Grid header area resizes, according to the zoom level, but the scrollbar width remains the same. This triggers the misalignment.
The problem disappears after browser refresh at the current zoom level.
Hi Support,
I found a bug that Telerik grid filter for blazor on web assembly version not working for dynamic datasource. While the server one work just fine. Please see the video for more detail. I am also attach the two solution for your investigation.
https://www.loom.com/share/c876a98500ea4a8fbacd3aa30179485d
This same peice of code work in Server version but not for client version
<TelerikRootComponent>
<TelerikGrid Data="@GridData"
Height="350px"
Sortable="true"
Pageable="true"
SortMode="@SortMode.Single"
FilterMode="@GridFilterMode.FilterMenu"
FilterMenuType="@FilterMenuType.CheckBoxList"
PageSize="10">
<GridColumns>
<GridColumn Field="Col1" Width="80px" Locked="true" />
<GridColumn Field="Col2" Width="140px" />
</GridColumns>
</TelerikGrid>
</TelerikRootComponent>
@code { public List<dynamic> GridData = new List<dynamic>();
protected async override Task OnInitializedAsync()
{
for (int i = 1; i < 10; i++)
{
dynamic row = new ExpandoObject();
row.Col1 = $"col1_{i}";
row.Col2 = $"col2_{i}";
GridData.Add(row);
}
} }
Please help me fix this issue ASAP as our product need this filter to ship the release.
Thanks
Huy Nguyen
Initially, the grid is filtered by "Is FTE? = True". It shows 20 lines. The sum of "Hours" should be 800. But the footer shows another value (depends on the random logic which you've implemented). See the attached screenshot.
Then, when changing the filter, the correct sum is shown.
But I need the correct value initially...
Re: I've just found out that using the OnRead event instead of the standard data binding solves the issue. Better said, it's a possible work-around.
I'm trying manual source operations with grouping and aggregates, but I get: InvalidOperationException: No generic method 'Sum' on type 'System.Linq.Enumerable' is compatible with the supplied type arguments and arguments. No type arguments should be provided if the method is non-generic
I've edited the sample in the docs of manual source operations with grouping and added some aggregates.
Since some feats with the grid are not compatible with others, it is not easy to understand what is feasible and what is not. I know from the docs that virtual scolling is not compatible with many feats, or that group load on demand is not comaptible with aggregates, but I don't found any about aggregates with manual operations.
Please find the attached demo project
This isn't a bug per say, but with the latest Telerik Blazor update, the GridCommandEventArgs Field and Value properties are now deprecated. When updating a specific cell in a grid using InCell edit mode, how am I able to know which specific field and value are updated when the OnUpdate event gets called? Before the latest update, I had the following code:
protected override void OnGridRowUpdate(GridCommandEventArgs args)
{
validationMessage = ValidateField(args.Field, args.Value);
}
I realize I have the updated values using args.Item, but I don't want to have to validate the entire row every time I update a cell. Is there still a way to know what cell I updated, or is that information no more?
Thank you,
Steve
If a new item for a grid is created and the CreateHandler is cancelled due to some validation error, the new loading indicator does not disappear.
protected async void CreateHandler(GridCommandEventArgs args)
{
var myItem = (MyModel) args.Item;
if (!IsValid(myItem))
{
args.IsCancelled = true;
return;
}
...
}
Regards,
René
On initialization of the Grid the oDataString is correct, but when I apply a filter or apply a sort to a Grid column the ToODataString extension method generates an incorrect request URL. If I revert back to 2.16.0 everything works as expected.
With using the Grid, I have several GridCommandButtons. Instead of displaying the button with an icon followed by text, I wanted to display just the icon and use the TelerikTooltip to display the text on hover. When I set the GridCommandButton.Title and inspect the DOM, there is no title attribute on the button even though the description of the GridCommandButton.Title property reads "The title attribute of the Button".
<TelerikGrid @ref="@Grid"
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.
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)
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.