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
; }
}
}
Data load in background thread with selected row on UI crashing application when there is selection
1. Select a row
2. Click the button
3. check the server console and/or try to do something else
@using System.Collections.ObjectModel
<TelerikGrid @ref="@Grid"
Data="@GridData"
SelectionMode="@GridSelectionMode.Single"
OnRowClick="@OnRowClickHandler"
@bind-SelectedItems="@SelectedData"
EditMode="@GridEditMode.Incell"
Resizable="true"
Width="100%"
Height="200px"
Reorderable="true"
Groupable="false"
ShowColumnMenu="false"
FilterMode="@GridFilterMode.None"
Sortable="true">
<GridColumns>
<GridColumn Field=@nameof(ViewModel.Name) Editable="false">
</GridColumn>
</GridColumns>
</TelerikGrid>
<TelerikButton OnClick="RefreshButtonClick">Refresh</TelerikButton>
@code {
private const int RowHeight = 40;
private const string Height = "700px";
private const int PageSize = 20;
private ObservableCollection<ViewModel> GridData { get; set; } = new ObservableCollection<ViewModel>();
private IEnumerable<ViewModel> SelectedData { get; set; } = Enumerable.Empty<ViewModel>();
private TelerikGrid<ViewModel> Grid { get; set; }
protected override async Task OnInitializedAsync()
{
await LoadData();
await base.OnInitializedAsync();
}
async Task LoadData()
{
var data = Enumerable.Range(1, 5).Select(x => new ViewModel { Name = $"name {x}" });
GridData = new ObservableCollection<ViewModel>(data);
}
private async Task RefreshButtonClick()
{
Console.WriteLine("reload data");
// spawn a new thread, a Timer will do as well
await Task.Run(() =>
{
IEnumerable<ViewModel> data = new List<ViewModel> { new ViewModel { Name = "1" }, new ViewModel { Name = "2" }, new ViewModel { Name = "3" } };
this.GridData.Clear();
this.GridData.AddRange(data);
});
}
private void OnRowClickHandler(GridRowClickEventArgs args)
{
Console.WriteLine("click to select");
ViewModel viewModel = (ViewModel)args.Item;
//this is here because of theincell editing, not relevant to the issue
SelectedData = new List<ViewModel>() { viewModel };
}
public class ViewModel
{
public ViewModel()
{
}
private string name;
public string Name
{
get
{
return name;
}
set
{
name = value;
}
}
}
}
When you zoom out, the span that displays the Grid pager's content has its style set to display: none, and it does not always reappear when you zoom in after that.
Reproduction
1. Run this REPLHere's the reproducible:
@using System.ComponentModel.DataAnnotations
@* Used for the model annotations only *@
<strong>REPRO: activate the validation for the Name field to see the issue - click Save with an empty input</strong>
<TelerikGrid Data=@MyData EditMode="@GridEditMode.Popup" Pageable="true" Height="500px"
OnUpdate="@UpdateHandler" OnDelete="@DeleteHandler" OnCreate="@CreateHandler">
<GridToolBar>
<GridCommandButton Command="Add" Icon="add">Add Employee</GridCommandButton>
</GridToolBar>
<GridColumns>
<GridColumn Field=@nameof(SampleData.ID) Title="ID" Editable="false" />
<GridColumn Field=@nameof(SampleData.Name) Title="Name" />
<GridCommandColumn>
<GridCommandButton Command="Save" Icon="save" ShowInEdit="true">Update</GridCommandButton>
<GridCommandButton Command="Edit" Icon="edit">Edit</GridCommandButton>
<GridCommandButton Command="Delete" Icon="delete">Delete</GridCommandButton>
<GridCommandButton Command="Cancel" Icon="cancel" ShowInEdit="true">Cancel</GridCommandButton>
</GridCommandColumn>
</GridColumns>
</TelerikGrid>
@code {
public class SampleData
{
public int ID { get; set; }
[Required(ErrorMessage = "aa something else")] // the first word is 1 or 2 characters to show the issue
public string Name { get; set; }
}
async Task UpdateHandler(GridCommandEventArgs args)
{
SampleData item = (SampleData)args.Item;
// perform actual data source operations here through your service
// if the grid Data is not tied to the service, you may need to update the local view data too
var index = MyData.FindIndex(i => i.ID == item.ID);
if (index != -1)
{
MyData[index] = item;
}
}
async Task DeleteHandler(GridCommandEventArgs args)
{
SampleData item = (SampleData)args.Item;
// perform actual data source operation here through your service
// if the grid Data is not tied to the service, you may need to update the local view data too
MyData.Remove(item);
}
async Task CreateHandler(GridCommandEventArgs args)
{
SampleData item = (SampleData)args.Item;
// perform actual data source operation here through your service
// if the grid Data is not tied to the service, you may need to update the local view data too
item.ID = MyData.Count + 1;
MyData.Insert(0, item);
}
public List<SampleData> MyData { get; set; }
protected override void OnInitialized()
{
MyData = new List<SampleData>();
for (int i = 0; i < 50; i++)
{
MyData.Add(new SampleData()
{
ID = i,
Name = "Name " + i.ToString()
});
}
}
}
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.
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();
}
}
Reproduceable example: https://blazorrepl.telerik.com/QSEganvg12BVw2ZU37
Steps to reproduce:
If you remove the GridAggregates emtpy render fragment, or put at least one GridAggregate component in it, OnStateInit fires like expected.
In my project, I've created a component that wraps around the TelerikGrid that I use on all my pages, so that I can have many properties and functions set to reasonable defaults for my use case. My component has an option to conditionally include GridAggregate components within the inner TelerikGrid's GridAggregates render fragment based on separate configuration. If no separate configuration is provided, no GridAggregate components are included, and the GridAggregates render fragment is left blank. Since my component is built in razor markup, there isn't a great option for nulling out that render fragment if it's empty. I had no problems with this exact same code in UI for Blazor version 5.1, and I hope this can be fixed.
Reproducible
@using Telerik.Blazor
@using Telerik.Blazor.Components.Grid
<TelerikGrid Data=@GridData
SelectionMode="GridSelectionMode.Multiple"
@bind-SelectedItems="SelectedItems"
Pageable="true"
Height="400px">
<TelerikGridToolBar>
<TelerikGridCommandButton Command="MyDelete" OnClick="DeleteSelectedAsync"
Enabled=@(SelectedItems?.Count() > 0) Icon="delete">Delete</TelerikGridCommandButton>
<TelerikGridCommandButton Enabled="false" OnClick="DeleteSelectedAsync">I must always be disabled</TelerikGridCommandButton>
</TelerikGridToolBar>
<TelerikGridColumns>
<TelerikGridCheckboxColumn />
<TelerikGridColumn Field=@nameof(Employee.Name) />
<TelerikGridColumn Field=@nameof(Employee.Team) Title="Team" />
</TelerikGridColumns>
</TelerikGrid>
@result
@if (SelectedItems != null)
{
<ul>
@foreach (Employee employee in SelectedItems)
{
<li>
@employee.Name
</li>
}
</ul>
}
@code {
void DeleteSelectedAsync()
{
result = $"On {DateTime.Now} there are {SelectedItems?.Count()} items selected";
}
string result;
public List<Employee> GridData { get; set; }
public IEnumerable<Employee> SelectedItems { get; set; }
protected override void OnInitialized()
{
GridData = new List<Employee>();
for (int i = 0; i < 15; i++)
{
GridData.Add(new Employee()
{
EmployeeId = i,
Name = "Employee " + i.ToString(),
Team = "Team " + i % 3
});
}
// select Employee with 3 through 5
SelectedItems = GridData.Skip(2).Take(3).ToList();
}
public class Employee
{
public int EmployeeId { get; set; }
public string Name { get; set; }
public string Team { get; set; }
}
}
When you combine frozen column with row selection and horizontal scrolling is applied (due to column and grid widths), column content are not hidden under frozen columns when a row is selected, as seen bellow in lines 2,3 and 4.
Checkbox, Product Name & Command columns are frozen. "Quantity per Unit" values are clearly visible behind frozen "Product Name" values. You can find a test scenario here (Telerik REPL for Blazor).
All themes suffer from this issue except Fluent theme. With default and bootstrap themes it happens on all odd selected lines and with material theme it happens on all selected lines.
When Grid is nested in a Window, pressing Escape key will bubble to the Window causing it to close during edit operation of the Grid.
Navigable="true" + OnRead data binding allow the user to go beyond the last Grid page. The component shows no rows, and even though the user can return to previous pages, it's cumbersome.
The workaround is to manage the Page value manually in the PageChanged handler.
@using Telerik.DataSource.Extensions
@* workaround: *@
@*Page="@GridPage"
PageChanged="@OnGridPageChanged"*@
<TelerikGrid OnRead="@OnGridRead"
Navigable="true"
TItem="@Product"
Pageable="true">
<GridColumns>
<GridColumn Field="@nameof(Product.Name)" Title="Product Name" />
</GridColumns>
</TelerikGrid>
@code {
List<Product> GridData { get; set; }
int GridPage { get; set; } = 1;
int GridTotal { get; set; }
// workaround
void OnGridPageChanged(int newPage)
{
if (newPage > 0 && newPage <= Math.Ceiling((double)GridTotal / (double)10))
{
GridPage = newPage;
}
}
void OnGridRead(GridReadEventArgs args)
{
var result = GridData.ToDataSourceResult(args.Request);
args.Data = result.Data;
args.Total = result.Total;
// workaround
//GridTotal = result.Total;
}
protected override void OnInitialized()
{
GridData = new List<Product>();
var rnd = new Random();
for (int i = 1; i <= 12; i++)
{
GridData.Add(new Product()
{
Id = i,
Name = "Product " + i.ToString()
});
}
}
public class Product
{
public int Id { get; set; }
public string Name { get; set; }
}
}
Reproducible below, expected results is that after editing the decimal field you'll get the data under the grid. Actual: either it does not get updated, or the value is always 0.
@
using
Telerik.Blazor.Components.Grid
<TelerikGrid Data=@MyData EditMode=
"incell"
Pageable=
"true"
Height=
"500px"
>
<TelerikGridEvents>
<EventsManager OnUpdate=
"@UpdateHandler"
OnEdit=
"@EditHandler"
OnDelete=
"@DeleteHandler"
OnCreate=
"@CreateHandler"
></EventsManager>
</TelerikGridEvents>
<TelerikGridToolBar>
<TelerikGridCommandButton Command=
"Add"
Icon=
"add"
>Add Employee</TelerikGridCommandButton>
</TelerikGridToolBar>
<TelerikGridColumns>
<TelerikGridColumn Field=@nameof(SampleData.ID) Title=
"ID"
Editable=
"false"
/>
<TelerikGridColumn Field=@nameof(SampleData.Name) Title=
"Name"
/>
<TelerikGridColumn Field=@nameof(SampleData.SomeDecimal) Title=
"Some Decimal"
/>
<TelerikGridCommandColumn>
<TelerikGridCommandButton Command=
"Delete"
Icon=
"delete"
>Delete</TelerikGridCommandButton>
<TelerikGridCommandButton Command=
"Save"
Icon=
"save"
ShowInEdit=
"true"
>Update</TelerikGridCommandButton>
</TelerikGridCommandColumn>
</TelerikGridColumns>
</TelerikGrid>
@lastUpdateOnDecimal
@code {
public
void
EditHandler(GridCommandEventArgs args)
{
SampleData item = (SampleData)args.Item;
Console.WriteLine(
"Edit event is fired for column "
+ args.Field);
}
string
lastUpdateOnDecimal;
public
void
UpdateHandler(GridCommandEventArgs args)
{
string
fieldName = args.Field;
object
newVal = args.Value;
//you can cast this, if necessary, according to your model
SampleData item = (SampleData)args.Item;
//you can also use the entire model
//perform actual data source operation here
//if you have a context added through an @inject statement, you could call its SaveChanges() method
//myContext.SaveChanges();
if
(fieldName ==
"SomeDecimal"
)
{
lastUpdateOnDecimal = $
"decimal for {item.ID} updated to {newVal} on {DateTime.Now}"
;
}
var matchingItem = MyData.FirstOrDefault(c => c.ID == item.ID);
if
(matchingItem !=
null
)
{
matchingItem.Name = item.Name;
}
Console.WriteLine(
"Update event is fired for "
+ args.Field +
" with value "
+ args.Value);
}
public
void
CreateHandler(GridCommandEventArgs args)
{
SampleData item = (SampleData)args.Item;
//perform actual data source operation here
item.ID = MyData.Count;
MyData.Add(item);
Console.WriteLine(
"Create event is fired."
);
}
public
void
DeleteHandler(GridCommandEventArgs args)
{
SampleData item = (SampleData)args.Item;
//perform actual data source operation here
//if you have a context added through an @inject statement, you could call its SaveChanges() method
//myContext.SaveChanges();
MyData.Remove(item);
Console.WriteLine(
"Delete event is fired."
);
}
//in a real case, keep the models in dedicated locations, this is just an easy to copy and see example
public
class
SampleData
{
public
int
ID {
get
;
set
; }
public
string
Name {
get
;
set
; }
public
decimal
SomeDecimal {
get
;
set
; }
}
public
List<SampleData> MyData {
get
;
set
; }
protected
override
void
OnInit()
{
MyData =
new
List<SampleData>();
for
(
int
i = 0; i < 50; i++)
{
MyData.Add(
new
SampleData()
{
ID = i,
Name =
"Name "
+ i.ToString(),
SomeDecimal = i
});
}
}
}
In hierarchical Grid with InCell edit the DateTime cells of the child Grid cannot be edited through the calendar popup. Trying to open the DatePicker or DateTimePicker popup of the child Grid automatically closes the edited cell.
If the Grid has no data, selecting null PageSize throws:
Error: System.ArgumentException: Page Size cannot be less than one (Parameter 'PageSize')
---
ADMIN EDIT
---
A possible workaround for the time being will be to use some conditional CSS to disable the PageSize dropdown while there is no data in the Grid: https://blazorrepl.telerik.com/QcOpkTlb38EDFboT34.