Skip to content

Commit 4648fb0

Browse files
kendo-botKB Botxristianstefanov
authored
Added new kb article grid-custom-grouping-order (#2352)
* Added new kb article grid-custom-grouping-order * kb(Grid): apply fixes as per comments --------- Co-authored-by: KB Bot <kb-bot@telerik.com> Co-authored-by: Hristian Stefanov <Hristian.Stefanov@progress.com>
1 parent 4b6b3ad commit 4648fb0

File tree

1 file changed

+172
-0
lines changed

1 file changed

+172
-0
lines changed

‎knowledge-base/grid-custom-grouping-order.md

Lines changed: 172 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,172 @@
1+
---
2+
title: Custom Grouping Order in Grid for Blazor
3+
description: Learn how to sort the groups and implement custom grouping order in the Telerik Grid for Blazor.
4+
type: how-to
5+
page_title: Implementing Custom Grouping Order in Blazor Grid
6+
slug: grid-custom-grouping-order
7+
tags: grid, blazor, custom, grouping, order, sorting
8+
res_type: kb
9+
ticketid: 1661227
10+
---
11+
12+
## Environment
13+
<table>
14+
<tbody>
15+
<tr>
16+
<td>Product</td>
17+
<td>Grid for Blazor</td>
18+
</tr>
19+
</tbody>
20+
</table>
21+
22+
## Description
23+
24+
I want to group data programmatically in the Telerik Grid for Blazor by one column. The group order must match a specific sequence rather than the default ascending or descending order. I need to sort groups in a custom way, based on a predefined order of the data, or a custom pattern.
25+
26+
This KB article answers the following questions:
27+
- How can I apply custom sorting to groups in the Grid for Blazor?
28+
- What is the approach to sort Grid groups in a non-standard order?
29+
- Can I define a custom sequence for grouped data in the Grid for Blazor?
30+
31+
## Solution
32+
33+
To achieve custom grouping order in the Telerik Grid for Blazor, follow these steps:
34+
35+
1. Bind the Grid with the `OnRead` event to handle data operations manually. Refer to the official documentation for [`OnRead`]({%slug common-features-data-binding-onread%}) and [Grouping with `OnRead`]({%slug components/grid/manual-operations%}#grouping-with-onread)
36+
37+
2. Instead of using the `ToDataSourceResult()` method, group the data with custom code. Each group must be represented by an `AggregateFunctionsGroup` object. To understand the Grid's expectations, inspect the `datasourceResult` variable structure and content with a debugger, as shown in [Grouping with `OnRead`]({%slug components/grid/manual-operations%}#grouping-with-onread).
38+
39+
3. Implement custom sorting logic for grouped data based on your specific order requirements (e.g., D, A, C, B) within the `OnRead` method.
40+
41+
4. To display multiple property names and values in group headers, consider using the `GroupHeaderTemplate`.
42+
43+
5. (Optionally) Disable the Grid's `Groupable` setting to hide the group panel if you want to prevent users from modifying the grouping state.
44+
45+
````CSHTML
46+
@using Telerik.Blazor.Components
47+
@using System.Collections.ObjectModel
48+
@using Telerik.DataSource.Extensions
49+
@using Telerik.DataSource
50+
51+
<h1>Custom sort of grouping on a column</h1>
52+
53+
<TelerikGrid OnRead="@ReadTexts"
54+
TItem="GridDataModel"
55+
OnStateInit="@((GridStateEventArgs<GridDataModel> args) => OnGridStateInit(args))"
56+
Groupable="true"
57+
Class="my-grid">
58+
<GridColumns>
59+
<GridColumn Title="String 1" Field="@nameof(GridDataModel.S1)" />
60+
<GridColumn Title="String 2" Field="@nameof(GridDataModel.S2)" />
61+
<GridColumn Title="String 3" Field="@nameof(GridDataModel.S3)" />
62+
<GridColumn Title="String 4" Field="@nameof(GridDataModel.S4)" />
63+
<GridColumn Title="String 5" Field="@nameof(GridDataModel.S5)" />
64+
</GridColumns>
65+
</TelerikGrid>
66+
67+
@code {
68+
private ObservableCollection<GridDataModel> GridData = new ObservableCollection<GridDataModel>();
69+
70+
protected override void OnInitialized()
71+
{
72+
base.OnInitialized();
73+
74+
GridData = new ObservableCollection<GridDataModel>
75+
{
76+
new(5, "Text D", "Text 5-2", "Text 5-3", "Text 5-4", "Text 5-5"),
77+
new(1, "Text A", "Text 1-2", "Text 1-3", "Text 1-4", "Text 1-5"),
78+
new(3, "Text C", "Text 3-2", "Text 3-3", "Text 3-4", "Text 3-5"),
79+
new(4, "Text C", "Text 4-2", "Text 4-3", "Text 4-4", "Text 4-5"),
80+
new(2, "Text B", "Text 2-2", "Text 2-3", "Text 2-4", "Text 2-5"),
81+
};
82+
}
83+
84+
protected async Task ReadTexts(GridReadEventArgs args)
85+
{
86+
var datasourceResult = GridData.ToDataSourceResult(args.Request);
87+
88+
// Determine if the data is grouped
89+
if (args.Request.Groups.Any())
90+
{
91+
// Data is grouped, so we need to handle AggregateFunctionsGroup objects
92+
var groups = datasourceResult.Data.Cast<AggregateFunctionsGroup>().ToList();
93+
94+
// Custom sort logic for grouped data based on your custom order: D, A, C, B
95+
List<string> customOrder = new List<string> { "Text D", "Text A", "Text C", "Text B" };
96+
groups = groups.OrderBy(group => customOrder.IndexOf(group.Key.ToString())).ToList();
97+
98+
args.Data = groups.Cast<object>().ToList();
99+
}
100+
else
101+
{
102+
// Data is not grouped, so we can cast directly to GridDataModel
103+
var orderedData = datasourceResult.Data.Cast<GridDataModel>()
104+
.OrderBy(Text => GetCustomOrderIndex(Text.S1))
105+
.ToList();
106+
107+
args.Data = orderedData.Cast<object>().ToList();
108+
}
109+
110+
args.Total = datasourceResult.Total;
111+
args.AggregateResults = datasourceResult.AggregateResults;
112+
}
113+
114+
private int GetCustomOrderIndex(string? value)
115+
{
116+
// Define the custom order
117+
List<string> customOrder = new List<string> { "Text D", "Text A", "Text C", "Text B" };
118+
119+
// Return the index based on the custom order
120+
return customOrder.IndexOf(value ?? string.Empty);
121+
}
122+
123+
protected void OnGridStateInit(GridStateEventArgs<GridDataModel> args)
124+
{
125+
GridState<GridDataModel> desiredState = new GridState<GridDataModel>()
126+
{
127+
GroupDescriptors = new List<GroupDescriptor>()
128+
{
129+
new GroupDescriptor()
130+
{
131+
Member = nameof(GridDataModel.S1),
132+
MemberType = typeof(string),
133+
}
134+
}
135+
};
136+
args.GridState = desiredState;
137+
}
138+
139+
public class GridDataModel
140+
{
141+
public int Id { get; init; }
142+
public string? S1 { get; set; }
143+
public string? S2 { get; set; }
144+
public string? S3 { get; set; }
145+
public string? S4 { get; set; }
146+
public string? S5 { get; set; }
147+
148+
public GridDataModel()
149+
{
150+
// Editable Telerik components require a parameterless constructor.
151+
}
152+
153+
public GridDataModel(
154+
int id,
155+
string s1, string s2, string s3, string s4, string s5)
156+
{
157+
Id = id;
158+
S1 = s1;
159+
S2 = s2;
160+
S3 = s3;
161+
S4 = s4;
162+
S5 = s5;
163+
}
164+
}
165+
}
166+
````
167+
168+
## See Also
169+
170+
- [OnRead Data Binding](https://docs.telerik.com/blazor-ui/common-features/data-binding/onread)
171+
- [Manual Operations - Grouping with OnRead](https://docs.telerik.com/blazor-ui/components/grid/manual-operations#grouping-with-onread)
172+
- [AggregateFunctionsGroup Class](https://docs.telerik.com/blazor-ui/api/Telerik.DataSource.AggregateFunctionsGroup)

0 commit comments

Comments
 (0)