Hello,
in some cases there is no way to scroll grid using mousewheel. Try this REPL please - https://blazorrepl.telerik.com/GdkXuLuX10P8sOF040. Scroll down, focus any cell in the last row and try to scroll up using your mouse wheel again. Grid always scrolls back to the last row.
Can you check that please?
Very thanks.
Miroslav
On Hierarchy grids with Inline edit mode, I noticed that if a row is currently being edited and I try to expand the row to show the child grid an exception is thrown: "Error: System.InvalidOperationException: TelerikValidationComponent requires a cascading parameter of type EditContext. You can use Telerik.Blazor.Components.TelerikValidationTooltip`1[System.String] inside a EditForm or TelerikForm".
The problem stems from a validation tool inside the Grid EditorTemplate.
When PageSize is set to "All" and a new item is added to the grid's data source, the PageSize parameter is not updated, so the new item is sent to a second page. Instead of being added at the top or bottom of the page.
Reproduction
1. Run this REPL
2. Set PageSize to All from the dropdown at the bottom
3. Add a new item from Update Data or Add
4. New Item is added to the second page
5. Video Example
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.
My request is to either add an Id parameter so that we can tie a label to it, or expose the aria-label attribute so that we can directly add label text to the component. Adding both would also be helpful to give users options.
Hi,
when using SetStateAsync(), OnRead is called ok, but loading indicator is not presented as usual.
How to reproduce:
1. button = loading data by SetStateAsync(), no progress indicated.
2. button = loading data throught rebind, is ok
demo is based on https://docs.telerik.com/blazor-ui/components/grid/refresh-data
Expected: same behavior as by button 2. -> Rebind()->OnRead()...loading progress
Thanks
In a navigable Grid with incell edit, if a column has Editable=false the tabbing behavior is as follows: while the user is editing the previous editable cell pressing tab results in skipping the non-editable cell and moving the focus to the next editable cell to open it for edit.
However, the behavior is different when cancelling the editing through the OnEdit event. In this case, while the user is editing the previous editable cell pressing tab results in exiting the edit and keeping the focus to the cell. Subsequent tab press moves to focus to the pager.
Reproduction: https://blazorrepl.telerik.com/mykLFEFJ14mlqei429.
===
ADMIN EDIT
===
A possible option for the time being is to cancel the edit as shown in the example above but also force the Grid to enter edit of the next editable cell. You can do that through the State: Enter and Exit Grid Edit Mode Programmatically.
Here is a basic example, you may adjust it as needed to fit your exact requirements: https://blazorrepl.telerik.com/mSuLPAFP05HRs7B555.
I have a filterable Grid with Enum values. I am saving the state in the OnStateChanged so I can then restore it on future page loads (similar to the approach here).
When trying to restore the deserialized state in the OnStateInit, the Grid throws:
Unhandled exception rendering component: Specified cast is not valid.
Reproduction: https://blazorrepl.telerik.com/QSaiaDkq55RfazF402.
===
ADMIN EDIT
===
At the time of writing (UI for Blazor 6.1.0), the Grid only supports int as an underlying type of the Enum values. When the state is deserialized, the Enum values are returned as short and this causes the issue.
To handle the scenario for the time being you can modify the state object before setting it to the Grid. Loop through the filter descriptors in the state and convert the filter value of the columns bound to Enum, so the value type in the state is the supported int.
Here is a basic example: https://blazorrepl.telerik.com/woaCOZlT29E05lpL45.
The issue targets a Grid with cell selection and DragToSelect feature disabled where at least one column has Visible="false". With this configuration, when using Shift + Click to select multiple cells, the result is a mismatch in the cells that should be selected, after the position where the invisible column is placed.
Video reproduction attached. Reproduction code: https://blazorrepl.telerik.com/GyFuQwPf37H8riAM19.
Currently, when there is a blank or null value, no text is rendered next to the CheckBox in the CheckBoxList filter. I want to be able to customize that and easily set my desired text. For example, "(Blanks)" as in Excel.
The scenario is:
- Grid popup editing
- The model class has no parameterless constructor
- The Grid is using a popup <FormTemplate>
In this case, the Grid should not try to create or clone an edit item on its own. Instead, it should rely on the returned instance from OnModelInit. However, the Grid first fires OnModelInit and then it still tries to clone or create an edit item, which causes an exception.
A possible workaround is to manage the whole edit process manually, similar to the example with ListView popup editing.
I want to reorder the Grid rows the same way I can reorder the columns - via the keyboard.
For reference: Telerik jQuery Grid drag and drop
Description
When clicking a Grid row and the Grid is in GridDataLayoutMode.Stacked mode, the RowClick event fires twice.
Steps To Reproduce
- Run this example: https://blazorrepl.telerik.com/QgkmvDvQ296Ea3Ij28
- Click a row in the Grid
Actual Behavior
The RowClick event fires twice.
Expected Behavior
The RowClick event fires once.
Browser
All
Last working version of Telerik UI for Blazor (if regression)
No response
If the grid has Filterable=true, at the moment, all columns must have a Field defined. If a column does not have a Field, an exception similar to this one will be thrown:
Error: System.ArgumentNullException: Value cannot be null.
Parameter name: name
at System.Type.GetProperty(String name, BindingFlags bindingAttr)
at Telerik.Blazor.Components.Grid.TelerikGridFilterHeaderBase`1.get_PropInfo()
at Telerik.Blazor.Components.Grid.TelerikGridFilterHeaderBase`1.get_PropType()
at Telerik.Blazor.Components.Grid.TelerikGridFilterHeaderBase`1.get_PropTypeName()
at Telerik.Blazor.Components.Grid.TelerikGridFilterHeaderBase`1.ResetFilterText()
at Telerik.Blazor.Components.Grid.TelerikGridFilterHeaderBase`1.OnInit()
at Microsoft.AspNetCore.Components.ComponentBase.RunInitAndSetParametersAsync()
Instead, when no Field is provided, filtering, sorting and other operations that require a model field must be disabled internally without an exception.
For the time being, a workaround is to set Filterable=false to the desired column.
Here is an example where the workaround is highlighted
@using Telerik.Blazor.Components.Grid@using Telerik.Blazor.Components.Button<TelerikGrid data="@Histories" height="600px" Pageable="true" PageSize="20" Sortable="true" Filterable="true"> <TelerikGridColumns> <TelerikGridColumn Field="Casecode" /> <TelerikGridColumn Field="Historytext" /> <TelerikGridColumn Field="Createdate" Title="Create Date" /> <TelerikGridColumn Filterable="false"> <Template> @{ var CurrentRecord = context as CaseHistory; if (CurrentRecord.Blobid > 0) { <TelerikButton OnClick="@(() => MyCustomCommand(CurrentRecord))">Open</TelerikButton> } } </Template> </TelerikGridColumn> </TelerikGridColumns></TelerikGrid>@result@functions { public class CaseHistory { public int Id { get; set; } public int Casecode { get; set; } public string Historytext { get; set; } public DateTime Createdate { get; set; } public int Blobid { get; set; } } IEnumerable<CaseHistory> Histories = Enumerable.Range(1, 50).Select(x => new CaseHistory { Id = x, Casecode = x, Historytext = "text " + x, Createdate = DateTime.Now.AddDays(-x), Blobid = (x % 3 == 0) ? x : -x }); string result { get; set; } void MyCustomCommand(CaseHistory itm) { result = $"custom command fired for {itm.Id} on {DateTime.Now}"; StateHasChanged(); }}
I want to be able to control the page at which the user is in the grid. I will later use that to call my own API through the OnRead event. Binding the Page parameter does not seem to work, however.
Reproducible:
@using Telerik.Blazor.Components.Grid@using Telerik.Blazor.Components.NumericTextBox@using Telerik.DataSource.Extensions;<TelerikNumericTextBox @bind-Value="@startPage"></TelerikNumericTextBox><TelerikGrid Data=@GridData TotalCount=@Total Page="@startPage" Filterable=true Sortable=true Pageable=true EditMode="inline"> <TelerikGridEvents> <EventsManager OnRead=@ReadItems></EventsManager> </TelerikGridEvents> <TelerikGridColumns> <TelerikGridColumn Field=@nameof(Employee.ID) /> <TelerikGridColumn Field=@nameof(Employee.Name) Title="Name" /> <TelerikGridColumn Field=@nameof(Employee.HireDate) Title="Hire Date" /> <TelerikGridCommandColumn> <TelerikGridCommandButton Command="Save" Icon="save" ShowInEdit="true">Update</TelerikGridCommandButton> <TelerikGridCommandButton Command="Edit" Icon="edit">Edit</TelerikGridCommandButton> <TelerikGridCommandButton Command="Delete" Icon="delete">Delete</TelerikGridCommandButton> <TelerikGridCommandButton Command="Cancel" Icon="cancel" ShowInEdit="true">Cancel</TelerikGridCommandButton> </TelerikGridCommandColumn> </TelerikGridColumns> <TelerikGridToolBar> <TelerikGridCommandButton Command="Add" Icon="add">Add Employee</TelerikGridCommandButton> </TelerikGridToolBar></TelerikGrid>There is a deliberate delay in the data source operations in this example to mimic real life delays and to showcase the async nature of the calls.@code { int startPage { get; set; } = 2; public List<Employee> SourceData { get; set; } public List<Employee> GridData { get; set; } public int Total { get; set; } = 0; protected override void OnInit() { SourceData = GenerateData(); } protected async Task ReadItems(GridReadEventArgs args) { Console.WriteLine("data requested: " + args.Request); //you need to update the total and data variables //the ToDataSourceResult() extension method can be used to perform the operations over the full data collection //in a real case, you can call data access layer and remote services here instead, to fetch only the necessary data //await Task.Delay(2000); //simulate network delay from a real async call var datasourceResult = SourceData.ToDataSourceResult(args.Request); GridData = (datasourceResult.Data as IEnumerable<Employee>).ToList(); Total = datasourceResult.Total; StateHasChanged(); } //This sample implements only reading of the data. To add the rest of the CRUD operations see private List<Employee> GenerateData() { var result = new List<Employee>(); var rand = new Random(); for (int i = 0; i < 100; i++) { result.Add(new Employee() { ID = i, Name = "Name " + i, HireDate = DateTime.Now.Date.AddDays(rand.Next(-20, 20)) }); } return result; } public class Employee { public int ID { get; set; } public string Name { get; set; } public DateTime HireDate { get; set; } }}while the similar approach works without OnRead:
@using Telerik.Blazor.Components.Grid@using Telerik.Blazor.Components.NumericTextBox<TelerikNumericTextBox @bind-Value="@startPage" Min="1"></TelerikNumericTextBox><TelerikGrid Data="@MyData" Height="300px" Pageable="true" Sortable="true" Page="@startPage" FilterMode="Telerik.Blazor.FilterMode.FilterRow"> <TelerikGridColumns> <TelerikGridColumn Field="@(nameof(SampleData.Id))" /> <TelerikGridColumn Field="@(nameof(SampleData.Name))" Title="Employee Name" /> <TelerikGridColumn Field="@(nameof(SampleData.HireDate))" Title="Hire Date" /> </TelerikGridColumns></TelerikGrid>@code { int startPage { get; set; } = 2; public IEnumerable<SampleData> MyData = Enumerable.Range(1, 50).Select(x => new SampleData { Id = x, Name = "name " + x, HireDate = DateTime.Now.AddDays(-x) }); public class SampleData { public int Id { get; set; } public string Name { get; set; } public DateTime HireDate { get; set; } }}