I know that I can bind the PageSize property to a variable, but then I have to build a dropdown with the available page sizes in a separate control. Are there plans to integrate a page size selection into the existing paging controls? Perhaps a PageSizes property that takes an array of integers.
Example:
PageSizes = "[10, 25, 50, 100]"
These would then be converted into a dropdown integrated into the existing paging controls on the grid.
.png){kind=avatar}
ADMIN EDIT: The issue stems from the data operations in the business logic, and it is not a bug in the component and it does not relate to WebAPI usage.
Hi there,
as a follow-up of https://feedback.telerik.com/blazor/1461176-set-specific-position-in-virtual-scrolling-mode we have implemented the suggested skip handling. But there seems an issue when the data is fetched asynchronously, specifically from an Web API.
After hours of debugging and analyzing i have narrowed it down to the following simple Blazor app showcasing the bug:
https://github.com/ViRuSTriNiTy/blazor-app-telerik-grid-skip-bug
Please clone the repo, start the application and follow the steps displayed above the grid to reproduce the bug.
The second skip followed immediatelly after the first one originates from the Telerik assembly hence i cannot investigate it further (no source code).
What are your thoughts? Is it a bug?
So lonG
Daniel
ADMIN EDIT: Please review this thread and add your comments so we can get the community feedback on this. We have attached to this opener post a small sample that shows how to achieve this with a few lines of code, and a short video of that behavior.
Hello Team;
The Grid Popup is a great feature, but my understanding is that the Popup form ONLY shows properties that are assigned as columns to the Grid.
If true, this poses some restrictions for us. Many times we might show ONLY small # of columns in Grid, however the form requires MORE properties during ADD or UPDATE.
Is it possible that we can use two ViewModels, one for the Grid columns with less properties and one with more properties for ADD & UPDATE?
Note: If this FR is considered, perhaps we can have separate ViewModel for Update and ADD, as sometimes, ADD might require more properties to be added than later be updated.
This feature will save a lot of time to build apps that have many tables and we have to create CRUD operations
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; }
}
}