Model Binding

[syncfusion fan]

In the documentation here: https://help.syncfusion.com/uwp/sfkanban/getting-started

It uses the built in KanbanModel I believe.  Can you use any model type to bind to or does it need to by of type Kanban model when using a single model type?

For example could you create a model called Agile, and map properites to properites in that model?  Or is it at least possible to add properties within that agile modile called Category, Title, ID and will that class work to bind to the kanban control?

public class TaskDetails
    {
        public TaskDetails()
        {

            Tasks = new ObservableCollection<KanbanModel>();

            Tasks.Add(new KanbanModel()
            {

                Title = "Universal App",

                ID = "27654",

                Description = "Incorporate feedback into functional specifications",

                Category = "Open",

                ColorKey = "Low",

                Tags = new string[] { "Deployment" },

                ImageURL = new Uri("ms-appx:///images/icon.jpg"),
            });

[Sridharan Gajendran]

Hi Brantingham, 

 

Thanks for contacting Syncfusion Support. 

 

We are able to bind the custom model value collection to ItemsSource, by customizing the card template using CardTemplate property in the Kanban. Please find the demo sample from the below link.  

 

GettingStarted 

  

Regards, 

Sridharan
 

[syncfusion fan]

I was hoping to do a more formal parent child binding between columns and cards, more along this line:

namespace GettingStarted

{

    /// <summary>

    /// An empty page that can be used on its own or navigated to within a Frame.

    /// </summary>

    public sealed partial class MainPage : Page

    {

        public ObservableCollection<BoardItems> theboard = new ObservableCollection<BoardItems>();

        public MainPage()

        {

            this.InitializeComponent();

            SetupAgileBoardDetails();

            this.Kanban.ItemsSource = theboard;

        }

        public void SetupAgileBoardDetails()

        {

            var open = new BoardItems() {Category="Open" };

            Agile task = new Agile();

            task.ID = 123;

            task.Title = "Maintenance";

            task.Category = "Open";

            open.Tasks.Add(task);

            theboard.Add(open);

            var InProgress = new BoardItems() { Category = "InProgress" };

            task = new Agile();

            task.ID = 246;

            task.Title = "Deployment";

            task.Category = "InProgress";

            InProgress.Tasks.Add(task);

            var Closed = new BoardItems() { Category = "Closed" };

            task = new Agile();

            task.ID = 30;

            task.Title = "Analysis";

            task.Category = "Closed";

            Closed.Tasks.Add(task);

            task = new Agile();

            task.ID = 50;

            task.Title = "Testing";

            task.Category = "Closed";

            Closed.Tasks.Add(task);

            task = new Agile();

            task.ID = 3022;

            task.Title = "Development";

            task.Category = "Closed";

            Closed.Tasks.Add(task);

            

        }

    }

    //Custom Model for Kanban

    public class Agile

    {

        public int ID { get; set; }

        public string Title { get; set; }

        public string Category { get; set; }

    }

    public class BoardItems

    {

        public ObservableCollection<Agile> Tasks { get; set; }

        public int ID { get; set; }

        public string Title { get; set; }

        public string Category { get; set; }

        public int TaskCount { get; set; }

    }

}

[Sridharan Gajendran]

Hi Brantingham, 

  

We have achieved your requirements by generating the columns and its card items using the underlying data model. Please find the demo sample in the below link. 

 

GettingStarted 

 

Regards, 

Sridharan 

[syncfusion fan]

Thank you this is very close to what I want, however I need to be able to show some more fields in the column header, so i was trying to use this data template

 <DataTemplate x:Key="PhaseHeaderTemplate">

            <Grid>

                <Grid.ColumnDefinitions>

                    <ColumnDefinition Width="9*" />

                    <ColumnDefinition Width="1*" />

                </Grid.ColumnDefinitions>

                <Grid.RowDefinitions>

                    <RowDefinition Height="6*" />

                    <RowDefinition Height="4*" />

                    <RowDefinition Height="4*" />

                </Grid.RowDefinitions>

                <TextBlock x:Name="Header"

                               Text="{Binding Title}"

                               VerticalAlignment="Center"

                               FontWeight="Medium"

                               FontSize="16"

                               Foreground="#FF494949"

                               TextWrapping="NoWrap"

                               Grid.Row="0"

                               Margin="0,5,0,5"

                               Grid.ColumnSpan="1" />

                <StackPanel Grid.Row="1"

                                x:Name="WIPPanel"

                                Grid.Column="0"

                                Orientation="Horizontal">

                    <TextBlock Text="Start Date : "

                                   Margin="0,2,0,5"

                                   VerticalAlignment="Center"

                                   FontWeight="Light"

                                   Foreground="#FF767980"

                                   FontSize="14"

                                   TextWrapping="Wrap" />

                    <TextBlock Text="{Binding Start}"

                                   Margin="0,2,0,5"

                                   VerticalAlignment="Center"

                                   FontWeight="Light"

                                   Foreground="#FF767980"

                                   FontSize="14"

                                   TextWrapping="Wrap" />

                    <TextBlock Text="End Date : "

                                   Margin="0,2,0,5"

                                   VerticalAlignment="Center"

                                   FontWeight="Light"

                                   Foreground="#FF767980"

                                   FontSize="14"

                                   TextWrapping="Wrap" />

                    <TextBlock Text="{Binding End}"

                                   Margin="0,2,0,5"

                                   VerticalAlignment="Center"

                                   FontWeight="Light"

                                   Foreground="#FF767980"

                                   FontSize="14"

                                   TextWrapping="Wrap" />

                    <TextBlock Margin="0,2,0,5"

                                   Foreground="#FF767980"

                                   VerticalAlignment="Center"

                                   FontWeight="Light"

                                   FontSize="14"

                                   TextWrapping="Wrap" />

                </StackPanel>

                <Border Grid.Column="1"

                            x:Name="CollapsedIcon"

                            Background="Transparent"

                            Grid.Row="1">

                    <CheckBox IsChecked="{Binding IsExpanded,Mode=TwoWay}">

                    </CheckBox>

                </Border>

            </Grid>

        </DataTemplate>

In the control.

           <Kanban:SfKanban Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Row="1"

                             ColumnHeaderTemplate="{StaticResource PhaseHeaderTemplate}"

                             AutoGenerateColumns="False" Name="projKanban" DragEnter="projKanban_DragEnter" Drop="projKanban_Drop">

But I couldn't get it to work with a few things I tried here:

        private void MainPage_Loaded(object sender, RoutedEventArgs e)

        {

            //Added Columns to the Kanban based on the Items Count in the Board

            foreach(var item in Board)

            {

                KanbanColumn column = new KanbanColumn();

                //column.Title = item.Category;

                column.DataContext = item;

                var columntemplate = (DataTemplate)this.Resources["PhaseHeaderTemplate"];//FindResource("PhaseHeaderTemplate");

                column.ItemTemplate = columntemplate;

                    //Added Cards to the corresponding columns based on the task count

                    foreach (var task in item.Tasks)

                {

                    column.Cards.Add(new KanbanCardItem() { Content = task });

                }

                Kanban.Columns.Add(column);

            }

        }

[Sridharan Gajendran]

Hi Brantingham, 

 

Thanks for the update. 

 

We can achieve your requirement by defining the custom tag inheriting from the ColumnTag for binding the user defined properties. 

Please find the demo sample in the below link. 

GettingStarted 

  

Regards, 

Sridharan