Can I display ItemPosition in a TextBlock on each KanbanCard?

[Luis]

Hi!

I'm new implementing the SfKanban control in a WPF project, I could create a custom template, but now I need to display in the template a TextBlock with the item position in KanbanColumn.

Is there any option to Bind the item position in column wit my TextBlock?

Thank You!

[Muneesh Kumar G]

Hi Luis, 

 

Greetings from Syncfusion, we have analyzed your requirement and we have achieved this by using index property in Kanban model and updating it’s value in CardDragEnd event as per the below code snippet.  

 

Code snippet [C#]: 

 

public class CustomModel : IKanbanModel 

    { 

        .. 

         

        /// <summary> 

        /// Gets or sets the Index. 

        /// </summary> 

        public int Index 

        { 

            get 

            { 

                return this.index; 

            } 

 

            set 

            { 

                this.index = value; 

                this.NotifyPropertyChanged(); 

            } 

        } 

 

        .. 

            } 

        } 

    } 

 

private void Kanban_CardDragEnd(object sender, KanbanDragEndEventArgs e) 

        { 

            int index = 0; 

            CustomModel customModel; 

 

            foreach (KanbanCardItem cardItem in e.SelectedColumn.Cards) 

            { 

                customModel = cardItem.Content as CustomModel; 

                if (customModel != null) 

                { 

                    customModel.Index = index; 

                    index++; 

                } 

            } 

 

            index = 0; 

            foreach (KanbanCardItem cardItem in e.TargetColumn.Cards) 

            { 

                customModel = cardItem.Content as CustomModel; 

                if (customModel != null) 

                { 

                    if (index == e.TargetCardIndex) 

                    { 

                        index++; 

                    } 

 

                    customModel.Index = index; 

                    index++; 

                } 

                else 

                { 

                    (e.SelectedCard.Content as CustomModel).Index = e.TargetCardIndex; 

                } 

            } 

        } 

 

Code snippet [XAML]: 

  <Grid.Resources> 

            <DataTemplate x:Key="CardTemplate"> 

                .. 

 

                <StackPanel Orientation="Horizontal"> 

                            <!--Bound the index value--> 

                  <TextBlock Text="{Binding Index}" Margin="5" FontWeight="SemiBold"    

                             FontSize="16"/> 

                            .. 

            </DataTemplate> 

        </Grid.Resources> 

 

We have prepared a sample based on this, please find the sample from the following location.  

 

Sample: http://www.syncfusion.com/downloads/support/forum/140041/ze/Sample-304639187 

 

Please refer below user documentation for more details about CardDragEnd event. 

 

https://help.syncfusion.com/wpf/sfkanban/events#carddragend 

 

Hope this helps. 

 

Regards, 

Muneesh Kumar G. 

[Luis]

Hi Muneesh Kumar!

Thank you for your help. It's working fine on my project now.

Regards,

Luis M. Botero

[Muneesh Kumar G]

Hi Luis,  

 

Thanks for the update. 

  

We are glad to know that the given solution works. Please let us know if you need any further assistance. 

 

Regards, 

Muneesh Kumar G.