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; }
}
}
The TelerikCheckBoxListFilter starts working very slowly with hundreds of items or more. That includes rendering and searching in it.
A possible workaround is to put a virtual Grid inside the FilterMenuTemplate. The example below is a modified version of this one - Blazor Grid checkbox list filtering with custom data. The FilterMenuButtonsTemplate is necessary to clear the selected Grid rows when the user clears the column filter.
@using Telerik.DataSource
@using Telerik.DataSource.Extensions
<TelerikGrid TItem="@Employee"
OnRead="@OnReadHandler"
Pageable="true"
FilterMode="@( NameOptions != null ? GridFilterMode.FilterMenu : GridFilterMode.None )"
FilterMenuType="@FilterMenuType.CheckBoxList"
Height="400px">
<GridColumns>
<GridColumn Field="@(nameof(Employee.EmployeeId))" Filterable="false" />
<GridColumn Field="@nameof(Employee.Name)">
<FilterMenuTemplate Context="context">
<TelerikGrid Data="@NameOptions"
ScrollMode="@GridScrollMode.Virtual"
Height="240px"
RowHeight="36"
FilterMode="@GridFilterMode.FilterRow"
SelectionMode="@GridSelectionMode.Multiple"
SelectedItems="@SelectedGridItems"
SelectedItemsChanged="@( (IEnumerable<NameFilterOption> newSelected) =>
GridSelectedItemsChanged(newSelected, context.FilterDescriptor) )">
<GridColumns>
<GridCheckboxColumn SelectAllMode="@GridSelectAllMode.All" />
<GridColumn Field="@nameof(NameFilterOption.Name)"></GridColumn>
</GridColumns>
</TelerikGrid>
</FilterMenuTemplate>
<FilterMenuButtonsTemplate Context="filterContext">
<TelerikButton OnClick="@(async _ => await filterContext.FilterAsync())"
ThemeColor="@ThemeConstants.Button.ThemeColor.Primary">Filter </TelerikButton>
<TelerikButton OnClick="@(() => ClearFilterAsync(filterContext))">Clear</TelerikButton>
</FilterMenuButtonsTemplate>
</GridColumn>
<GridColumn Field="@nameof(Employee.Team)" Title="Team" />
<GridColumn Field="@nameof(Employee.IsOnLeave)" Title="On Vacation" />
</GridColumns>
</TelerikGrid>
@code {
string DDLValue { get; set; }
List<Employee> AllGridData { get; set; }
private IEnumerable<NameFilterOption> SelectedGridItems { get; set; } = new List<NameFilterOption>();
private void GridSelectedItemsChanged(IEnumerable<NameFilterOption> newSelectedItems, CompositeFilterDescriptor cfd)
{
SelectedGridItems = newSelectedItems;
cfd.LogicalOperator = FilterCompositionLogicalOperator.Or;
cfd.FilterDescriptors.Clear();
foreach (var sgi in SelectedGridItems)
{
cfd.FilterDescriptors.Add(new FilterDescriptor()
{
Member = nameof(Employee.Name),
MemberType = typeof(string),
Operator = FilterOperator.IsEqualTo,
Value = sgi.Name
});
}
}
private async Task ClearFilterAsync(FilterMenuTemplateContext filterContext)
{
SelectedGridItems = new List<NameFilterOption>();
await filterContext.ClearFilterAsync();
}
#region custom-filter-data
List<TeamNameFilterOption> TeamsList { get; set; }
List<NameFilterOption> NameOptions { get; set; }
//obtain filter lists data from the data source to show all options
async Task GetTeamOptions()
{
if (TeamsList == null) // sample of caching since we always want all distinct options,
//but we don't want to make unnecessary requests
{
TeamsList = await GetNamesFromService();
}
}
async Task<List<TeamNameFilterOption>> GetNamesFromService()
{
await Task.Delay(500);// simulate a real service delay
// this is just one example of getting distinct values from the full data source
// in a real case you'd probably call your data service here instead
// or apply further logic (such as tie the returned data to the data the grid will have according to your business logic)
List<TeamNameFilterOption> data = AllGridData.OrderBy(z => z.Team).Select(z => z.Team).
Distinct().Select(t => new TeamNameFilterOption { Team = t }).ToList();
return await Task.FromResult(data);
}
async Task GetNameOptions()
{
if (NameOptions == null)
{
NameOptions = await GetNameOptionsFromService();
}
}
async Task<List<NameFilterOption>> GetNameOptionsFromService()
{
await Task.Delay(500);// simulate a real service delay
List<NameFilterOption> data = AllGridData.OrderBy(z => z.Name).Select(z => z.Name).
Distinct().Select(n => new NameFilterOption { Name = n }).ToList();
return await Task.FromResult(data);
}
#endregion custom-filter-data
async Task OnReadHandler(GridReadEventArgs args)
{
//typical data retrieval for the grid
var filteredData = await AllGridData.ToDataSourceResultAsync(args.Request);
args.Data = filteredData.Data as IEnumerable<Employee>;
args.Total = filteredData.Total;
}
protected override async Task OnInitializedAsync()
{
// generate data that simulates the database for this example
// the actual grid data is retrieve in its OnRead handler
AllGridData = new List<Employee>();
var rand = new Random();
for (int i = 1; i <= 1000; i++)
{
AllGridData.Add(new Employee()
{
EmployeeId = i,
Name = "Employee " + i.ToString(),
Team = "Team " + i % 3,
IsOnLeave = i % 2 == 0
});
}
// get custom filters data. In a future version you will be able to call these methods
// from the template initialization instead of here (or in OnRead) so that they fetch data
// only when the user actually needs filter values, instead of always - that could improve server performance
await GetTeamOptions();
await GetNameOptions();
}
public class Employee
{
public int EmployeeId { get; set; }
public string Name { get; set; }
public string Team { get; set; }
public bool IsOnLeave { get; set; }
}
// in this sample we use simplified models to fetch less data from the service
// instead of using the full Employee model that has many fields we do not need for the filters
public class TeamNameFilterOption
{
public string Team { get; set; }
}
public class NameFilterOption
{
public string Name { get; set; }
}
}
Currently, if I call Grid.AutoFitAllColumnsAsync "too early" it throws a null reference exception.
I am aware that this is a limitation but the behavior can be improved. For example, handle the exception and provide some useful information or give me a programmatic way to know if it's too early to call autofit.
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.
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.
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?
Using CheckBoxList filtering changes the filter menu for all columns. I would like to specify CheckBoxList only for certain columns, but that doesn't currently appear to be an easy option.
1) Leave as FilterMenuType "Menu" but implement a custom filter template for the columns I want. That would be the most obvious, but CheckBoxList is not a usable control on its own?
2) Or do the inverse, use FilterMenuType "CheckBoxList" and implement a custom filter template for all the columns where I don't want to use that. Seems like a lot of extra work to manually recreate default filters.
3) I guess I roll my own clone of the CheckBoxList control and use that like #1 on individual columns?
Any chance the CheckBoxList control could be publicly exposed for direct use?
I need to lock the "expand" column in the Grid(Locked=true).
When I scroll horizontally, the first column with the expand/collapse icon scrolls out of view. I would like a way to lock it.
Are there any plans to have the datagrid be both groupable and draggable?
Thanks,
Andy