In the following reproducible, try filtering the third column (SomeNavigationProperty.Field1). It does not work.
<TelerikGrid Data="@myData" Pageable="true" Sortable="true" FilterMode="@GridFilterMode.FilterRow" Groupable="true"><GridColumns>
<GridColumn Field="@nameof(SampleComplexObject.ID)" Title="ID"></GridColumn>
<GridColumn Field="@nameof(SampleComplexObject.Name)" Title="The Name"></GridColumn>
<GridColumn Title="First Nested Property" Field="SomeNavigationProperty.Field1" />
<GridColumn Field="SomeNavigationProperty.OtherField" />
</GridColumns>
</TelerikGrid>
@code {
public class SampleComplexObject
{
public int ID { get; set; }
public string Name { get; set; }
public NestedObject SomeNavigationProperty { get; set; } // use this field name for data binding
}
public class NestedObject
{
public int Field1 { get; set; }
public string OtherField { get; set; }
}
public IEnumerable<SampleComplexObject> myData = Enumerable.Range(1, 50).Select(x =>
new SampleComplexObject
{
ID = x,
Name = "Name " + x,
SomeNavigationProperty = new NestedObject
{
Field1 = x,
OtherField = "second " + x % 6
}
}
);
}
For example, I'd like something like this:
Field Name: record.TotalSales -> Auto-generated column title: "Total Sales" with inserted space
ADMIN EDIT: See also the idea below about "AutoGeneratedTitles" Func<string, string> property where the user could perform whatever processing they liked upon the default value. Please leave your comment on what approach you would prefer to be exposed.
Example Repo - https://github.com/benhysell/BlazorGridPagingIssue
tldr - OnRead args do not contain the correct page after restoring state without manual intervention.
Project Setup
- Base Blazor Client/Server template with Weather Forecasts as the data
- Server has a single OData endpoint to return 50 weather forecasts. Each forecast starts with Temperature 0 and adds 1 per row to allow one to know which page they should be on
- Client has two pages configured, 'Paging NOT Working' and 'Paging Work Around'
Steps to Reproduce
- Navigate to 'Page NOT Working', select a page, i.e. page 5, navigate to the Counter page, navigate back to Page NOT Working.
- Grid will show Page 5 in the page selector, however the data being show in from Page 1
- Looking at Chrome 'Network' tab the OData query to obtain data from the backend does not contain proper offset for Page 5 data
- args.Request.Page reports Page 1, however the state of the Grid was just restored to Page 5
Workaround
I currently have a work around, this can be seen in the other page 'Paging Work Around'.
- On the first call to OnRead I check to see the last Grid state that was stored
- If the arg.GridState.Page does not match, (Stored vs the Request) I update the Request with the proper Page
- Proper OData query is generated to the backend.
Expected Behavior
- After state is restored first call to OnRead() would report the proper Page and make correct OData call.
Looking through the examples I can't find one with SelectionMode="GridSelectionMode.Multiple" and using a RowTemplate.
ADMIN EDIT: This is not a bug in the component, an example of how this can be implemented by the app is available in the comments.
I'm not sure what I should be binding my checkbox to so it accurately reflects selection state.
From the RowTemplate Example adding SelectionMode:
<TelerikGrid Data=@GridData
@bind-SelectedItems="@SelectedItems"
SelectionMode="GridSelectionMode.Multiple" Height="@Height">
<RowTemplate Context="product"> @*Trying to inspect what is generated in the examples I came up with this, but not sure what to bind to checked*@
<td role="gridcell" colspan=0 data-col-index="0">
<span>
<input class="k-checkbox k-grid-checkbox telerik-blazor" type="checkbox" />
</span>
</td><td> <img class="rounded-circle" src="@($"images/{product.ProductId}.jpg")" alt="Alternate Text" /> @product.ProductName </td> <td> @(String.Format("{0:C2}", product.UnitPrice)) </td> </RowTemplate> <GridColumns> <GridColumn Field=@nameof(Product.ProductName) Title="Product Name" /> <GridColumn Field=@nameof(Product.UnitPrice) Title="Unit Price" /> </GridColumns> </TelerikGrid>
Currently I need to define a custom JsonConverter to serialize the state of the grid. I would prefer not to have to do this, however I understand that may just be the way things are for now. Creating this ticket / issue to track if this is ever changed to not being needed.
For now I'll be setting up two serializers, one just for the grids that uses Newtonsoft, and the one I would prefer to use that uses System.Text.Json, https://github.com/Blazored/LocalStorage.
From https://docs.telerik.com/blazor-ui/components/grid/state
// to store the serialized grid state, we need to have a custom serialized // based on Newtonsoft.Json serialization. In the future this may not be required public class FilterDescriptorJsonConverter : JsonConverter {
///rest omitted
}
We are using Grid control with OData source (ToODataString() exstension) and OnRead event. When we try to group by some column, it douesn't work. OData query to API is same and OnRead event fires but grid not grouping.
TelerikGird with virtual scrolling was working in version 2.7, but after upgrading to 2.10, it is only showing placeholders.
When scrolling, it shows the values for a split second, but then those get replaced by the placeholders.
@page "/test"
<TelerikGrid Data=@GridData
SelectionMode="GridSelectionMode.Single"
ScrollMode="GridScrollMode.Virtual"
Height="300px" RowHeight="20">
<GridColumns>
<GridColumn Field=@nameof(Employee.Name) />
<GridColumn Field=@nameof(Employee.Team) Title="Team" />
</GridColumns>
</TelerikGrid>
@code {
public List<Employee> GridData { 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
});
}
}
public class Employee
{
public int EmployeeId { get; set; }
public string Name { get; set; }
public string Team { get; set; }
}
}
Reproducible
<TelerikButton OnClick="@(_ => _Splited = !_Splited)">Toggle columns - works fine</TelerikButton><br />Select a single row to see the error
<TelerikGrid Data="@GridData"
Height="480px" RowHeight="40" PageSize="100" SelectionMode="@GridSelectionMode.Multiple"
Sortable="true" FilterMode="@GridFilterMode.FilterMenu"
SelectedItemsChanged="@((IEnumerable<Order> objectList) => OnSelect(objectList))"
OnRead=@ReadOrders
Pageable="true"
Resizable="true"
TotalCount=@TotalOrders>
<GridColumns>
<GridCheckboxColumn SelectAll="@ShowSelectAll"></GridCheckboxColumn>
<GridColumn Field="@(nameof(Order.Id))" Title="@(nameof(Order.Id))" />
@if (!_Splited)
{
<GridColumn Field="@(nameof(Order.Name))" Title="@(nameof(Order.Name))" />
<GridColumn Field="CreatedAt">
<Template>
@((context as Order).CreatedAt.ToString("dd.MM.yyyy - HH:mm"))
</Template>
</GridColumn>
<GridColumn Field="@(nameof(Order.State))" Title="@(nameof(Order.State))" />
}
else
{
<GridColumn Field="@(nameof(Order.Name))" Title="@(nameof(Order.Name))" />
<GridColumn Field="@(nameof(Order.State))" Title="@(nameof(Order.State))" />
}
</GridColumns>
</TelerikGrid>
@code {
bool ShowSelectAll;
bool _Splited = false;
public int TotalOrders { get; set; } = 1000;
public IEnumerable<Order> GridData { get; set; }
protected override async Task OnInitializedAsync()
{
}
protected async Task OnSelect(IEnumerable<Order> objectList)
{
if (objectList.Count() == 1) // considered as single select, so it goes to SplitView and the list needs to shrink
{
_Splited = true;
}
else // it's in the multi-select mode, so it stays or gets back to the list
{
_Splited = false;
}
}
private async Task<IEnumerable<Order>> LoadData()
{
var OrderData = new List<Order>();
for (int i = 1; i < 1001; i++)
{
OrderData.Add(new Order()
{
Id = Guid.NewGuid(),
Name = $"Order {i}",
CreatedAt = DateTime.Now.AddDays((Convert.ToInt32(new Random().Next(10)))),
State = (OrderState)new Random().Next(0, 2),
});
}
return OrderData.AsEnumerable();
}
protected async Task ReadOrders(GridReadEventArgs args)
{
int pageNo = args.Request.Page;
int pageSize = 100;
var totalData = await LoadData();
GridData = totalData.Skip(pageSize * (pageNo - 1)).Take(pageSize);
}
public class Order
{
public Guid Id { get; set; }
public string Name { get; set; }
public DateTime CreatedAt { get; set; }
public OrderState State { get; set; }
}
public enum OrderState
{
Open,
Canceled,
Closed,
}
}
Reproducible
@page "/"
@inject NavigationManager NavMan
<TelerikGrid Data=@GridDataToShow
SelectionMode="GridSelectionMode.Single"
SelectedItemsChanged="@((IEnumerable<Employee> employeeList) => OnSelect(employeeList))"
Pageable="true"
Height="300px">
<GridColumns>
<GridColumn Field=@nameof(Employee.Name) />
<GridColumn Field=@nameof(Employee.Team) Title="Team" />
</GridColumns>
</TelerikGrid>
@code {
public List<Employee> GridData { get; set; }
public Employee SelectedEmployee { get; set; }
public List<Employee> GridDataToShow // this causes the issue
{
get
{
return GridData.OrderBy(x => x.EmployeeId).ToList();
}
}
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
});
}
}
protected async Task OnSelect(IEnumerable<Employee> employees)
{
Console.WriteLine("aaa");
SelectedEmployee = employees.FirstOrDefault();
// NavMan.NavigateTo("counter");
}
public class Employee
{
public int EmployeeId { get; set; }
public string Name { get; set; }
public string Team { get; set; }
}
}
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.
---
Hi there,
currently the grid component does not provide a feature to set a specific position in virtual scrolling mode.
My team has currently implemented a workaround via javascript interop call to set a specific position. The workaround basically calculates the "scroll value" (we reverse engineered this value by looking at the Telerik js code) and passes it to the jQuery scrollTop() function. This results in an update of the scrollbar which in return triggers the OnReadItems event where we fetch the items based on the given skip and take values.
This workaround does not seem to work in all cases and is somewhat unreliable hence i'm requesting an official feature to set a specific position without the javascript hack.
What do you say?
So lonG
Daniel
Grid with Checkbox Column throws the following error when placed inside EditForm:
InvalidOperationException: Telerik.Blazor.Components.TelerikCheckBox`1[System.Nullable`1[System.Boolean]] requires a value for the 'ValueExpression' ValueExpression is provided automatically when using 'bind-Value'.
The issue can be reproduced using the Filter From Code -> FilterMenu code snippet provided here:
https://docs.telerik.com/blazor-ui/components/grid/filtering#filter-from-code