Currently, when navigation is used with virtual columns and locked columns, clicking on a cell, scrolls the cell to the center. The behavior was designed to have consistent interaction with either mouse, or keyboard. However, for mouse interaction such scrolling and changing the cell position according to the mouse cursor is not intuitive.
This bug report will target the scenario with mouse click for cells that are not overlapped by locked columns - they will not be scrolled to the center.
column virtualization is a great feature for wide table - and we would like to use keyboard navigation with it.
can both be supported together?
thanks
wei
*** Thread created by admin on behalf of this customer ***
When the Grid/TreeList is in incell edit mode and you finish editing a cell by pressing "Enter", the focus is lost if the next cell to be edited is not editable.
Steps to reproduce:
@using System.ComponentModel.DataAnnotations;
<TelerikGrid Data="@forecasts"
Height="550px"
FilterMode="@GridFilterMode.FilterMenu"
Sortable="true"
Pageable="true"
PageSize="20"
Groupable="true" Resizable="true"
Reorderable="true"
EditMode="@GridEditMode.Incell">
<GridColumns>
<GridColumn Field="Id" Title="Id" Width="100px" Editable="false" Groupable="false" />
<GridColumn Field="Summary" Id="summary" Title="telerik bind-Value">
<Template>
@{
var model = context as WeatherForecast;
<span>@model.Summary</span>
}
</Template>
<EditorTemplate>
@{
var model = context as WeatherForecast;
if (model.CanEdit)
{
<TelerikTextBox @bind-Value="@model.Summary"></TelerikTextBox>
}
else
{
@model.Summary
}
}
</EditorTemplate>
</GridColumn>
</GridColumns>
</TelerikGrid>
@code {
List<WeatherForecast> forecasts { get; set; }
protected override void OnInitialized()
{
forecasts = WeatherForecast.GetForecastList();
}
public class WeatherForecast
{
public int Id { get; set; }
public string Summary { get; set; }
public bool CanEdit { get; set; }
static public List<WeatherForecast> GetForecastList()
{
var rng = new Random();
return Enumerable.Range(1, 150).Select(index => new WeatherForecast
{
Id = index,
Summary = Summaries[rng.Next(Summaries.Length)],
CanEdit = index % 3 != 0
}).ToList();
}
private static readonly string[] Summaries = new[]
{
"Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching"
};
}
}
The focus is lost
The focus should not be lost
All
All
x.y.z
x.y.z
It would be nice if it was possible to have a grid and have already in a cell the value of 1 and somebody want's to add 4 to it he doesn't have to calculate but could just type 1+4 and the answer (5) would be saved to the grid.
We often have grid data with a widely varying quantity of cell content from row to row. We usually present this with constant row height initially to have as much row overview as possible at a glance.
Grabbing the row divider line and individually make it larger or even double click on it to fit the size would be very useful for users.
Hi,
Is it possible to drag grid row to another page on the same grid?
thanks,
Irina
Using the following code to allow the user to select rows in the grid
<GridCheckboxColumn SelectAll="true" Locked="true" />
When using the Grid Export to Excel, there is no facility for the export to only use the rows selected by the user
<GridExport>
<GridExcelExport FileName="Export File" AllPages="@ExportAllPages" />
</GridExport>
The documentation for the GridToolBar here describes Add, but ExcelExport is also seen in the demos: https://docs.telerik.com/blazor-ui/components/grid/toolbar#built-in-commands
I imagine there are other built-in commands that are valid in the GridToolBar as well.
I would like to be able to do something like
<GridCommandColumn>
@{
context as MyModel;
if(context.ShowButton)
{
<GridCommandButton>Todo</GridCommandButton>
}
}
</GridCommandColumn>
---
ADMIN EDIT
See the thread below for a way to implement this right now with your own buttons in a "regular" column and the grid state.
---
When you set widths to some columns in the grid, the rest of the columns stretch to accommodate the rest of the width. Thus, the row drag column can stretch and become unexpectedly wide. A screenshot of the problem is attached.
Perhaps the GridRowDraggableSettings could have a parameter for the width of the draggable column.
<AdminEdit>
As a workaround you can use some CSS to set a width for the Drag column:
<style>
.custom-row-draggable-col-width.k-grid .k-drag-col {
width: 100px;
}
</style>
<TelerikGrid Data="@MyData" Height="400px"
Class="custom-row-draggable-col-width"
Pageable="true"
Resizable="true"
Reorderable="true"
RowDraggable="true"
OnRowDrop="@((GridRowDropEventArgs<SampleData> args) => OnRowDropHandler(args))">
<GridSettings>
<GridRowDraggableSettings DragClueField="@nameof(SampleData.Name)"></GridRowDraggableSettings>
</GridSettings>
<GridColumns>
<GridColumn Field="@(nameof(SampleData.Id))" Width="120px" />
<GridColumn Field="@(nameof(SampleData.Name))" Title="Employee Name" Groupable="false" />
<GridColumn Field="@(nameof(SampleData.Team))" Title="Team" />
<GridColumn Field="@(nameof(SampleData.HireDate))" Title="Hire Date" />
</GridColumns>
</TelerikGrid>
@code {
private void OnRowDropHandler(GridRowDropEventArgs<SampleData> args)
{
//The data manipulations in this example are to showcase a basic scenario.
//In your application you should implement them as per the needs of the project.
MyData.Remove(args.Item);
var destinationItemIndex = MyData.IndexOf(args.DestinationItem);
if (args.DropPosition == GridRowDropPosition.After)
{
destinationItemIndex++;
}
MyData.Insert(destinationItemIndex, args.Item);
}
public List<SampleData> MyData = Enumerable.Range(1, 30).Select(x => new SampleData
{
Id = x,
Name = "name " + x,
Team = "team " + x % 5,
HireDate = DateTime.Now.AddDays(-x).Date
}).ToList();
public class SampleData
{
public int Id { get; set; }
public string Name { get; set; }
public string Team { get; set; }
public DateTime HireDate { get; set; }
}
}
</AdminEdit>
how to use Multiple Column Header in grid?
thanks
I would like the grid to behave like Excel for editing, and so I am using the InCell editing mode. I would like that pressing Tab would open the next cell in the row instead of moving the focus to the next focusable element.
---
ADMIN EDIT
The feature is rather complex and we want to make sure it is done right. To this end, we have postponed its implementation for the year 2021 instead of the November 2020 release. When a concrete release is known, this page will be updated. To get notifications for that, click the Follow button.
---
The new functionality to have the in-cell editing validate based on the model doesn't work with fluid validation. We use a custom component that integrates fluid validation with blazor which works fine for all controls including telerik input controls, but the built in validation for the grid editing doesn't seem to work with it.
Also there seems to be a bug with the validation using standard attribute validation. If the row you are working on has an existing record that does not validation properly, the in-cell editing will stop working once you go in to any cell and make a change. The edit mode on that cell will close as if everything updated ok, but after that, you will not be able to click into any cell to edit. While normally the data should already be valid, there can be scenarios where new validation rules are applied and existing records would become retroactively invalid.
Thanks,
Alan
I am having problems with grouping in TelerikGrid.
When I drag the column into the header for grouping, I get an error ArgumentNullException: Value cannot be null, apparently, somewhere in TelerikGrid.SetProcessedGroups.
Test code:@page "/test"
<div>
<TelerikGrid @ref="grid" Data="@GridData" @bind-Page="Page" PageSize="PageSize"
Pageable="true" Sortable="true" Groupable="true"
FilterMode="Telerik.Blazor.GridFilterMode.FilterMenu"
ShowColumnMenu="true"
TotalCount="@TotalRowCount"
SelectionMode="GridSelectionMode.Single"
OnRead=@ReadData>
<GridAggregates>
<GridAggregate Field=@nameof(TestData.Name) Aggregate="@GridAggregateType.Count" />
<GridAggregate Field=@nameof(TestData.Surname) Aggregate="@GridAggregateType.Count" />
<GridAggregate Field=@nameof(TestData.Department) Aggregate="@GridAggregateType.Count" />
</GridAggregates>
<GridColumns>
<GridColumn Field="@(nameof(TestData.Name))" FieldType="typeof(string)" Editable="false" Groupable="true" ShowColumnMenu="false" />
<GridColumn Field="@(nameof(TestData.Surname))" FieldType="typeof(string)" Editable="false" Groupable="true" ShowColumnMenu="false" />
<GridColumn Field="@(nameof(TestData.Department))" FieldType="typeof(string)" Editable="false" Groupable="true" ShowColumnMenu="false" />
<GridCommandColumn Width="60px" Lockable="false" ShowColumnMenu="true">
<GridCommandButton Command="View" Icon="information" ShowInEdit="false" OnClick="@ViewItem"></GridCommandButton>
</GridCommandColumn>
</GridColumns>
</TelerikGrid>
</div>
@code {
protected TelerikGrid<TestData> grid;
protected List<TestData> GridData { get; set; }
public int TotalRowCount { get; set; } = 0;
public int Page { get; set; } = 1;
public int PageSize { get; set; } = 10;
protected async Task ReadData(GridReadEventArgs args)
{
await LoadData();
}
protected async Task LoadData()
{
GridData = await GetSampleData();
TotalRowCount = 100;
}
protected async Task<List<TestData>> GetSampleData()
{
List<TestData> results = new List<TestData>();
results.Add(new TestData { Name = "Name1", Surname = "Surname1", Department = "Department1" });
results.Add(new TestData { Name = "Name2", Surname = "Surname2", Department = "Department1" });
results.Add(new TestData { Name = "Name3", Surname = "Surname3", Department = "Department1" });
results.Add(new TestData { Name = "Name4", Surname = "Surname4", Department = "Department1" });
results.Add(new TestData { Name = "Name5", Surname = "Surname5", Department = "Department2" });
results.Add(new TestData { Name = "Name6", Surname = "Surname6", Department = "Department2" });
results.Add(new TestData { Name = "Name7", Surname = "Surname7", Department = "Department2" });
results.Add(new TestData { Name = "Name8", Surname = "Surname8", Department = "Department3" });
results.Add(new TestData { Name = "Name9", Surname = "Surname9", Department = "Department3" });
results.Add(new TestData { Name = "Name10", Surname = "Surname10", Department = "Department4" });
await Task.Delay(1000); //simulate loading delay ...
return results;
}
protected void ViewItem(GridCommandEventArgs args)
{
//navigate to edit view ...
}
public class TestData
{
public string Name { get; set; }
public string Surname { get; set; }
public string Department { get; set; }
}
}
I am getting the following error:
This happens in Chrome and Edge, in Webassembly and Server-side blazor.
Am I doing something wrong?
Thanks for the help!