I would like to lock a column at a certain index in the Grid. For example, I would like to have a column on index 0 (the first column in the Grid) and it should not be reordered by any user interaction (dragging the column itself or dragging other columns in its place).
Also if the user tries to drag a column over my locked column the drag handlers must not be present/or show that it is an invalid drop location.
===
Telerik edit:
In the meantime, a possible workaround is to:
<p>The <strong>Name</strong> column index will always be 0.
The Grid will either move the reordered column to index 1, or put it back to its previous index (revert).</p>
<p><label><TelerikCheckBox @bind-Value="@ShouldRevertGridColumnOrder" /> Revert Invalid Column Reordering</label></p>
<TelerikGrid @ref="@GridRef"
Data="@GridData"
TItem="@SampleModel"
Pageable="true"
Sortable="true"
Reorderable="true"
OnStateChanged="@OnGridStateChanged">
<GridColumns>
<GridColumn Field="@nameof(SampleModel.Name)" Reorderable="false" />
<GridColumn Field="@nameof(SampleModel.GroupName)" />
<GridColumn Field="@nameof(SampleModel.Price)" />
<GridColumn Field="@nameof(SampleModel.Quantity)" />
<GridColumn Field="@nameof(SampleModel.StartDate)" />
<GridColumn Field="@nameof(SampleModel.IsActive)" />
</GridColumns>
</TelerikGrid>
@code {
private TelerikGrid<SampleModel>? GridRef { get; set; }
private List<SampleModel> GridData { get; set; } = new();
private bool ShouldRevertGridColumnOrder { get; set; }
private IEnumerable<int>? CachedGridColumnIndexes { get; set; }
private async Task OnGridStateChanged(GridStateEventArgs<SampleModel> args)
{
if (args.PropertyName == "ColumnStates")
{
if (args.GridState.ColumnStates.First().Index > 0 && GridRef != null)
{
if (ShouldRevertGridColumnOrder)
{
await RevertGridColumnOrder();
}
else
{
args.GridState.ColumnStates.First(x => x.Index == 0).Index = 1;
args.GridState.ColumnStates.First().Index = 0;
await GridRef.SetStateAsync(args.GridState);
}
}
CacheGridColumnOrder();
}
}
private void CacheGridColumnOrder()
{
var gridColumnState = GridRef?.GetState().ColumnStates;
if (gridColumnState != null)
{
CachedGridColumnIndexes = gridColumnState.Select(x => x.Index);
}
}
private async Task RevertGridColumnOrder()
{
var gridState = GridRef?.GetState();
if (gridState != null && CachedGridColumnIndexes != null)
{
for (int i = 0; i < gridState.ColumnStates.Count; i++)
{
gridState.ColumnStates.ElementAt(i).Index = CachedGridColumnIndexes.ElementAt(i);
}
await GridRef!.SetStateAsync(gridState);
}
}
protected override void OnAfterRender(bool firstRender)
{
if (firstRender)
{
CacheGridColumnOrder();
}
base.OnAfterRender(firstRender);
}
protected override void OnInitialized()
{
var rnd = new Random();
for (int i = 1; i <= 7; i++)
{
GridData.Add(new SampleModel()
{
Id = i,
Name = $"Name {i}",
GroupName = $"Group {i % 3 + 1}",
Price = rnd.Next(1, 100) * 1.23m,
Quantity = rnd.Next(0, 1000),
StartDate = DateTime.Now.AddDays(-rnd.Next(60, 1000)),
IsActive = i % 4 > 0
});
}
}
public class SampleModel
{
public int Id { get; set; }
public string Name { get; set; } = string.Empty;
public string GroupName { get; set; } = string.Empty;
public decimal Price { get; set; }
public int Quantity { get; set; }
public DateTime StartDate { get; set; }
public bool IsActive { get; set; }
}
}
Based on some program logic and conditions I want to programmatic scroll to a chosen row so the user can see a specific row. For example:
- Scroll to a selected row
- Scroll to a record, based on its Id
-Scroll to the top of the Grid when the user adds a new item
- Scroll to an expanded item in hierarchical Grid
=====ADMIN EDIT======
We have a knowledge-based article that showcases how to scroll the Grid to the selected row. This article links to a sample GitHub application where you see code samples. If you need to scroll to another row, you can use a similar approach.
I want to filter a Grid by DateTimeOffset? field
===ADMIN EDIT===
There are two possible options:
1. Use a DTO in which you have a DateTime field converted as desired by your app from the DateTimeOffset. Filtering, sorting, editing, and grouping on DateTime values are supported out-of-the-box.
REPL example that demonstrates this approach.
2. Use the Grid Filter Template. As a filter editor, you can use the DateTimePicker component, which supports the DateTimeOffset type.
REPL example that demonstrates this approach.
Hello there,
I am looking for the ability to display hierarchical data in the grid control similar to that available in the asp.net core grid: https://demos.telerik.com/aspnet-core/grid/hierarchy
Thanks!
Currently the blazor grid must be a specific, static height. If one is not provided, the grid uses a default of 500px.
Kendo grid implementations in other UI frameworks allow for more flexibility in the height of the grid. It would be great if the blazor implementation could support this as well.
Two specific scenarios that are valueable:
1) Grid height adjusts to accomodate all of the items in the grid
For other kendo grid implementations, this is typically the case when "Scrollable" is set to false. If there is a plan to allow toggling scrolling for the blazor grid, then I think that this would come along with that.
2) Ability to set grid height to 100%
With other kendo implementations this is normally done via CSS, and is useful for when you want a "full screen" grid. This is normally combined with "Scrollable=true" and often combined with Pagination="true" as well. Currently it's not possible to do this - since the height is defined on the k-grid element, it cannot be overridden with CSS.
Please allow to set Group By fields at Design time, currently only user has control to Drag and drop to group.
we need feature to group by fixed set of columns and don't allow user to change the grouping, also need option to hide group collapse icons.
It would be really nice now that we have a grid loader, to be able to customize this using a custom template.
Currently it fixes even the animation type, so while we have chosen a different enum (Pulsing) for all our loaders, our grids now look different because it is not possible currently to change the grid loader beyond turning it on and off.
Please support Display(Order = ...) with autogenerated Grid columns.
Such functionality will also be useful for controlling the order of manually declared columns when using a custom component for reusable columns. For example: https://blazorrepl.telerik.com/cGOtbwOX21f6zQcy35 - the "Name" column is rendered last and currently one cannot control its order.
public class DateModel
{
[Display(Order = 2)]
public string Id { get; set; }
[Display(Order = 1)]
public string Text { get; set; }
}
I am adding validation messages for the popup form fields and I do not want to display the ValidationSummary in addition to them. Please add option to remove it.
---
ADMIN EDIT
---
Built-in field validation messages will be exposed in future version of the product. Thus, you can add inline or tooltip validation messages to the Popup edit form without an EditorTemplate.
For the time being, you can remove the ValidationSummary with some CSS. Here is an example of hiding the ValidationSummary and adding inline ValidationMessage for the ProductName field: https://blazorrepl.telerik.com/cckycgPf37NZfy9J11
Hello,
Currently the Id and Field properties of GridColumnState in the GridState do not have setters. As a result, these properties are not deserialized, e.g. when sending GridState information from the client to the server in WebAssembly apps.
I would like to determine the existing columns in the Grid and tailor the database request, so that the fetched data includes only the required columns.
Another possible use case is detecting outdated GridState information in localStorage, after the app has been updated and the Grid contains different columns.
Similar to the WPF grid I would like the option to require the user hold shift to sort by multiple columns, otherwise the grid would sort by only a single column.
https://docs.telerik.com/devtools/wpf/controls/radgridview/sorting/multiple-column-sorting
Currently, the Grid doesn't display its built-in loading animation on initial data (page) load.
The OnRead handler is now completely decoupled with the Data parameter, so the limitation can be removed at least for OnRead scenarios.
At the moment the numeric and date filters keep the filter button visible even on narrow columns. This must be implemented for the string filter as well - it has a set width at the moment.
The "clear filter" button must always be visible as well (when there is a filter applied, of course).
Ideally, the filter elements will also have a common container with an accessible class so, for example, you can set its max-width to 50% or 100px to match desired UI easily without hacking through several different layouts and selectors.