Skip to content

Commit 09088aa

Browse files
BrundhaVelusamyBrundhaVelusamy
committed
Merge branch 'hotfix/hotfix-v31.2.2' of https://github.com/syncfusion-content/maui-docs into UG_hotfix
2 parents 36adfd0 + 83dd131 commit 09088aa

File tree

3 files changed

+184
-61
lines changed

3 files changed

+184
-61
lines changed

‎MAUI/ImageEditor/events.md‎

Lines changed: 27 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -19,16 +19,17 @@ This [`ImageLoaded`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.ImageEd
1919

2020
{% highlight xaml tabtitle="MainPage.xaml" %}
2121

22-
<imageEditor:SfImageEditor Source="image.png" ImageLoaded = "OnImageLoaded" />
22+
<imageEditor:SfImageEditor Source="image.png"
23+
ImageLoaded = "OnImageLoaded"/>
2324

2425
{% endhighlight %}
2526

2627
{% highlight C# tabtitle="MainPage.xaml.cs" %}
2728

28-
private void OnImageLoaded(object sender, EventArgs e)
29-
{
30-
this.imageEditor.Rotate();
31-
}
29+
private void OnImageLoaded(object sender, EventArgs e)
30+
{
31+
this.imageEditor.Rotate();
32+
}
3233

3334
{% endhighlight %}
3435

@@ -38,23 +39,23 @@ N> [View sample in GitHub](https://github.com/SyncfusionExamples/maui-image-edit
3839

3940
## Annotations deserialized event
4041

41-
This `AnnotationsDeserialized` event occurs when annotations are deserialized onto the image.
42+
This [AnnotationsDeserialized](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.ImageEditor.SfImageEditor.html#Syncfusion_Maui_ImageEditor_SfImageEditor_AnnotationsDeserialized) event occurs when the annotations are deserialized onto the image.
4243

4344
N> `Serialization` and `deserialization` are not applicable for custom annotation views.
4445

4546
{% tabs %}
4647
{% highlight xaml tabtitle="MainPage.xaml" hl_lines="3" %}
47-
<imageEditor:SfImageEditor x:Name="imageEditor"
48-
Source="image.png"
49-
AnnotationsDeserialized="OnAnnotationsDeserialized"/>
48+
<imageEditor:SfImageEditor x:Name="imageEditor"
49+
Source="image.png"
50+
AnnotationsDeserialized="OnAnnotationsDeserialized"/>
5051

5152
{% endhighlight %}
5253
{% highlight C# tabtitle="MainPage.xaml.cs" %}
5354

54-
private async void OnAnnotationsDeserialized(object? sender, EventArgs e)
55-
{
56-
await DisplayAlert("", "Annotations are deserialized", "Ok");
57-
}
55+
private async void OnAnnotationsDeserialized(object? sender, EventArgs e)
56+
{
57+
await DisplayAlert("", "Annotations are deserialized", "Ok");
58+
}
5859

5960
{% endhighlight %}
6061
{% endtabs %}
@@ -69,19 +70,20 @@ N> This is common for Shape and Text annotations.
6970

7071
{% highlight xaml tabtitle="MainPage.xaml" %}
7172

72-
<imageEditor:SfImageEditor Source="image.png" AnnotationSelected = "OnAnnotationSelected" />
73+
<imageEditor:SfImageEditor Source="image.png"
74+
AnnotationSelected = "OnAnnotationSelected"/>
7375

7476
{% endhighlight %}
7577

7678
{% highlight C# tabtitle="MainPage.xaml.cs" %}
7779

78-
private void OnAnnotationSelected(object sender, AnnotationSelectedEventArgs e)
80+
private void OnAnnotationSelected(object sender, AnnotationSelectedEventArgs e)
81+
{
82+
if (e.AnnotationSettings is ImageEditorShapeSettings shapeSettings)
7983
{
80-
if (e.AnnotationSettings is ImageEditorShapeSettings shapeSettings)
81-
{
82-
shapeSettings.Color = Colors.Black;
83-
}
84+
shapeSettings.Color = Colors.Black;
8485
}
86+
}
8587

8688
{% endhighlight %}
8789

@@ -96,16 +98,17 @@ The [`BrowseImage`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.ImageEdi
9698

9799
{% highlight xaml tabtitle="MainPage.xaml" %}
98100

99-
<imageEditor:SfImageEditor Source="image.png" BrowseImage = "OnImageBrowse" />
101+
<imageEditor:SfImageEditor Source="image.png"
102+
BrowseImage = "OnImageBrowse"/>
100103

101104
{% endhighlight %}
102105

103106
{% highlight C# tabtitle="MainPage.xaml.cs" %}
104107

105-
private void OnImageBrowse(object sender, CancelEventArgs e)
106-
{
107-
e.Cancel = true;
108-
}
108+
private void OnImageBrowse(object sender, CancelEventArgs e)
109+
{
110+
e.Cancel = true;
111+
}
109112

110113
{% endhighlight %}
111114

‎MAUI/Kanban-Board/Sorting.md‎

Lines changed: 106 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,12 @@ keywords: .net maui Kanban sorting, sfKanban sorting in .net maui, .net maui Kan
1212

1313
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:
1414

15-
* `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.
16-
* `SortingOrder` - Used to define the direction of cards sorting within each column.
17-
* `Ascending` - Cards with lower values appear first.
18-
* `Descending` - Cards with higher values appear first.
15+
* [SortingMappingPath](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Kanban.SfKanban.html#Syncfusion_Maui_Kanban_SfKanban_SortingMappingPath) - Used to map the sorting field to a property name in the [KanbanModel](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Kanban.KanbanModel.html) or `CustomModel`. The default value is `string.Empty`, in which case the cards will not be sorted.
16+
* [SortingOrder](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Kanban.SfKanban.html#Syncfusion_Maui_Kanban_SfKanban_SortingOrder) - Used to define the direction of cards sorting within each column.
17+
* [Ascending](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Kanban.KanbanSortingOrder.html#Syncfusion_Maui_Kanban_KanbanSortingOrder_Ascending) - Cards with lower values appear first.
18+
* [Descending](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Kanban.KanbanSortingOrder.html#Syncfusion_Maui_Kanban_KanbanSortingOrder_Descending) - Cards with higher values appear first.
1919

20-
N> The `SortingOrder` property is applicable only when a valid value is assigned to `SortingMappingPath`.
20+
N> The [SortingOrder](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Kanban.SfKanban.html#Syncfusion_Maui_Kanban_SfKanban_SortingOrder) property is applicable only when a valid value is assigned to [SortingMappingPath](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Kanban.SfKanban.html#Syncfusion_Maui_Kanban_SfKanban_SortingMappingPath).
2121

2222
## Customize card order with sorting configuration
2323

@@ -28,34 +28,69 @@ Sorting in the Kanban control can be implemented using the following approaches.
2828

2929
### Custom Field Sorting
3030

31-
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+
To enable custom sorting behavior, a valid property name from the [ItemsSource](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Kanban.SfKanban.html#Syncfusion_Maui_Kanban_SfKanban_ItemsSource) must be mapped using the [SortingMappingPath](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Kanban.SfKanban.html#Syncfusion_Maui_Kanban_SfKanban_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.
3232

3333
This example demonstrates how card positions are updated based on sorting configurations and property mappings.
3434

3535
{% tabs %}
36-
{% highlight XAML hl_lines="3 5" %}
36+
{% highlight XAML hl_lines="2 3 5" %}
3737

38-
<kanban:SfKanban x:Name="kanban"
38+
<kanban:SfKanban x:Name="kanban"
3939
SortingMappingPath="Index"
4040
SortingOrder="Ascending"
4141
ItemsSource="{Binding Cards}"
4242
ColumnMappingPath="Category">
4343
<kanban:SfKanban.CardTemplate>
44-
<DataTemplate >
45-
<Border Stroke="Black" StrokeThickness="1" StrokeShape="RoundRectangle 8" Background="#F3CFCE">
46-
<Grid RowDefinitions="Auto,Auto,Auto" ColumnDefinitions="Auto,*" ColumnSpacing="8" Padding="8">
47-
<HorizontalStackLayout Grid.Row="0" Grid.ColumnSpan="2" Spacing="4" VerticalOptions="Center" HeightRequest="20">
48-
<Label Grid.Row="0" Grid.ColumnSpan="2" Text="{Binding Priority, StringFormat='• {0}'}" FontSize="14" FontAttributes="Bold" TextColor="Orange" VerticalOptions="Center" VerticalTextAlignment="Center" HeightRequest="20"/>
44+
<DataTemplate>
45+
<Border Stroke="Black"
46+
StrokeThickness="1"
47+
StrokeShape="RoundRectangle 8"
48+
Background="#F3CFCE">
49+
<Grid RowDefinitions="Auto,Auto,Auto"
50+
ColumnDefinitions="Auto,*"
51+
ColumnSpacing="8"
52+
Padding="8">
53+
<HorizontalStackLayout Grid.Row="0"
54+
Grid.ColumnSpan="2"
55+
Spacing="4"
56+
VerticalOptions="Center"
57+
HeightRequest="20">
58+
<Label Grid.Row="0"
59+
Grid.ColumnSpan="2"
60+
Text="{Binding Priority, StringFormat='• {0}'}"
61+
FontSize="14"
62+
FontAttributes="Bold"
63+
TextColor="Orange"
64+
VerticalOptions="Center"
65+
VerticalTextAlignment="Center"
66+
HeightRequest="20"/>
4967
</HorizontalStackLayout>
50-
<Label Grid.Row="1" Grid.ColumnSpan="2" Text="{Binding Title}" FontAttributes="Bold" FontSize="14" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" Margin="5"/>
51-
<Label Grid.Row="2" Grid.ColumnSpan="2" Text="{Binding Description}" FontSize="12" HorizontalTextAlignment="Center" LineBreakMode="WordWrap" Margin="5"/>
68+
<Label Grid.Row="1"
69+
Grid.ColumnSpan="2"
70+
Text="{Binding Title}"
71+
FontAttributes="Bold"
72+
FontSize="14"
73+
HorizontalTextAlignment="Center"
74+
VerticalTextAlignment="Center"
75+
Margin="5"/>
76+
<Label Grid.Row="2"
77+
Grid.ColumnSpan="2"
78+
Text="{Binding Description}"
79+
FontSize="12"
80+
HorizontalTextAlignment="Center"
81+
LineBreakMode="WordWrap"
82+
Margin="5"/>
5283
</Grid>
5384
</Border>
5485
</DataTemplate>
5586
</kanban:SfKanban.CardTemplate>
56-
<kanban:KanbanColumn Title="Open" Categories="Open"/>
57-
<kanban:KanbanColumn Title="In Progress" Categories="In Progress"/>
58-
<kanban:KanbanColumn Title="Done" AllowDrag="False" Categories="Done"/>
87+
<kanban:KanbanColumn Title="Open"
88+
Categories="Open"/>
89+
<kanban:KanbanColumn Title="In Progress"
90+
Categories="In Progress"/>
91+
<kanban:KanbanColumn Title="Done"
92+
Categories="Done"
93+
AllowDrag="False"/>
5994
<kanban:SfKanban.BindingContext>
6095
<local:SortingViewModel/>
6196
</kanban:SfKanban.BindingContext>
@@ -107,45 +142,79 @@ public class SortingViewModel
107142
public ObservableCollection<CardDetails> Cards { get; set; }
108143
}
109144

110-
N>
111-
* To apply sorting after a drop operation, handle the `DragEnd` event and explicitly call the `RefreshKanbanColumn` method. This ensures the column updates to reflect the new card order based on the defined sorting logic.
112-
* 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.
113-
114145
{% endhighlight %}
115146
{% endtabs %}
116147

148+
N>
149+
* To apply sorting after a drop operation, handle the [DragEnd](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Kanban.SfKanban.html#Syncfusion_Maui_Kanban_SfKanban_DragEnd) event and explicitly call the [RefreshKanbanColumn](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Kanban.SfKanban.html#Syncfusion_Maui_Kanban_SfKanban_RefreshKanbanColumn) method. This ensures the column updates to reflect the new card order based on the defined sorting logic.
150+
* 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/maui/Syncfusion.Maui.Kanban.SfKanban.html#Syncfusion_Maui_Kanban_SfKanban_CardTemplate) property.
151+
117152
### Index-Based Sorting
118153

119154
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.
120155

121-
N> The `SortingMappingPath` property must be mapped to a valid numeric property name from the `ItemsSource` to enable index-based sorting updates.
156+
N> The [SortingMappingPath](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Kanban.SfKanban.html#Syncfusion_Maui_Kanban_SfKanban_SortingMappingPath) property must be mapped to a valid numeric property name from the [ItemsSource](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Kanban.SfKanban.html#Syncfusion_Maui_Kanban_SfKanban_ItemsSource) to enable index-based sorting updates.
122157

123158
The following code example illustrates how cards numeric property updated using the index-based sorting approach.
124159

125160
{% tabs %}
126-
{% highlight XAML hl_lines="2 3" %}
161+
{% highlight XAML hl_lines="2 3 5" %}
127162

128-
<kanban:SfKanban x:Name="kanban"
163+
<kanban:SfKanban x:Name="kanban"
129164
SortingMappingPath="Index"
130165
SortingOrder="Ascending"
131166
ItemsSource="{Binding Cards}"
132167
ColumnMappingPath="Category">
133168
<kanban:SfKanban.CardTemplate>
134-
<DataTemplate >
135-
<Border Stroke="Black" StrokeThickness="1" StrokeShape="RoundRectangle 8" Background="#F3EADC">
136-
<Grid RowDefinitions="Auto,Auto,Auto" ColumnDefinitions="Auto,*" ColumnSpacing="8" Padding="8">
137-
<HorizontalStackLayout Grid.Row="0" Grid.ColumnSpan="2" Spacing="4" VerticalOptions="Center" HeightRequest="20" HorizontalOptions="End">
138-
<Label Text="{Binding Index, StringFormat='Rank #{0}'}" FontSize="14" FontAttributes="Bold" TextColor="#026B6E" VerticalOptions="Center" VerticalTextAlignment="Center" HeightRequest="20"/>
169+
<DataTemplate>
170+
<Border Stroke="Black"
171+
StrokeThickness="1"
172+
StrokeShape="RoundRectangle 8"
173+
Background="#F3EADC">
174+
<Grid RowDefinitions="Auto,Auto,Auto"
175+
ColumnDefinitions="Auto,*"
176+
ColumnSpacing="8"
177+
Padding="8">
178+
<HorizontalStackLayout Grid.Row="0"
179+
Grid.ColumnSpan="2"
180+
Spacing="4"
181+
VerticalOptions="Center"
182+
HeightRequest="20"
183+
HorizontalOptions="End">
184+
<Label Text="{Binding Index, StringFormat='Rank #{0}'}"
185+
FontSize="14"
186+
FontAttributes="Bold"
187+
TextColor="#026B6E"
188+
VerticalOptions="Center"
189+
VerticalTextAlignment="Center"
190+
HeightRequest="20"/>
139191
</HorizontalStackLayout>
140-
<Label Grid.Row="1" Grid.ColumnSpan="2" Text="{Binding Title}" FontAttributes="Bold" FontSize="14" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" Margin="5"/>
141-
<Label Grid.Row="2" Grid.ColumnSpan="2" Text="{Binding Description}" FontSize="12" HorizontalTextAlignment="Center" LineBreakMode="WordWrap" Margin="5"/>
192+
<Label Grid.Row="1"
193+
Grid.ColumnSpan="2"
194+
Text="{Binding Title}"
195+
FontAttributes="Bold"
196+
FontSize="14"
197+
HorizontalTextAlignment="Center"
198+
VerticalTextAlignment="Center"
199+
Margin="5"/>
200+
<Label Grid.Row="2"
201+
Grid.ColumnSpan="2"
202+
Text="{Binding Description}"
203+
FontSize="12"
204+
HorizontalTextAlignment="Center"
205+
LineBreakMode="WordWrap"
206+
Margin="5"/>
142207
</Grid>
143208
</Border>
144209
</DataTemplate>
145210
</kanban:SfKanban.CardTemplate>
146-
<kanban:KanbanColumn Title="Open" Categories="Open"/>
147-
<kanban:KanbanColumn Title="In Progress" Categories="In Progress"/>
148-
<kanban:KanbanColumn Title="Done" AllowDrag="False" Categories="Done"/>
211+
<kanban:KanbanColumn Title="Open"
212+
Categories="Open"/>
213+
<kanban:KanbanColumn Title="In Progress"
214+
Categories="In Progress"/>
215+
<kanban:KanbanColumn Title="Done"
216+
Categories="Done"
217+
AllowDrag="False"/>
149218
<kanban:SfKanban.BindingContext>
150219
<local:SortingViewModel/>
151220
</kanban:SfKanban.BindingContext>
@@ -202,5 +271,5 @@ public class SortingViewModel
202271
{% endtabs %}
203272

204273
N>
205-
* The Index-based sorting can be achieved at the sample level after a drag-and-drop action. To implement this handle the `DragEnd` 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.
206-
* 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.
274+
* The Index-based sorting can be achieved at the sample level after a drag-and-drop action. To implement this handle the [DragEnd](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Kanban.SfKanban.html#Syncfusion_Maui_Kanban_SfKanban_DragEnd) event, access the items in the target column using [e.TargetColumn.Items](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Kanban.KanbanColumn.html#Syncfusion_Maui_Kanban_KanbanColumn_Items), and update the numeric field used for sorting to maintain a continuous order. Finally, call [RefreshKanbanColumn](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Kanban.SfKanban.html#Syncfusion_Maui_Kanban_SfKanban_RefreshKanbanColumn) method to update the UI with the new order.
275+
* To disable sorting logic, avoid assigning a value to the [SortingMappingPath](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Kanban.SfKanban.html#Syncfusion_Maui_Kanban_SfKanban_SortingMappingPath) property. This ensures that card positions remain static and reflect the order of the [ItemsSource](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Kanban.SfKanban.html#Syncfusion_Maui_Kanban_SfKanban_ItemsSource) collection, making it suitable for scenarios where sorting is not required or is managed externally.

0 commit comments

Comments
 (0)