We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Model Binding

Thread ID:

Created:

Updated:

Platform:

Replies:

126268 Oct 4,2016 08:16 PM Oct 7,2016 05:12 AM UWP 5
loading
Tags: SfKanban
syncfusion fan
Asked On October 4, 2016 08:16 PM

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 [Syncfusion]
Replied On October 5, 2016 05:26 AM

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.  
 
  
Regards, 
Sridharan
 


syncfusion fan
Replied On October 5, 2016 06:40 PM

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 [Syncfusion]
Replied On October 6, 2016 07:27 AM

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. 
 
 
Regards, 
Sridharan 


syncfusion fan
Replied On October 6, 2016 06:56 PM

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 [Syncfusion]
Replied On October 7, 2016 05:12 AM

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. 
  
Regards, 
Sridharan
 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;