Wrapping Task Tags

[Hunter]

Hi, 

I'm wondering how to make the tags at the bottom of the cards wrap? So, for instance, when I put more than 3 decent size tags, it just keeps adding to the end. Is there a way to wrap them to continue below? 

[Muneesh Kumar G]

Hi Hunter, 

 

Greetings from Syncfusion. 

 

We have prepared a sample to wrap the tag item by setting the custom card template to the CardTemplate property. Please download the sample from the following location. 

 

Sample: https://www.syncfusion.com/downloads/support/forum/145685/ze/KanbanTagCustomization-383935559.zip 

 

Screenshot: 

 

 

 

Code Snippet: 

 

<ResourceDictionary> 

<DataTemplate x:Key="CustomCardTemplate"> 

<Grid> 

                <Border> 

……….. 

                            <ScrollViewer x:Name="scrollView" Grid.Row="2" Grid.ColumnSpan="1" VerticalAlignment="Bottom" 

                                  Margin="0,4,0,2" 

                                  Visibility="{Binding Tag.CardStyle.TagVisibility ,RelativeSource={RelativeSource Mode=TemplatedParent}}" 

                                  HorizontalScrollBarVisibility="Visible" 

                                  VerticalScrollBarVisibility="Visible"> 

                                <ItemsControl ItemsSource="{Binding Tags}"> 

                                    <ItemsControl.ItemsPanel> 

                                        <ItemsPanelTemplate> 

                                                <ItemsWrapGrid x:Name="ItemWrapGrid" MaximumRowsOrColumns="3" ItemHeight="30" ItemWidth="70" DataContext="{Binding}" Orientation="Horizontal"/> 

                                        </ItemsPanelTemplate> 

                                    </ItemsControl.ItemsPanel> 

                                    <ItemsControl.ItemTemplate> 

                                        <DataTemplate> 

                                            <Border BorderThickness="2" BorderBrush="Gray"  Margin="5"> 

                                                <TextBlock HorizontalAlignment="Center" FontSize="10" Text="{Binding }"/> 

                                            </Border> 

                                        </DataTemplate> 

                                    </ItemsControl.ItemTemplate> 

                                </ItemsControl> 

                            </ScrollViewer> 

……….. 

                    </Grid> 

                </Border> 

            </DataTemplate> 

        </ResourceDictionary> 

 

 

<kanban:SfKanban x:Name="Kanban" ItemsSource="{Binding Tasks}" CardTemplate="{StaticResource CustomCardTemplate}"> 

</kanban:SfKanban> 

 

Please let us know if you need further assistance on this. 

 

Regards, 

Muneesh Kumar G.