Using Custom KanbanModel even inhereted from KanbanModel not working. Used to work with XF

[Emil]

Attached example, i have added a custom element inheriting from KanbanModel but UI is not binding correctly. this used to work for Xamarin.Forms.

Thats a big restriction if i want to have a custom UI with

Attachment: GettingStarted_Kanban_MAUImaster_bcc2a763.zip

[Emil]

XF code

   // Summary:

   // Gets or sets a collection used to generate the content of the Syncfusion.SfKanban.XForms.SfKanban.

   //

   //

   // Remarks:

   // Syncfusion.SfKanban.XForms.KanbanColumn will be populated with cards for the

   // data in the ItemsSource. Each item in ItemsSource will be associated to a Syncfusion.SfKanban.XForms.KanbanColumn

   // using either Syncfusion.SfKanban.XForms.KanbanModel.Category property or Syncfusion.SfKanban.XForms.SfKanban.ColumnMappingPath

   // property depending on whether the item type is Syncfusion.SfKanban.XForms.KanbanModel

   // or custom model respectively.

   public IEnumerable ItemsSource

   {

       get

       {

           return (IEnumerable)GetValue(ItemsSourceProperty);

       }

       set

       {

           SetValue(ItemsSourceProperty, value);

       }

   }

Maui Code 

  //

  // Summary:

  // Gets or sets a collection used to generate the content of the Syncfusion.Maui.Kanban.SfKanban.

  //

  //

  // Remarks:

  // Syncfusion.Maui.Kanban.KanbanColumn will be populated with cards for the data

  // in the ItemsSource. Each item in ItemsSource will be associated to a Syncfusion.Maui.Kanban.KanbanColumn

  // using either Syncfusion.Maui.Kanban.KanbanModel.Category property or Syncfusion.Maui.Kanban.SfKanban.ColumnMappingPath

  // property depending on whether the item type is Syncfusion.Maui.Kanban.KanbanModel

  // or custom model respectively.

  public ObservableCollection<KanbanModel> ItemsSource

  {

      get

      {

          return (ObservableCollection<KanbanModel>)GetValue(ItemsSourceProperty);

      }

      set

      {

          SetValue(ItemsSourceProperty, value);

      }

  }

You are obviously restricting the usage on Maui

[Kerubananthan Ganesan]

Hi Emil,

Based on the provided details we have reviewed your query regarding Using Custom KanbanModel even inherited from KanbanModel not working.

Based on our review, we would like to inform you that the default type for the ItemsSource property of the .NET MAUI Kanban control is KanbanModel. If you require additional properties, you can achieve this by creating a custom model that inherits from KanbanModel.

To meet your requirement, you can create a cards collection of type KanbanModel and add cards by using your custom model class. You can use CardTemplate property of SfKanban to display any additional custom properties in the UI, as demonstrated below.

XAML:

<kanban:SfKanban  AutoGenerateColumns="False"

                                   Columns="{Binding Columns}"

                                   ItemsSource="{Binding Cards}" >

        <kanban:SfKanban.CardTemplate>

                <DataTemplate>

                    <Grid RowDefinitions="auto, auto, auto" Background="Gray">

                        <Label Text="{Binding Title}" Grid.Row="0"/>

                        <Label Text="{Binding Description}" Grid.Row="1"/>

                        <Label Text="{Binding Text}" Grid.Row="2"/>

                    </Grid>

                </DataTemplate>

        </kanban:SfKanban.CardTemplate>

        <kanban:SfKanban.BindingContext>

            <local:ViewModel/>

        </kanban:SfKanban.BindingContext>

</kanban:SfKanban>

C#:

public class ViewModel

{

   public ObservableCollection<KanbanModel> Cards { get; set; }

 

   public ViewModel()

   {

       Cards = new ObservableCollection<KanbanModel>();

       Cards.Add(new CustomKanbanModel()

       {

           ID = 1,

           Title = "iOS - 1002",

           ImageURL = "People_Circle1.png",

           Category = "Open",

           Description = "Analyze customer requirements",

           IndicatorFill = Colors.Red,

           Tags = new List<string> { "Incident", "Customer" }

           Text = "test 1"

       });

       Cards.Add(new CustomKanbanModel

       {

           ID = 6,

           Title = "Xamarin - 4576",

           ImageURL = "People_Circle2.png",

           Category = "Open",

           Description = "Show the retrieved data from the server in grid control",

           IndicatorFill = Colors.Green,

           Tags = new List<string> { "Story", "Customer" }

           Text = "test 2"

       });

    }

}

 

If you have any further questions or require assistance with any other aspect, please don't hesitate to let us know. We are here to help.

Regards,

Kerubananthan G