Greetings,
When using single selection mode, a row can be selected either by clicking the checkbox or by clicking on the rest of the row. There is no difference at all. Now, let's say I have a grid with multiple selection mode enabled, e.g.:
<TelerikGrid Data="listOfFoos" SelectionMode="GridSelectionMode.Multiple">
<GridColumns>
<GridCheckboxColumn SelectAll="true" SelectAllMode="GridSelectAllMode.All" />
<GridColumn Field="@nameof(Foo.Name)" Title="Name" />
</GridColumns>
</TelerikGrid>
public class Foo {
public string Name { get; set; }
}
public List<Foo> listOfFoos = [ new Foo{Name="First"}, new Foo{Name="Second"}, new Foo{Name="Third"} ];
When we click an unselected row, the behavior varies depending on where we click exactly:
This notably makes multiple selection impossible if we click on the row but not on the checkbox and gives the impression we are using single selection mode. It is especially strange if we consider the existence of the CheckBoxOnlySelection parameter of <GridCheckboxColumn> whose name suggests we can select using the rest of the row by default.
I have a TelerikGrid with Reordarable enabled inside of a TelerikWindow. Reordering of the column works fine only the drop clue is not showing. I think this is because the z-index is incorrect.
Missing drop clue:
z-index of drop clue is 10000:
z-index of window is 10002:
Consider this test page: https://blazorrepl.telerik.com/cSEQOTQY53LRL4je36
This happens only when using a column menu - ShowColumnMenu="true".
===
A possible workaround is to use a FilterButtonsTemplate and clear the filters programmatically if the filter descriptor is empty:
@using Telerik.DataSource
@using Telerik.DataSource.Extensions
<TelerikGrid TItem="@Employee"
OnRead="@OnReadHandler"
Pageable="true"
FilterMode="@GridFilterMode.FilterMenu"
FilterMenuType="@FilterMenuType.CheckBoxList"
ShowColumnMenu="true"
Height="400px">
<GridColumns>
<GridColumn Field="@(nameof(Employee.EmployeeId))" Filterable="false" />
<GridColumn Field="@nameof(Employee.Name)">
<FilterMenuTemplate Context="context">
<TelerikCheckBoxListFilter Data="@NameOptions"
Field="@(nameof(NameFilterOption.Name))"
@bind-FilterDescriptor="@context.FilterDescriptor">
</TelerikCheckBoxListFilter>
</FilterMenuTemplate>
<FilterMenuButtonsTemplate Context="filterContext">
<TelerikButton OnClick="@( async () => await ApplyFilterAsync(filterContext) )"
ThemeColor="primary">Filter</TelerikButton>
<TelerikButton OnClick="@( async () => await ClearFilterAsync(filterContext) )">Clear</TelerikButton>
</FilterMenuButtonsTemplate>
</GridColumn>
<GridColumn Field="@nameof(Employee.Team)" Title="Team">
<FilterMenuTemplate Context="context">
<TelerikCheckBoxListFilter Data="@TeamsList"
Field="@(nameof(TeamNameFilterOption.Team))"
@bind-FilterDescriptor="@context.FilterDescriptor">
</TelerikCheckBoxListFilter>
</FilterMenuTemplate>
</GridColumn>
<GridColumn Field="@nameof(Employee.IsOnLeave)" Title="On Vacation" />
</GridColumns>
</TelerikGrid>
@code {
List<Employee> AllGridData { get; set; }
#region custom-filter-data
List<TeamNameFilterOption> TeamsList { get; set; }
List<NameFilterOption> NameOptions { get; set; }
private async Task ApplyFilterAsync(FilterMenuTemplateContext filterContext)
{
var hasFilters = filterContext.FilterDescriptor.FilterDescriptors.OfType<FilterDescriptor>().Any(x => !string.IsNullOrEmpty(x.Value.ToString()));
if (hasFilters)
{
await filterContext.FilterAsync();
}
else
{
await filterContext.ClearFilterAsync();
}
}
private async Task ClearFilterAsync(FilterMenuTemplateContext filterContext)
{
await filterContext.ClearFilterAsync();
}
//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()
{
AllGridData = new List<Employee>();
var rand = new Random();
for (int i = 1; i <= 15; i++)
{
AllGridData.Add(new Employee()
{
EmployeeId = i,
Name = "Employee " + i.ToString(),
Team = "Team " + i % 3,
IsOnLeave = i % 2 == 0
});
}
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; }
}
}
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 noticed a different behavior when filtering programmatically through the state and when you use the filter UI.
When filtering programmatically the filter is set after the data arrives. I am using a FiltterMenu and the filter icon is colored to indicate there is an applied filter only after the data is filtered. When filtering from the menu, I can the opposite behavior - the filter is set first and then the data is filtered. To me, this seems to be the correct behavior.
Reproduction: https://blazorrepl.telerik.com/wSavwTPd367WqA9r37.
The Grid is supposed to show a loading animation when it detects a data operation that requires more than 600ms to complete. However, if this operation is triggered programmatically through the state and not through the UI, the loading indicator is not shown.
Reproduction: https://blazorrepl.telerik.com/mSuPQpvx498wHvV816.
===
ADMIN EDIT
===
A possible workaround for the time being is to use a LoaderContainer component when invoking programmatic data operation similar to how the initial loader is shown here: https://demos.telerik.com/blazor-ui/grid/loading-animation.
There is a change in the Grid behavior from version 4.6.0 to 5.0.0.
Consider the following REPL test page: https://blazorrepl.telerik.com/cSabmRPy306iPiXK18
Clicking on a Grid cell for editing will not open it for editing if there is already an open cell in edit mode on the same table row. The issue is reproduced more easily if the OnUpdate handler is empty or not defined at all.
This used to work in version 4.6.0.
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.
It seems that the issue appeared after upgrading to Telerik 5.0 from 4.6.
When using a Grid with a locked column and column virtualization enabled, focusing cell from that locked column breaks the layout on horizontal scrolling.
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.
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