Skip to content

Commit 72ea0f6

Browse files
KerubananthanGanesanKerubananthanGanesan
committed
987993-[WinUI Kanban] Sorting example code alignment changes
1 parent 015716e commit 72ea0f6

File tree

1 file changed

+108
-44
lines changed

1 file changed

+108
-44
lines changed

‎winui/Kanban/sorting.md‎

Lines changed: 108 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ To enable custom sorting behavior, a valid property name from the [ItemsSource](
3232
This example demonstrates how card positions are updated based on sorting configurations and property mappings.
3333

3434
{% tabs %}
35-
{% highlight XAML hl_lines="3 5" %}
35+
{% highlight XAML hl_lines="2 3 5" %}
3636

3737
<kanban:SfKanban x:Name="kanban"
3838
SortingMappingPath="Priority"
@@ -41,35 +41,68 @@ This example demonstrates how card positions are updated based on sorting config
4141
ColumnMappingPath="Category">
4242
<kanban:SfKanban.CardTemplate>
4343
<DataTemplate>
44-
<Border Background="#F3CFCE" BorderBrush="Black" BorderThickness="1" CornerRadius="8" Padding="8">
44+
<Border Background="#F3CFCE"
45+
BorderBrush="Black"
46+
BorderThickness="1"
47+
CornerRadius="8"
48+
Padding="8">
4549
<Grid ColumnSpacing="8">
4650
<Grid.RowDefinitions>
47-
<RowDefinition Height="Auto" />
48-
<RowDefinition Height="Auto" />
49-
<RowDefinition Height="Auto" />
51+
<RowDefinition Height="Auto"/>
52+
<RowDefinition Height="Auto"/>
53+
<RowDefinition Height="Auto"/>
5054
</Grid.RowDefinitions>
5155
<Grid.ColumnDefinitions>
52-
<ColumnDefinition Width="Auto" />
53-
<ColumnDefinition Width="*" />
56+
<ColumnDefinition Width="Auto"/>
57+
<ColumnDefinition Width="*"/>
5458
</Grid.ColumnDefinitions>
55-
<StackPanel Grid.Row="0" Grid.ColumnSpan="2" Orientation="Horizontal"
56-
Spacing="4" VerticalAlignment="Center" Height="20">
57-
<TextBlock Text="•" FontSize="14" FontWeight="Bold" Foreground="Orange"
58-
VerticalAlignment="Center" HorizontalAlignment="Center" />
59-
<TextBlock Text="{Binding Priority}" FontSize="14" FontWeight="Bold" Foreground="Orange"
60-
VerticalAlignment="Center" HorizontalAlignment="Left" Height="20" />
59+
<StackPanel Grid.Row="0"
60+
Grid.ColumnSpan="2"
61+
Orientation="Horizontal"
62+
Spacing="4"
63+
VerticalAlignment="Center"
64+
Height="20">
65+
<TextBlock Text="•"
66+
FontSize="14"
67+
FontWeight="Bold"
68+
Foreground="Orange"
69+
VerticalAlignment="Center"
70+
HorizontalAlignment="Center" />
71+
<TextBlock Text="{Binding Priority}"
72+
FontSize="14"
73+
FontWeight="Bold"
74+
Foreground="Orange"
75+
VerticalAlignment="Center"
76+
HorizontalAlignment="Left"
77+
Height="20"/>
6178
</StackPanel>
62-
<TextBlock Grid.Row="1" Grid.ColumnSpan="2" Text="{Binding Title}" FontWeight="Bold"
63-
FontSize="14" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="5" />
64-
<TextBlock Grid.Row="2" Grid.ColumnSpan="2" Text="{Binding Description}" FontSize="12"
65-
TextWrapping="WrapWholeWords" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="5" />
79+
<TextBlock Grid.Row="1"
80+
Grid.ColumnSpan="2"
81+
Text="{Binding Title}"
82+
FontWeight="Bold"
83+
FontSize="14"
84+
HorizontalAlignment="Center"
85+
VerticalAlignment="Center"
86+
Margin="5"/>
87+
<TextBlock Grid.Row="2"
88+
Grid.ColumnSpan="2"
89+
Text="{Binding Description}"
90+
FontSize="12"
91+
TextWrapping="WrapWholeWords"
92+
HorizontalAlignment="Center"
93+
VerticalAlignment="Center"
94+
Margin="5"/>
6695
</Grid>
6796
</Border>
6897
</DataTemplate>
6998
</kanban:SfKanban.CardTemplate>
70-
<kanban:KanbanColumn HeaderText="Open" Categories="Open"/>
71-
<kanban:KanbanColumn HeaderText="In Progress" Categories="In Progress"/>
72-
<kanban:KanbanColumn HeaderText="Done" AllowDrag="False" Categories="Done"/>
99+
<kanban:KanbanColumn HeaderText="Open"
100+
Categories="Open"/>
101+
<kanban:KanbanColumn HeaderText="In Progress"
102+
Categories="In Progress"/>
103+
<kanban:KanbanColumn HeaderText="Done"
104+
Categories="Done"
105+
AllowDrag="False"/>
73106
<kanban:SfKanban.DataContext>
74107
<local:SortingViewModel/>
75108
</kanban:SfKanban.DataContext>
@@ -121,13 +154,13 @@ public class SortingViewModel
121154
public ObservableCollection<CardDetails> Cards { get; set; }
122155
}
123156

157+
{% endhighlight %}
158+
{% endtabs %}
159+
124160
N>
125161
* To apply sorting after a drop operation, handle the [CardDrop](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Kanban.SfKanban.html#Syncfusion_UI_Xaml_Kanban_SfKanban_CardDrop) event and explicitly call the [RefreshKanbanColumn](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Kanban.SfKanban.html#Syncfusion_UI_Xaml_Kanban_SfKanban_RefreshKanbanColumn_System_String_) method. This ensures the column updates to reflect the new card order based on the defined sorting logic.
126162
* 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](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Kanban.SfKanban.html#Syncfusion_UI_Xaml_Kanban_SfKanban_CardTemplate) property.
127163

128-
{% endhighlight %}
129-
{% endtabs %}
130-
131164
### Index-Based Sorting
132165

133166
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.
@@ -137,7 +170,7 @@ N> The [SortingMappingPath](https://help.syncfusion.com/cr/winui/Syncfusion.UI.X
137170
The following code example illustrates how cards numeric property updated using the index-based sorting approach.
138171

139172
{% tabs %}
140-
{% highlight XAML hl_lines="2 3" %}
173+
{% highlight XAML hl_lines="2 3 5" %}
141174

142175
<kanban:SfKanban x:Name="kanban"
143176
SortingMappingPath="Index"
@@ -146,35 +179,66 @@ The following code example illustrates how cards numeric property updated using
146179
ColumnMappingPath="Category">
147180
<kanban:SfKanban.CardTemplate>
148181
<DataTemplate>
149-
<Border Background="#F3EADC" BorderBrush="Black" BorderThickness="1" CornerRadius="8" Padding="8">
182+
<Border Background="#F3EADC"
183+
BorderBrush="Black"
184+
BorderThickness="1"
185+
CornerRadius="8"
186+
Padding="8">
150187
<Grid ColumnSpacing="8">
151188
<Grid.RowDefinitions>
152-
<RowDefinition Height="Auto" />
153-
<RowDefinition Height="Auto" />
154-
<RowDefinition Height="Auto" />
189+
<RowDefinition Height="Auto"/>
190+
<RowDefinition Height="Auto"/>
191+
<RowDefinition Height="Auto"/>
155192
</Grid.RowDefinitions>
156193
<Grid.ColumnDefinitions>
157-
<ColumnDefinition Width="Auto" />
158-
<ColumnDefinition Width="*" />
194+
<ColumnDefinition Width="Auto"/>
195+
<ColumnDefinition Width="*"/>
159196
</Grid.ColumnDefinitions>
160-
<StackPanel Grid.Row="0" Grid.ColumnSpan="2" Orientation="Horizontal"
161-
VerticalAlignment="Center" HorizontalAlignment="Right" >
162-
<TextBlock Text="Rank #" FontSize="14" FontWeight="Bold" Foreground="#026B6E"
163-
VerticalAlignment="Center" HorizontalAlignment="Center" />
164-
<TextBlock Text="{Binding Index}" FontSize="14" FontWeight="Bold" Foreground="#026B6E"
165-
VerticalAlignment="Center" HorizontalAlignment="Center" />
197+
<StackPanel Grid.Row="0"
198+
Grid.ColumnSpan="2"
199+
Orientation="Horizontal"
200+
VerticalAlignment="Center"
201+
HorizontalAlignment="Right">
202+
<TextBlock Text="Rank #"
203+
FontSize="14"
204+
FontWeight="Bold"
205+
Foreground="#026B6E"
206+
VerticalAlignment="Center"
207+
HorizontalAlignment="Center"/>
208+
<TextBlock Text="{Binding Index}"
209+
FontSize="14"
210+
FontWeight="Bold"
211+
Foreground="#026B6E"
212+
VerticalAlignment="Center"
213+
HorizontalAlignment="Center"/>
166214
</StackPanel>
167-
<TextBlock Grid.Row="1" Grid.ColumnSpan="2" Text="{Binding Title}" FontWeight="Bold"
168-
FontSize="14" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="5" />
169-
<TextBlock Grid.Row="2" Grid.ColumnSpan="2" Text="{Binding Description}" FontSize="12"
170-
TextWrapping="WrapWholeWords" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="5" />
215+
<TextBlock Grid.Row="1"
216+
Grid.ColumnSpan="2"
217+
Text="{Binding Title}"
218+
FontWeight="Bold"
219+
FontSize="14"
220+
HorizontalAlignment="Center"
221+
VerticalAlignment="Center"
222+
Margin="5"/>
223+
<TextBlock Grid.Row="2"
224+
Grid.ColumnSpan="2"
225+
Text="{Binding Description}"
226+
FontSize="12"
227+
TextWrapping="WrapWholeWords"
228+
HorizontalAlignment="Center"
229+
VerticalAlignment="Center"
230+
Margin="5"/>
171231
</Grid>
172232
</Border>
173233
</DataTemplate>
174234
</kanban:SfKanban.CardTemplate>
175-
<kanban:KanbanColumn HeaderText="Open" Categories="Open"/>
176-
<kanban:KanbanColumn HeaderText="In Progress" Categories="In Progress"/>
177-
<kanban:KanbanColumn HeaderText="Done" AllowDrag="False" Categories="Done"/>
235+
<kanban:KanbanColumn HeaderText="Open"
236+
Categories="Open"/>
237+
<kanban:KanbanColumn HeaderText="In Progress"
238+
Categories="In Progress"/>
239+
<kanban:KanbanColumn HeaderText="Done"
240+
Categories="Done"
241+
AllowDrag="False"/>
178242
<kanban:SfKanban.DataContext>
179243
<local:SortingViewModel/>
180244
</kanban:SfKanban.DataContext>
@@ -232,4 +296,4 @@ public class SortingViewModel
232296

233297
N>
234298
* The Index-based sorting can be achieved at the sample level after a drag-and-drop action. To implement this handle the [CardDrop](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Kanban.SfKanban.html#Syncfusion_UI_Xaml_Kanban_SfKanban_CardDrop) 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](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Kanban.SfKanban.html#Syncfusion_UI_Xaml_Kanban_SfKanban_RefreshKanbanColumn_System_String_) method to update the UI with the new order.
235-
* To disable sorting logic, avoid assigning a value to the [SortingMappingPath](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Kanban.SfKanban.html#Syncfusion_UI_Xaml_Kanban_SfKanban_SortingMappingPath) property. This ensures that card positions remain static and reflect the order of the [ItemsSource](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Kanban.SfKanban.html#Syncfusion_UI_Xaml_Kanban_SfKanban_ItemsSource) collection, making it suitable for scenarios where sorting is not required or is managed externally.
299+
* To disable sorting logic, avoid assigning a value to the [SortingMappingPath](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Kanban.SfKanban.html#Syncfusion_UI_Xaml_Kanban_SfKanban_SortingMappingPath) property. This ensures that card positions remain static and reflect the order of the [ItemsSource](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Kanban.SfKanban.html#Syncfusion_UI_Xaml_Kanban_SfKanban_ItemsSource) collection, making it suitable for scenarios where sorting is not required or is managed externally.

0 commit comments

Comments
 (0)