In a grouped Grid with editing if I collapse all groups and then expand one to edit an item in it, once I press Enter to complete the editing all groups expand.
Please add option for persisting the Collapsed State of the groups.
---
TELERIK EDIT
The feature applies to the other data operations as well (for example, paging, sorting).
Here is how to maintain the collapsed groups after editing by using the Grid OnStateChanged event and the Grid state as a whole:
@using Telerik.DataSource
<TelerikGrid @ref="@GridRef"
Data="@GridData"
TItem="@Employee"
Pageable="true"
Sortable="true"
Groupable="true"
FilterMode="GridFilterMode.FilterRow"
OnStateInit="@OnGridStateInit"
OnStateChanged="@OnGridStateChanged"
EditMode="@GridEditMode.Inline"
OnUpdate="@OnGridUpdate">
<GridColumns>
<GridColumn Field="@nameof(Employee.Name)" />
<GridColumn Field="@nameof(Employee.Team)" />
<GridColumn Field="@nameof(Employee.Salary)" />
<GridColumn Field="@nameof(Employee.OnVacation)" />
<GridCommandColumn>
<GridCommandButton Command="Save" Icon="@SvgIcon.Save" ShowInEdit="true">Update</GridCommandButton>
<GridCommandButton Command="Edit" Icon="@SvgIcon.Pencil">Edit</GridCommandButton>
<GridCommandButton Command="Cancel" Icon="@SvgIcon.Cancel" ShowInEdit="true">Cancel</GridCommandButton>
</GridCommandColumn>
</GridColumns>
</TelerikGrid>
@code {
private TelerikGrid<Employee>? GridRef { get; set; }
private List<Employee> GridData { get; set; } = new();
private ICollection<int>? GridCollapsedGroups { get; set; }
private void OnGridUpdate(GridCommandEventArgs args)
{
var updatedItem = (Employee)args.Item;
var originalItemIndex = GridData.FindIndex(x => x.Id == updatedItem.Id);
if (originalItemIndex >= 0)
{
GridData[originalItemIndex] = updatedItem;
}
GridCollapsedGroups = GridRef!.GetState().CollapsedGroups;
}
private async Task OnGridStateChanged(GridStateEventArgs<Employee> args)
{
if (args.PropertyName == "EditItem" && GridCollapsedGroups != null)
{
args.GridState.CollapsedGroups = GridCollapsedGroups;
await GridRef!.SetStateAsync(args.GridState);
GridCollapsedGroups = default;
}
}
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)
});
}
protected override void OnInitialized()
{
for (int i = 1; i <= 20; i++)
{
GridData.Add(new Employee()
{
Id = i,
Name = $"Name {i}",
Team = $"Team {i % 4 + 1}",
Salary = (decimal)Random.Shared.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; }
}
}
If you reorder a column and then lock it, visually it looks locked and the functionality for a locked column is correctly supported.
However, the Locked property of the ColumnStates in Grid State for that column remains "false". Locked = "true" is applied based on the initial column position.
When the Grid/TreeList is in incell edit mode and you finish editing a cell by pressing "Enter", the focus is lost if the next cell to be edited is not editable.
Steps to reproduce:
@using System.ComponentModel.DataAnnotations;
<TelerikGrid Data="@forecasts"
Height="550px"
FilterMode="@GridFilterMode.FilterMenu"
Sortable="true"
Pageable="true"
PageSize="20"
Groupable="true" Resizable="true"
Reorderable="true"
EditMode="@GridEditMode.Incell">
<GridColumns>
<GridColumn Field="Id" Title="Id" Width="100px" Editable="false" Groupable="false" />
<GridColumn Field="Summary" Id="summary" Title="telerik bind-Value">
<Template>
@{
var model = context as WeatherForecast;
<span>@model.Summary</span>
}
</Template>
<EditorTemplate>
@{
var model = context as WeatherForecast;
if (model.CanEdit)
{
<TelerikTextBox @bind-Value="@model.Summary"></TelerikTextBox>
}
else
{
@model.Summary
}
}
</EditorTemplate>
</GridColumn>
</GridColumns>
</TelerikGrid>
@code {
List<WeatherForecast> forecasts { get; set; }
protected override void OnInitialized()
{
forecasts = WeatherForecast.GetForecastList();
}
public class WeatherForecast
{
public int Id { get; set; }
public string Summary { get; set; }
public bool CanEdit { get; set; }
static public List<WeatherForecast> GetForecastList()
{
var rng = new Random();
return Enumerable.Range(1, 150).Select(index => new WeatherForecast
{
Id = index,
Summary = Summaries[rng.Next(Summaries.Length)],
CanEdit = index % 3 != 0
}).ToList();
}
private static readonly string[] Summaries = new[]
{
"Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching"
};
}
}
The focus is lost
The focus should not be lost
All
All
x.y.z
x.y.z
Telerik input components inside EditorTemplate render the whole grid on each keystroke
<AdminEdit>
As a workaround, you can use the standard Input components provided by the framework together with a CSS class that would visually make them like the Telerik Input Components. An example for the TextArea:
<InputTextArea class="k-textarea" @bind-Value="@myValue"></InputTextArea></AdminEdit>
Problem:
Grid exports columns as 0 width unless Grid column widths are specified in px. This is a terrible experience for users, and specifying grid width in px is terrible when you have users that can be using phones or 4k screens. Managing Grid for different screen sizes is already hard enough!
Solution 1: (Good)
The grid should export a default (64px) width for columns that aren't specified in px. Inexperienced Excel users are lost when columns are collapsed, but can easily resize columns as needed when each one is visible!
Solution 2: (Better)
Calculate a width - like [(rem value)*10]px. Even if it isn't perfect it will go a long way to creating something visually pleasing on initial open in Excel.
OnChange and OnBlur event for editors (TelerikTextBox, NumericTextBox, and others) is not fired in InCell edit mode with Tab key.
We often have grid data with a widely varying quantity of cell content from row to row. We usually present this with constant row height initially to have as much row overview as possible at a glance.
Grabbing the row divider line and individually make it larger or even double click on it to fit the size would be very useful for users.
It would be nice if it was possible to have a grid and have already in a cell the value of 1 and somebody want's to add 4 to it he doesn't have to calculate but could just type 1+4 and the answer (5) would be saved to the grid.
I have a Grid and if the initial validation fails for a certain cell and the user edits a cell with a valid value on the same row the editing freezes.
<AdminEdit>
As a workaround, you can provide valid initial values for all cells in the Grid.
</AdminEdit>
Using the following code to allow the user to select rows in the grid
<GridCheckboxColumn SelectAll="true" Locked="true" />
When using the Grid Export to Excel, there is no facility for the export to only use the rows selected by the user
<GridExport>
<GridExcelExport FileName="Export File" AllPages="@ExportAllPages" />
</GridExport>