977013-[Dev] MAUI Kanban UG document updated regarding custom mapping feature #3556

VishalOmprasad · 2025-08-21T15:58:47Z

Description

MAUI Kanban UG document updated regarding custom mapping feature.

For Cards and Column, separate PRs raised
Cards - #3574
Column - #3575

SyncfusionBuild · 2025-08-21T15:59:43Z

Build Status: INPROGRESS 🔃
Build Location: Kanban-UG-changes-dev

SyncfusionBuild · 2025-08-21T16:07:14Z

CI Status: SUCCESS ✅
Source Compilation: SUCCESS ✅
Build Location: Kanban-UG-changes-dev
Technical Error(s): 0
Spelling Error(s): 0
Image Alt Text Error(s): 0
Image Size Error(s): 0
Image Name Error(s): 0
Front matter Error(s): 0
File Path Error(s): 0
CodeSnippet File Path Missing Error(s): 0
Toc Anchor Tags Validation Error(s): 0
MD Tag Validation Error(s): 0

SyncfusionBuild · 2025-08-22T02:55:13Z

Build Status: INPROGRESS 🔃
Build Location: Kanban-UG-changes-dev

SyncfusionBuild · 2025-08-22T02:56:52Z

CI Status: SUCCESS ✅
Source Compilation: SUCCESS ✅
Build Location: Kanban-UG-changes-dev
Technical Error(s): 0
Spelling Error(s): 0
Image Alt Text Error(s): 0
Image Size Error(s): 0
Image Name Error(s): 0
Front matter Error(s): 0
File Path Error(s): 0
CodeSnippet File Path Missing Error(s): 0
Toc Anchor Tags Validation Error(s): 0
MD Tag Validation Error(s): 0

Karthickmani97 · 2025-08-25T17:40:32Z

MAUI/Kanban-Board/Cards.md

+{% endtabs %}
+
+N> When using a custom model as the [`ItemsSource`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Kanban.SfKanban.html#Syncfusion_Maui_Kanban_SfKanban_ItemsSource), the binding context for each card is set to an instance of that custom model. This means that all data bindings within the [`CardTemplate`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Kanban.SfKanban.html#Syncfusion_Maui_Kanban_SfKanban_CardTemplate) should reference the properties of your custom model directly.


Use below content

When a custom data model is assigned to the ItemsSource property of the SfKanban control, each card's BindingContext is set to an instance of that model. Therefore, bindings within the CardTemplate must directly reference the properties defined in the custom model.

The default card UI is not applicable when using a custom model. To render the card content correctly, you must define a custom DataTemplate using the CardTemplate property.

Move these changes to here - https://github.com/syncfusion-content/maui-docs/pull/3556/files#diff-32936bde17a7640f7a2f8e8c0d257094b7678e882ac0b7fd34111546624f1e74R22

Changed to below content.

Karthickmani97 · 2025-08-25T17:44:09Z

MAUI/Kanban-Board/Cards.md

+{% endtabs %}
+
+N> When using a custom model as the [`ItemsSource`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Kanban.SfKanban.html#Syncfusion_Maui_Kanban_SfKanban_ItemsSource), the binding context for each card is set to an instance of that custom model. This means that all data bindings within the [`CardTemplate`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Kanban.SfKanban.html#Syncfusion_Maui_Kanban_SfKanban_CardTemplate) should reference the properties of your custom model directly.


Use below content:

When using a custom model, the default card UI is not applied. You must define a custom DataTemplate via the CardTemplate property to render the card content.

Changed the content as specified and raised new PR #3574.

Reverted the changes in this PR.

Karthickmani97 · 2025-08-25T17:45:07Z

MAUI/Kanban-Board/Column.md

@@ -277,3 +277,353 @@ kanban.Columns.Add(todoColumn);
 {% endhighlight %}

 {% endtabs %}
+
+## Appearance Customization


Customize column appearance

The .NET MAUI Kanban control allows you to customize the column's background, no card template UI, placeholder style, and more.

Modified as above and raised new PR #3575

Karthickmani97 · 2025-08-25T17:55:11Z

MAUI/Kanban-Board/Column.md

+
+## Appearance Customization
+
+### Customizing Backgrounds


Customize the column background

Use the Background property of the KanbanColumn to customize the background color of each column in the Kanban control.

Modified as above and raised new PR - #3575

Karthickmani97 · 2025-08-25T17:56:20Z

MAUI/Kanban-Board/Column.md

+
+{% highlight xaml %}
+
+<kanban:KanbanColumn Title="To Do"


@VishalOmprasad, as we discussed use kanban instance, and define columns

Used kanban instance #3575

Karthickmani97 · 2025-08-25T17:57:58Z

MAUI/Kanban-Board/Column.md

+
+<kanban:KanbanColumn Title="To Do"
+                     Categories="Open"
+                     Background="AliceBlue">


Highlight Background line. Use below colors and add codes based on that

Karthickmani97 · 2025-08-25T17:58:33Z

MAUI/Kanban-Board/Column.md

+openColumn.PlaceholderStyle = placeholderStyle;
+kanban.Columns.Add(openColumn);
+
+{% endhighlight %}


Add KanbanViewModel file

Added KanbanViewModel file #3575

Karthickmani97 · 2025-08-25T18:02:24Z

MAUI/Kanban-Board/Column.md

+
+{% endtabs %}
+
+### NoCardTemplate


Customize no card appearance using DataTemplate

Use the NoCardTemplate property of the KanbanColumn to define a custom UI for columns that have no cards. This allows you to display meaningful text or messages when a column is empty.

The following example shows how to define a custom no card template using a DataTemplate

Content modified as above - #3575

Karthickmani97 · 2025-08-25T18:03:12Z

MAUI/Kanban-Board/Column.md

+    </DataTemplate>
+</ContentPage.Resources>
+
+<kanban:SfKanban x:Name="kanban"


Add codes based on gif added.

Codes added based on the GIF image #3575

Karthickmani97 · 2025-08-25T18:05:08Z

MAUI/Kanban-Board/Column.md

+
+{% tabs %}
+
+{% highlight xaml %}


Use below template for files name:

XAML
C#
TaskDetails.cs (For custom model)
KanbanViewModel.cs

Reference:

Code snippet templated used as above and raised new PR - #3575

Karthickmani97 · 2025-08-25T18:07:38Z

MAUI/Kanban-Board/Column.md

+
+{% endtabs %}
+
+### PlaceholderStyle


Customize the placeholder style

Use the PlaceholderStyle property of the KanbanColumn to style the placeholder area where cards can be dropped during drag-and-drop operations. This enhances visual clarity and improves the user experience during interactions.

Content modified as above - #3575

Karthickmani97 · 2025-08-25T18:13:38Z

MAUI/Kanban-Board/Getting-Started.md

@@ -505,7 +509,415 @@ doneColumn.Categories = new List<object>() { "Done" };

 {% endtabs %}

-### Running the Application
+## Custom Model mapping


@VishalOmprasad, follow below title and reference template shared

Populate .NET MAUI Kanban item source

Creating the default model tasks

Reference - https://help.syncfusion.com/maui/scheduler/getting-started#creating-the-scheduler-appointments

Creating the custom model tasks with data mapping

Reference - https://help.syncfusion.com/maui/scheduler/getting-started?cs-save-lang=1&cs-lang=csharp#creating-the-custom-eventsappointments-with-data-mapping

Followed like the above specified template for title and its contents.

Karthickmani97 · 2025-08-25T18:14:24Z

MAUI/Kanban-Board/Getting-Started.md

+
+{% highlight C# %}
+
+public class KanbanCustomModel : INotifyPropertyChanged


Follow this

Code snippet template changed as above

Karthickmani97 · 2025-08-25T18:15:05Z

MAUI/Kanban-Board/Getting-Started.md

+		}
+	}
+
+	public string TaskImageURL


Use proper API name to meet C# standards

Proper API names used in custom model class code snippet

Karthickmani97 · 2025-08-25T18:16:22Z

MAUI/Kanban-Board/Getting-Started.md

+{% endhighlight %}
+
+{% endtabs %}
+


Add notes:

When using a custom model, the default card UI is not applied. You must define a custom DataTemplate via the CardTemplate property to render the card content.

Notes added in Getting Started

SyncfusionBuild · 2025-08-26T09:18:15Z

Build Status: INPROGRESS 🔃
Build Location: Kanban-UG-changes-dev

SyncfusionBuild · 2025-08-26T09:18:49Z

The running CI Job is terminated due to changes committed on the source branch for this Merge Request and CI triggered for latest commit.

SyncfusionBuild · 2025-08-26T09:19:05Z

CI Status: ABORTED ❌
Source Compilation: FAILURE ❌
Build Location: Kanban-UG-changes-dev

SyncfusionBuild · 2025-08-26T09:19:41Z

Build Status: INPROGRESS 🔃
Build Location: Kanban-UG-changes-dev

SyncfusionBuild · 2025-08-26T09:33:52Z

CI Status: SUCCESS ✅
Source Compilation: SUCCESS ✅
Build Location: Kanban-UG-changes-dev
Technical Error(s): 0
Spelling Error(s): 0
Image Alt Text Error(s): 0
Image Size Error(s): 0
Image Name Error(s): 0
Front matter Error(s): 0
File Path Error(s): 0
CodeSnippet File Path Missing Error(s): 0
Toc Anchor Tags Validation Error(s): 0
MD Tag Validation Error(s): 0

SyncfusionBuild · 2025-08-26T09:48:02Z

Build Status: INPROGRESS 🔃
Build Location: Kanban-UG-changes-dev

SyncfusionBuild · 2025-08-26T12:21:54Z

Build Status: INPROGRESS 🔃
Build Location: Kanban-UG-changes-dev

SyncfusionBuild · 2025-08-26T12:24:24Z

CI Status: SUCCESS ✅
Source Compilation: SUCCESS ✅
Build Location: Kanban-UG-changes-dev
Technical Error(s): 0
Spelling Error(s): 0
Image Alt Text Error(s): 0
Image Size Error(s): 0
Image Name Error(s): 0
Front matter Error(s): 0
File Path Error(s): 0
CodeSnippet File Path Missing Error(s): 0
Toc Anchor Tags Validation Error(s): 0
MD Tag Validation Error(s): 0

SyncfusionBuild · 2025-08-26T16:02:04Z

Build Status: INPROGRESS 🔃
Build Location: Kanban-UG-changes-dev

SyncfusionBuild · 2025-08-26T16:12:56Z

CI Status: SUCCESS ✅
Source Compilation: SUCCESS ✅
Build Location: Kanban-UG-changes-dev
Technical Error(s): 0
Spelling Error(s): 0
Image Alt Text Error(s): 0
Image Size Error(s): 0
Image Name Error(s): 0
Front matter Error(s): 0
File Path Error(s): 0
CodeSnippet File Path Missing Error(s): 0
Toc Anchor Tags Validation Error(s): 0
MD Tag Validation Error(s): 0

SyncfusionBuild · 2025-08-26T16:29:06Z

Build Status: INPROGRESS 🔃
Build Location: Kanban-UG-changes-dev

SyncfusionBuild · 2025-08-26T16:36:35Z

CI Status: SUCCESS ✅
Source Compilation: SUCCESS ✅
Build Location: Kanban-UG-changes-dev
Technical Error(s): 0
Spelling Error(s): 0
Image Alt Text Error(s): 0
Image Size Error(s): 0
Image Name Error(s): 0
Front matter Error(s): 0
File Path Error(s): 0
CodeSnippet File Path Missing Error(s): 0
Toc Anchor Tags Validation Error(s): 0
MD Tag Validation Error(s): 0

SyncfusionBuild · 2025-08-26T17:52:13Z

Build Status: INPROGRESS 🔃
Build Location: Kanban-UG-changes-dev

SyncfusionBuild · 2025-08-26T17:55:32Z

CI Status: SUCCESS ✅
Source Compilation: SUCCESS ✅
Build Location: Kanban-UG-changes-dev
Technical Error(s): 0
Spelling Error(s): 0
Image Alt Text Error(s): 0
Image Size Error(s): 0
Image Name Error(s): 0
Front matter Error(s): 0
File Path Error(s): 0
CodeSnippet File Path Missing Error(s): 0
Toc Anchor Tags Validation Error(s): 0
MD Tag Validation Error(s): 0

SyncfusionBuild · 2025-09-01T08:40:16Z

Build Status: INPROGRESS 🔃
Build Location: Kanban-UG-changes-dev

SyncfusionBuild · 2025-09-01T08:43:36Z

CI Status: SUCCESS ✅
Source Compilation: SUCCESS ✅
Build Location: Kanban-UG-changes-dev
Technical Error(s): 0
Spelling Error(s): 0
Image Alt Text Error(s): 0
Image Size Error(s): 0
Image Name Error(s): 0
Front matter Error(s): 0
File Path Error(s): 0
CodeSnippet File Path Missing Error(s): 0
Toc Anchor Tags Validation Error(s): 0
MD Tag Validation Error(s): 0

SyncfusionBuild · 2025-09-01T12:17:56Z

Build Status: INPROGRESS 🔃
Build Location: Kanban-UG-changes-dev

SyncfusionBuild · 2025-09-01T12:19:36Z

CI Status: SUCCESS ✅
Source Compilation: SUCCESS ✅
Build Location: Kanban-UG-changes-dev
Technical Error(s): 0
Spelling Error(s): 0
Image Alt Text Error(s): 0
Image Size Error(s): 0
Image Name Error(s): 0
Front matter Error(s): 0
File Path Error(s): 0
CodeSnippet File Path Missing Error(s): 0
Toc Anchor Tags Validation Error(s): 0
MD Tag Validation Error(s): 0

…(code snippet modified properly)

SyncfusionBuild · 2025-09-01T12:57:49Z

Build Status: INPROGRESS 🔃
Build Location: Kanban-UG-changes-dev

SyncfusionBuild · 2025-09-01T13:02:51Z

The running CI Job is terminated due to changes committed on the source branch for this Merge Request and CI triggered for latest commit.

SyncfusionBuild · 2025-09-01T13:03:38Z

CI Status: ABORTED ❌
Source Compilation: FAILURE ❌
Build Location: Kanban-UG-changes-dev

SyncfusionBuild · 2025-09-01T13:03:42Z

Build Status: INPROGRESS 🔃
Build Location: Kanban-UG-changes-dev

SyncfusionBuild · 2025-09-01T13:17:52Z

CI Status: SUCCESS ✅
Source Compilation: SUCCESS ✅
Build Location: Kanban-UG-changes-dev
Technical Error(s): 0
Spelling Error(s): 0
Image Alt Text Error(s): 0
Image Size Error(s): 0
Image Name Error(s): 0
Front matter Error(s): 0
File Path Error(s): 0
CodeSnippet File Path Missing Error(s): 0
Toc Anchor Tags Validation Error(s): 0
MD Tag Validation Error(s): 0

977013 - MAUI Kanban UG changes

3c0687a

MAUI Kanban UG - Added relevant tags for code snippets

6f50321

Karthickmani97 reviewed Aug 25, 2025

View reviewed changes

MAUI Kanban UG Getting Started review corrections addressed

baf03fe

Note content position changed

1fe6756

977013 - MAUI Kanban Cards content changes removed

06f3b42

977013 - MAUI Kanban UG - Column.md related content changes removed

6b226c9

977013 - MAUI Kanban UG getting started - content updated

9b6d3f4

977013 - Content improved

f4101bb

977013 - Kanban UG getting started content corrections

767b8a2

Updated kanban getting started content review corrections

7305f41

Updated kanban review corrections

594340e

977013 - Kanban Getting Started md file review corrections addressed …

3d5141c

…(code snippet modified properly)

977013 - Kanban Getting started code snippet changes

fb4eda5

MuniappanSubramanian approved these changes Sep 1, 2025

View reviewed changes

MuniappanSubramanian merged commit 0f1ee33 into development Sep 1, 2025
1 check passed

This was referenced Sep 1, 2025

977013-[Dev] MAUI Kanban UG content code snippet updated #3593

Merged

977013-[Dev] MAUI Kanban UG GettingStarted-code snippet corrections #3594

Merged

977013-[Dev] MAUI Kanban getting started review corrections addressed #3595

Closed

		{% endtabs %}

		N> When using a custom model as the [`ItemsSource`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Kanban.SfKanban.html#Syncfusion_Maui_Kanban_SfKanban_ItemsSource), the binding context for each card is set to an instance of that custom model. This means that all data bindings within the [`CardTemplate`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Kanban.SfKanban.html#Syncfusion_Maui_Kanban_SfKanban_CardTemplate) should reference the properties of your custom model directly.


		{% highlight C# %}

		public class KanbanCustomModel : INotifyPropertyChanged

977013-[Dev] MAUI Kanban UG document updated regarding custom mapping feature #3556

977013-[Dev] MAUI Kanban UG document updated regarding custom mapping feature #3556

Uh oh!

Conversation

VishalOmprasad commented Aug 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Uh oh!

SyncfusionBuild commented Aug 21, 2025

Uh oh!

SyncfusionBuild commented Aug 21, 2025

Uh oh!

SyncfusionBuild commented Aug 22, 2025

Uh oh!

SyncfusionBuild commented Aug 22, 2025

Uh oh!

Karthickmani97 Aug 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Karthickmani97 Aug 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Customize column appearance

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Populate .NET MAUI Kanban item source

Creating the default model tasks

Creating the custom model tasks with data mapping

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Karthickmani97 Aug 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

VishalOmprasad Aug 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

VishalOmprasad commented Aug 21, 2025 •

edited

Loading

Karthickmani97 Aug 25, 2025 •

edited

Loading

Karthickmani97 Aug 25, 2025 •

edited

Loading

Karthickmani97 Aug 25, 2025 •

edited

Loading

VishalOmprasad Aug 26, 2025 •

edited

Loading