Until version 6.0 it was possible to set the Grid PageSize to "All" by setting it to the total item count. This workaround no longer works.
Please enhance the API to allow setting an "All" page size with code or initially.
Could there be an option to NOT close the filter dropdown when the clear button is pressed? Is there an AutoClose parameter or something else?
I just got a request for this, and their thought is they will have a filter set, then want to click clear, and then still pick new items to filter before leaving the dropdown.I want to compare special characters (such as umlauts) to other user input.
We want frozen columns exactly like this:
When the page is printed, the Grid is extended down onto multiple sheets of paper. This is because the Grid is large. The issue I am having is that the column headers are not repeating on each printed page. This makes the grid very hard to read. Is there a setting that can force the column headers to print on each printed page?
=====ADMIN EDIT=====
Reference: Repeated Table Headers Kendo jQuery.
For Excel export, this depends on: https://feedback.telerik.com/document-processing/1356293-print-titles.
For PDF export, this depends on: https://feedback.telerik.com/blazor/1434269-export-grid-to-pdf.
I want to add a custom sort comparer but I don't want to perform the whole sorting manually through the OnRead event.
Please allow adding custom expressions that will be applied to the query that the DataSource package does for easier customizations of the data operations.
I am using Telerik Grid in our project and I have enabled the feature Reorderable="true". At GridColumnMenuSettings I am getting the following options:
Set column position :
Those options are commonly showing for all columns but I want to disable "Move Next" option for the last column and "Move Previous" option for the first column as these options are not applicable to the corresponding columns.
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.