Skip to content

Commit 57a3704

Browse files
sanjayvikramsf4373sanjayvikramsf4373
committed
991373- Added UG content for WPF sorting feature.
1 parent 4c44a6e commit 57a3704

File tree

1 file changed

+294
-0
lines changed

1 file changed

+294
-0
lines changed

‎wpf/Kanban-Board/Sorting.md‎

Lines changed: 294 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,294 @@
1+
---
2+
layout: post
3+
title: Sorting in .NET WPF Kanban Board control | SfKanban | wpf | Syncfusion
4+
description: Learn here all about Sorting support in Syncfusion<sup>®</sup> Essential Studio .NET WPF Kanban Board (SfKanban) control and more.
5+
platform: wpf
6+
control: SfKanban
7+
documentation: ug
8+
---
9+
10+
# Card Item Sorting in .NET WPF Kanban (SfKanban)
11+
12+
The Kanban control supports customizable card sorting within columns based on specific data fields such as `Priority`, `DueDate`, or `Status`. Sorting can be configured programmatically and updated dynamically at runtime using the following properties:
13+
14+
* `SortingMappingPath` - Used to map the sorting field to a property name in the `KanbanModel` or `CustomModel`. The default value is `string.Empty`, in which case the cards will not be sorted.
15+
* `SortingOrder` - Used to define the direction of cards sorting within each column.
16+
* `Ascending` - Cards with lower values appear first.
17+
* `Descending` - Cards with higher values appear first.
18+
19+
N> The `SortingOrder` property is applicable only when a valid value is assigned to `SortingMappingPath`.
20+
21+
## Customize card order with sorting configuration
22+
23+
Sorting in the Kanban control can be implemented using the following approaches.
24+
25+
* Custom
26+
* Index
27+
28+
### Custom Field Sorting
29+
30+
To enable custom sorting behavior, a valid property name from the `ItemsSource` must be mapped using the `SortingMappingPath` property. This mapping ensures that cards are loaded and repositioned based on the corresponding property value, allowing consistent sorting during both initialization and drag-and-drop operations.
31+
32+
This example demonstrates how card positions are updated based on sorting configurations and property mappings.
33+
34+
{% tabs %}
35+
{% highlight XAML hl_lines="2 3 5" %}
36+
37+
<kanban:SfKanban x:Name="kanban"
38+
SortingMappingPath="Priority"
39+
SortingOrder="Ascending"
40+
ItemsSource="{Binding Cards}"
41+
ColumnMappingPath="Category">
42+
<kanban:SfKanban.CardTemplate>
43+
<DataTemplate>
44+
<Border Background="#F3CFCE"
45+
BorderBrush="Black"
46+
BorderThickness="1"
47+
CornerRadius="8"
48+
Padding="8">
49+
<Grid>
50+
<Grid.RowDefinitions>
51+
<RowDefinition Height="Auto"/>
52+
<RowDefinition Height="Auto"/>
53+
<RowDefinition Height="Auto"/>
54+
</Grid.RowDefinitions>
55+
<Grid.ColumnDefinitions>
56+
<ColumnDefinition Width="Auto"/>
57+
<ColumnDefinition Width="*"/>
58+
</Grid.ColumnDefinitions>
59+
<StackPanel Grid.Row="0"
60+
Grid.ColumnSpan="2"
61+
Orientation="Horizontal"
62+
VerticalAlignment="Center"
63+
Height="20">
64+
<TextBlock Text="•"
65+
FontSize="14"
66+
FontWeight="Bold"
67+
Foreground="Orange"
68+
VerticalAlignment="Center"
69+
HorizontalAlignment="Center" />
70+
<TextBlock Text="{Binding Priority}"
71+
FontSize="14"
72+
FontWeight="Bold"
73+
Foreground="Orange"
74+
VerticalAlignment="Center"
75+
HorizontalAlignment="Left"
76+
Height="20" />
77+
</StackPanel>
78+
<TextBlock Grid.Row="1"
79+
Grid.ColumnSpan="2"
80+
Text="{Binding Title}"
81+
FontWeight="Bold"
82+
FontSize="14"
83+
HorizontalAlignment="Center"
84+
VerticalAlignment="Center"
85+
Margin="5" />
86+
<TextBlock Grid.Row="2"
87+
Grid.ColumnSpan="2"
88+
Text="{Binding Description}"
89+
FontSize="12"
90+
TextWrapping="Wrap"
91+
HorizontalAlignment="Center"
92+
VerticalAlignment="Center"
93+
Margin="5" />
94+
</Grid>
95+
</Border>
96+
</DataTemplate>
97+
</kanban:SfKanban.CardTemplate>
98+
<kanban:KanbanColumn Title="Open"
99+
Categories="Open"/>
100+
<kanban:KanbanColumn Title="In Progress"
101+
Categories="In Progress"/>
102+
<kanban:KanbanColumn Title="Done"
103+
AllowDrag="False"
104+
Categories="Done"/>
105+
<kanban:SfKanban.DataContext>
106+
<local:SortingViewModel/>
107+
</kanban:SfKanban.DataContext>
108+
</kanban:SfKanban>
109+
110+
{% endhighlight %}
111+
{% highlight C# hl_lines="2 6" %}
112+
113+
this.kanban.ItemsSource = new SortingViewModel().Cards;
114+
this.kanban.CardDragEnd += OnKanbanCardDragEnd;
115+
116+
private void OnKanbanCardDragEnd(object sender, KanbanDragEndEventArgs e)
117+
{
118+
this.kanban.RefreshKanbanColumn(e.TargetKey.ToString());
119+
}
120+
121+
{% endhighlight %}
122+
{% highlight c# tabtitle="CardDetails.cs" %}
123+
124+
public class CardDetails
125+
{
126+
public string Title { get; set; }
127+
public string Description { get; set; }
128+
public string Priority { get; set; }
129+
public string Category { get; set; }
130+
}
131+
132+
{% endhighlight %}
133+
{% highlight c# tabtitle="SortingViewModel.cs" %}
134+
135+
public class SortingViewModel
136+
{
137+
public SortingViewModel()
138+
{
139+
this.Cards = new ObservableCollection<CardDetails>()
140+
{
141+
new CardDetails() { Title = "Task - 1", Priority = "Medium", Category = "Open", Description = "Fix the issue reported in the Edge browser." },
142+
new CardDetails() { Title = "Task - 3", Priority = "Low", Category = "In Progress", Description = "Analyze the new requirements gathered from the customer." },
143+
new CardDetails() { Title = "Task - 4", Priority = "Critical", Category = "Open", Description = "Arrange a web meeting with the customer to get new requirements." },
144+
new CardDetails() { Title = "Task - 2", Priority = "High", Category = "In Progress", Description = "Test the application in the Edge browser." },
145+
new CardDetails() { Title = "Task - 5", Priority = "Medium", Category = "Done", Description = "Enhance editing functionality." },
146+
new CardDetails() { Title = "Task - 8", Priority = "Medium", Category = "In Progress", Description = "Improve application performance." },
147+
new CardDetails() { Title = "Task - 9", Priority = "Medium", Category = "Done", Description = "Improve the performance of the editing functionality." },
148+
new CardDetails() { Title = "Task - 10", Priority = "High", Category = "Open", Description = "Analyze grid control." },
149+
new CardDetails() { Title = "Task - 12", Priority = "Low", Category = "Done", Description = "Analyze stored procedures." }
150+
};
151+
}
152+
153+
public ObservableCollection<CardDetails> Cards { get; set; }
154+
}
155+
156+
N>
157+
* To apply sorting after a drop operation, handle the `CardDragEnd` event and explicitly call the `RefreshKanbanColumn` method. This ensures the column updates to reflect the new card order based on the defined sorting logic.
158+
* When using a custom data model, the default card UI is not applicable. To render the card content, you must define a custom `DataTemplate` using the `CardTemplate` property.
159+
160+
{% endhighlight %}
161+
{% endtabs %}
162+
163+
### Index-Based Sorting
164+
165+
The index-based approach in the Kanban control allows cards to be dropped at precise positions within a column. Upon dropping, the card's index is updated based on the index of the previous card. Additionally, the index of the next card is incremented relative to the drop position to maintain continuous ordering.
166+
167+
N> The `SortingMappingPath` property must be mapped to a valid numeric property name from the `ItemsSource` to enable index-based sorting updates.
168+
169+
The following code example illustrates how cards numeric property updated using the index-based sorting approach.
170+
171+
{% tabs %}
172+
{% highlight XAML hl_lines="2 3" %}
173+
174+
<kanban:SfKanban x:Name="kanban"
175+
SortingMappingPath="Index"
176+
SortingOrder="Ascending"
177+
ItemsSource="{Binding Cards}"
178+
ColumnMappingPath="Category">
179+
<kanban:SfKanban.CardTemplate>
180+
<DataTemplate>
181+
<Border Background="#F3EADC"
182+
BorderBrush="Black"
183+
BorderThickness="1"
184+
CornerRadius="8"
185+
Padding="8">
186+
<Grid>
187+
<Grid.RowDefinitions>
188+
<RowDefinition Height="Auto" />
189+
<RowDefinition Height="Auto" />
190+
<RowDefinition Height="Auto" />
191+
</Grid.RowDefinitions>
192+
<Grid.ColumnDefinitions>
193+
<ColumnDefinition Width="Auto" />
194+
<ColumnDefinition Width="*" />
195+
</Grid.ColumnDefinitions>
196+
<StackPanel Grid.Row="0"
197+
Grid.ColumnSpan="2"
198+
Orientation="Horizontal"
199+
VerticalAlignment="Center"
200+
HorizontalAlignment="Right" >
201+
<TextBlock Text="Rank #"
202+
FontSize="14"
203+
FontWeight="Bold"
204+
Foreground="#026B6E"
205+
VerticalAlignment="Center"
206+
HorizontalAlignment="Center" />
207+
<TextBlock Text="{Binding Index}"
208+
FontSize="14"
209+
FontWeight="Bold"
210+
Foreground="#026B6E"
211+
VerticalAlignment="Center"
212+
HorizontalAlignment="Center" />
213+
</StackPanel>
214+
<TextBlock Grid.Row="1"
215+
Grid.ColumnSpan="2"
216+
Text="{Binding Title}"
217+
FontWeight="Bold"
218+
FontSize="14"
219+
HorizontalAlignment="Center"
220+
VerticalAlignment="Center"
221+
Margin="5" />
222+
<TextBlock Grid.Row="2"
223+
Grid.ColumnSpan="2"
224+
Text="{Binding Description}"
225+
FontSize="12"
226+
TextWrapping="Wrap"
227+
HorizontalAlignment="Center"
228+
VerticalAlignment="Center"
229+
Margin="5" />
230+
</Grid>
231+
</Border>
232+
</DataTemplate>
233+
</kanban:SfKanban.CardTemplate>
234+
<kanban:KanbanColumn Title="Open" Categories="Open"/>
235+
<kanban:KanbanColumn Title="In Progress" Categories="In Progress"/>
236+
<kanban:KanbanColumn Title="Done" AllowDrag="False" Categories="Done"/>
237+
<kanban:SfKanban.DataContext>
238+
<local:SortingViewModel/>
239+
</kanban:SfKanban.DataContext>
240+
</kanban:SfKanban>
241+
242+
{% endhighlight %}
243+
{% highlight C# hl_lines="2 6 7" %}
244+
245+
this.kanban.ItemsSource = new SortingViewModel().Cards;
246+
this.kanban.CardDragEnd += OnKanbanCardDragEnd;
247+
248+
private void OnKanbanCardDragEnd(object sender, KanbanDragEndEventArgs e)
249+
{
250+
this.ApplySortingWithoutPositionChange(e);
251+
this.kanban.RefreshKanbanColumn(e.TargetKey.ToString());
252+
}
253+
254+
{% endhighlight %}
255+
{% highlight c# tabtitle="CardDetails.cs" %}
256+
257+
public class CardDetails
258+
{
259+
public string Title { get; set; }
260+
public string Description { get; set; }
261+
public int Index { get; set; }
262+
public string Category { get; set; }
263+
}
264+
265+
{% endhighlight %}
266+
{% highlight c# tabtitle="SortingViewModel.cs" %}
267+
268+
public class SortingViewModel
269+
{
270+
public SortingViewModel()
271+
{
272+
this.Cards = new ObservableCollection<CardDetails>()
273+
{
274+
new CardDetails() { Title = "Task - 1", Index = 5, Category = "Open", Description = "Fix the issue reported in the Edge browser." },
275+
new CardDetails() { Title = "Task - 3", Index = 9, Category = "In Progress", Description = "Analyze the new requirements gathered from the customer." },
276+
new CardDetails() { Title = "Task - 4", Index = 2, Category = "Open", Description = "Arrange a web meeting with the customer to get new requirements." },
277+
new CardDetails() { Title = "Task - 2", Index = 1, Category = "In Progress", Description = "Test the application in the Edge browser." },
278+
new CardDetails() { Title = "Task - 5", Index = 8, Category = "Done", Description = "Enhance editing functionality." },
279+
new CardDetails() { Title = "Task - 8", Index = 3, Category = "In Progress", Description = "Improve application performance." },
280+
new CardDetails() { Title = "Task - 9", Index = 6, Category = "Done", Description = "Improve the performance of the editing functionality." },
281+
new CardDetails() { Title = "Task - 10", Index = 4, Category = "Open", Description = "Analyze grid control." },
282+
new CardDetails() { Title = "Task - 12", Index = 7, Category = "Done", Description = "Analyze stored procedures." }
283+
};
284+
}
285+
286+
public ObservableCollection<CardDetails> Cards { get; set; }
287+
}
288+
289+
{% endhighlight %}
290+
{% endtabs %}
291+
292+
N>
293+
* The Index-based sorting can be achieved at the sample level after a drag-and-drop action. To implement this handle the `CardDragEnd` event, access the items in the target column using `e.TargetColumn.Items`, and update the numeric field used for sorting to maintain a continuous order. Finally, call `RefreshKanbanColumn` method to update the UI with the new order.
294+
* To disable sorting logic, avoid assigning a value to the `SortingMappingPath` property. This ensures that card positions remain static and reflect the order of the `ItemsSource` collection, making it suitable for scenarios where sorting is not required or is managed externally.

0 commit comments

Comments
 (0)