1. Home
  2. Forum
  3. Xamarin.Forms
  4. SfKanban.HeaderTemplate

SfKanban.HeaderTemplate

I want to add a button in the header that allows me to add a cards in its column. How could I do?
At the time I was thinking of a xaml like this.

                <kanban:SfKanban.HeaderTemplate >
                    <DataTemplate>
                        <Grid x:Name="GridColumn">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition/>
                                <ColumnDefinition/>
                            </Grid.ColumnDefinitions>
                            <StackLayout BackgroundColor="White" Padding="2">
                                <Label Text="{Binding Path=Title}" TextColor="{StaticResource Primary}" FontSize="Title" FontAttributes="Bold" HorizontalOptions="Start" />
                                <Label Text="{Binding Path=ItemsCount, StringFormat='Items: {0}'}" TextColor="{StaticResource Primary}" HorizontalOptions="Start" />
                            </StackLayout>
                            <Button Grid.Column="1" x:Name="myButton" Text="Add" Command="{Binding AddCardsCommand, Source={x:Reference ToDoPageName}}" CommandParameter="{x:Reference GridColumn}"/>
                        </Grid>
                    </DataTemplate>
                </kanban:SfKanban.HeaderTemplate>

But I can't get it to work.

4 Replies 1 reply marked as answer
HM Hemalatha Marikumar Syncfusion Team December 21, 2020 12:56 PM UTC

     
Hi Marco, 
 
Greetings from Syncfusion. 
 
Currently our development team is validating this, we will update the details on December 22, 2020. 
 
Regards,
Hemalatha M. 


HM Hemalatha Marikumar Syncfusion Team December 21, 2020 04:00 PM UTC

     
Hi Marco, 
 
Thanks for your patience. 
 
We would like to let you know that we have achieved your requirement by getting the corresponding header column’s cards collection on its button click command and add your desired Kanban model in it.  
 
Getting the entire ItemsSource of Kanban and iterating as per the Category doesn’t make a generic way of solution, hence we have achieved it by passing the data context of header template. It is a type of ColumnTag. 
 
Itself we can get the private field of Column and it has corresponding cards collection, by adding your desired Kanban card item on it as per in below code snippet, we achieve it. 
 
public class TaskDetails 
    { 
        private ICommand mUpdater; 
        public ICommand ClickCommand 
        { 
            get 
            { 
                if (mUpdater == null) 
                    mUpdater = new Updater(); 
                return mUpdater; 
            } 
            set 
            { 
                mUpdater = value; 
            } 
        } 
 
        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("/images/People_Circle1.png", UriKind.RelativeOrAbsolute) 
            }); 
 
 
            … 
            }); 
        } 
        public ObservableCollection<KanbanModel> Tasks { get; set; } 
    } 
    class Updater : ICommand 
    { 
        #region ICommand Members   
 
        public bool CanExecute(object parameter) 
        { 
            return true; 
        } 
        public event EventHandler CanExecuteChanged 
        { 
            add { CommandManager.RequerySuggested += value; } 
            remove { CommandManager.RequerySuggested -= value; } 
        } 
 
        public void Execute(object parameter) 
        { 
            var dataContext = (parameter as ColumnTag); 
            if(dataContext != null) 
            { 
                PropertyInfo ColumnGetter = dataContext.GetType().GetProperty("Column", BindingFlags.NonPublic | BindingFlags.Instance); 
                KanbanColumn kanbanColumn = (KanbanColumn)ColumnGetter.GetValue(dataContext); 
                //to get its category , getting this first card on column model 
                var kanbanModel = ((kanbanColumn.Cards[0] as KanbanCardItem).Content as KanbanModel); 
                kanbanColumn.Items.Add(new KanbanCardItem() 
                { 
                    //Add your own task details 
                    Content = new KanbanModel() 
                    { 
                        Category = kanbanModel.Category, 
                        Title = kanbanModel.Title+"New", 
                        ID = "1234", 
                        Description = "Newly included task", 
                        ColorKey = "High", 
                        Tags = kanbanModel.Tags, 
                        ImageURL = new Uri("/images/People_Circle4.png", UriKind.RelativeOrAbsolute) 
 
                    } 
                }); 
            } 
        } 
        #endregion 
    } 
 
Here, get the 0th card category and its tags, and added title id and colorkey and image url as per demo showing case alone, you can set it as per your need. 
 
  <syncfusion:SfKanban MinColumnWidth="150"  x:Name="kanban" 
                       ColumnMappingPath="Category"  
                       ItemsSource="{Binding Tasks}" 
                       AutoGenerateColumns="False"> 
 
            <syncfusion:SfKanban.ColumnHeaderTemplate> 
                <DataTemplate> 
                    <StackPanel Orientation="Vertical> 
                        <TextBlock x:Name="label"  Text="{Binding Header}"  Foreground="Purple" /> 
                        <Button Content="Add" Margin="0,10,0,0" Command="{Binding Source={x:Reference kanban},Path=DataContext.ClickCommand}" CommandParameter="{Binding Source={x:Reference label},Path=DataContext}" /> 
                    </StackPanel> 
                </DataTemplate> 
            </syncfusion:SfKanban.ColumnHeaderTemplate> 
            <syncfusion:KanbanColumn Categories="Open" Title="To Do" /> 
            <syncfusion:KanbanColumn Categories="In Progress" Title="Progress" /> 
            <syncfusion:KanbanColumn Categories="Review,Done" Title="Done" /> 
 
        </syncfusion:SfKanban> 
 
Output: 
 
Before tapping Add button in Progress category 
 
 
 
After tapping Add button in Progress category 
 
 
 
 
Regards,
Hemalatha M. 


Marked as answer
MS Marco Salvatori December 26, 2020 02:37 PM UTC

excellent!!!
thanks

HM Hemalatha Marikumar Syncfusion Team December 28, 2020 04:41 AM UTC

Hi Macro, 
 
Thanks for your feedback. 
 
Regards,
Hemalatha M. 


Loader.
Up arrow icon