I want to fetch grid records page per page according to the appropriate filter settings. While this is possible through the OnRead event, I want to be able to send the request to the server so that it is easier to fetch the data, like in the UI for ASP.NET Core grid. Currently you can do this only for a server-side project because you can pass the request object by reference, but for a WASM project it needs to serialize in an HTTP request.
---
ADMIN EDIT
You can find examples of doing this here: https://github.com/telerik/blazor-ui/tree/master/grid/datasourcerequest-on-server
---
https://docs.telerik.com/blazor-ui/components/grid/editing/incell#notes
I am using an EditorTemplate with a method called ChangeHandler(). After clicking in another row everything works fine but if I leave the cell by pressing enter the UpdateHandler gets called more than two times and comparing args.Item with the GridItem doesn't help because the calls are asynchronous.
=====
Admin Edit
With 2.22.0, the InCell editing mode was revamped to provide better user experience and this alters the way it worked. In the common case, there will no longer be double OnUpdate calls (unless explicit application logic invokes them). With 2.23.0, Tab and Enter keys that bubble from editor templates will be handled by the grid like they are handled for the built-in editors.
This means that this issue is, effectively, solved. You can see the Notes section about editor templates to see how you can also handle the OnBlur event to capture mouse clicks outside of the component so that you can save changes and remove the edited item. See the full notes here (the Event Sequence section was heavily revamped for clarity) and here on editor template behavior.
Thus, the previous ides about Save and Cancel methods on the edit context might not be implemented, which will also be one breaking change that we could avoid:
After discussion with the development team, the proposed resolution is to provide a context that provides Save/Cancel operations. The goal is to provide easier configuration for IncellEditing and EditorTemplates and consistent behavior with mouse and keyboard interaction. However, the change will introduce a breaking change in our EditorTemplate, should be researched further and that is why this is logged as a feature request.
=====
I am editing parent and child records in the hierarchy grid. I can edit parent and child records without issue. The only problem I have now is this; when I click edit on a child record, then collapse the parent, the edit of the child record is lost or cancelled but there is no event I can see to use to put things back in non-edit mode.
I enable buttons and links in non-edit (view) mode and disable them when editing a record.
So, is there an event or some way to know the user is collapsing or expanding a parent record?
Thank you,
An autofit feature would be useful which sizes a column according to fit the current content exactly (with some space on the left and right ;-)
* autofit attribute for a column to automatically autofit the column
* autofit method on a grid column to issue autofit by code
Autofit for entire table (nice to have)
* autofit attribute on the grid element to automatically autofit all its columns (except those explicitely set to AutoFit="false")
* autofit method on a grid to issue autofit by code
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.
Would be helpful to have the feature of copying selected row to the clipboard.
The copy format could be CSV or just tabbed delimiter.
---
ADMIN EDIT
In the meantime, you can consider your own JS-based solution (example StackOverflow thread) and integrate them on a command button in the grid or in the row context menu.
---
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.
Feature Request
Currently, when a grid is rendered with 500 rows in a WASM application and expand/collapse action is initiated, it takes a few seconds to finish grouping and rendering.
Steps to reproduce
1. Create a grid in WASM app.
2. Add 500 rows.
3. Do not enable paging.
4. Group by any field and initiate expand/collapse.
5. All rows are re-rendered which leads to a few seconds delay.
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 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.
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; }
}
}
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!
Horizontal scroll bar is visible, but doesn't move with cursor/current-cell.
---
ADMIN EDIT
Applies also to vertical scrolling with or without row virtualization (e.g., using InCell edit mode, pressing Enter will open the next row for editing, but it will not work out with row virtualization at all after the current viewport, and without virtualization you will not see what's happening until you start typing and the browser calls .scrollIntoView() for the editor)
---