In addition to more filtering options we would like to have the ability to use custom filter components instead of the built-in ones. For example, through a cell template for the filter row.
Please comment below with how you would like to see this integrate into the data source operations of the grid (for example, should it fire an event where you filter the data you pass to the grid, or should the grid expose some method/interface that you need to use).
Group by the third column - there will be no aggregate info:
<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">
<GroupFooterTemplate>
Count: @context.Count
</GroupFooterTemplate>
</GridColumn>
<GridColumn Field="SomeNavigationProperty.OtherField" />
</GridColumns>
<GridAggregates>
<GridAggregate Field="SomeNavigationProperty.Field1" Aggregate="@GridAggregateType.Count" />
</GridAggregates>
</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 string 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 = "first " + x % 4,
OtherField = "second " + x % 6
}
}
);
}
Grid OnRead .Clear() Issue
With the following component:
@page "/counter"
@using System.Collections.ObjectModel
General grid with its most common features
<TelerikGrid Data="@MyData" Pageable="true" @bind-Page="page" PageSize="5" TotalCount="30" OnRead="@ReadItems" >
<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 {
public List<SampleData> MyData { get; set; } = new List<SampleData>();
//public ObservableCollection<SampleData> MyData { get; set; } = new ObservableCollection<SampleData>();
private int page = 1;
private void ReadItems(GridReadEventArgs args)
{
//MyData = new List<SampleData>(); //OK!
//MyData = new ObservableCollection<SampleData>(); //OK!
MyData.Clear(); //List: No update. ObservableCollection: System.StackOverflowException!
Populate();
StateHasChanged();
}
private void Populate()
{
foreach (var data in Enumerable.Range((page - 1) * 5, 5).Select(x => new SampleData
{
Id = x,
Name = "name " + x,
Team = "team " + x % 5,
HireDate = DateTime.Now.AddDays(-x).Date
}))
{
MyData.Add(data);
}
}
public class SampleData
{
public int Id { get; set; }
public string Name { get; set; }
public string Team { get; set; }
public DateTime HireDate { get; set; }
}
}I see the issues in the comment fields. Changing OnRead to async makes no difference.
The workaround is to assign a new List or ObservableCollection instead of using .Clear()
We would like to see this functionality:
Stacked Header like in https://blazor.syncfusion.com/demos/datagrid/stacked-header?theme=bootstrap4
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
Hi, I'm looking to reproduce visual behavior with the Blazor WASM Gird that we've already standardized on in our implementation of the KendoReact Grid component.
one of the things we're doing that i'm not seeing yet in the Blazor Grid docs is rendering a triple-dot icon in the column header that clicks down to show a custom menu... looking around, the closest thing i see so far is the Blazor Grid support for a "Toolbar" header... that would probably work as a path forward but I wanted to ask if i was missing anything else more similar? or perhaps eventual plans.
or is there any facility to custom render the column header ourselves?
i'm including a screenshot example of what we've settled on so far after several iterations
Thank you! this Blazor wasm direction you're supporting is fantastic =)
row height set in grid definition must apply to all rows in the grid for row virtualization as of now.
in real business case there might be complex content in each row that can't reinforce this - but if each row report its own height, grid still can visualize the load, and it will be much more flexible.
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
}
}
);
}
.png){kind=avatar}
Hello,
I am new to your Blazor UI components. Please provide a link for exporting a grid to excel.
Thanks,
Earl
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.
I want to fetch grid records page per page according to the appropriate filter settings. While this is possible through the OnRead event, I want to be able to send the request to the server so that it is easier to fetch the data, like in the UI for ASP.NET Core grid. Currently you can do this only for a server-side project because you can pass the request object by reference, but for a WASM project it needs to serialize in an HTTP request.
---
ADMIN EDIT
You can find examples of doing this here: https://github.com/telerik/blazor-ui/tree/master/grid/datasourcerequest-on-server
---
@GridEditMode.Incell mode does not update automatically on row change when an editortemplate is used, as below
<GridColumn Field=@nameof(ProjectRankingInfo.Ranking.Option2) Title="@Option2Title" Width="120px" Filterable="false">
<EditorTemplate>
@{
currentItem = context as ProjectRankingInfo.Ranking;
<TelerikNumericTextBox Max="10" Min="0" Step="1" @bind-Value=@currentItem.Option2 />
}
</EditorTemplate>
</GridColumn>
one must click the update button for the update to occur,
Incell works fine and updates on row change for simple grid columns
ADMIN EDIT: SOLUTION: Read the details in the following article: https://docs.telerik.com/blazor-ui/components/grid/editing/incell#notes
ADMIN EDIT: this thread is rather long and I am adding the workaround offered by René here:
<TelerikGrid Data="@GridData" OnUpdate="@UpdateHandler"> ... </TelerikGrid>In GridColumn
-------------------
<EditorTemplate>
@{
var item = context as MyModel;
EditedItem = item;
<TelerikNumericTextBox @bind-Value="@item.Number" OnChange="OnChangeItemHandler">
</Telerik.Blazor.Components.TelerikNumericTextBox>
}
</EditorTemplate>
In Code-Section
----------------------
protected MyModel EditedItem { get; set; }
protected void OnChangeItemHandler()
{
var gridCommandEventArgs = new GridCommandEventArgs
{
Item = EditedItem
};
UpdateHandler(gridCommandEventArgs);
}
protected void UpdateHandler(GridCommandEventArgs args)
{
var myModel = (MyModel)args.Item;
// Save myModel to DB
.....
}
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
}
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,
}
}
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.