Wrapping Task Tags

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? 

1 Reply

MK Muneesh Kumar G Syncfusion Team July 6, 2019 08:50 AM UTC

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. 
 
 
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.   
 


Loader.
Up arrow icon