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.

Style the treegrid

Thread ID:

Created:

Updated:

Platform:

Replies:

131182 Jun 27,2017 03:37 AM Mar 29,2018 08:45 PM UWP 7
loading
Tags: SfTreeGrid
tonyb
Asked On June 27, 2017 03:37 AM

How do you style the treegrid control to look like a normal treeview control. Looking at the picture on your web page ( Fully Customizable) this looks possible. Is there a example somewhere I can have a look at.

regards

Tony

Muthukumar Kalyanasundaram [Syncfusion]
Replied On June 28, 2017 04:51 AM

Hi Tony, 

Thank you for contacting Syncfusion support. 

We have checked your query.  Based on your requirement, we have prepared sample. In the sample, we have loaded the treeGrid  with image and textblock control in TreeGridTextColumn as shown like below code, 

Code Snippet: Xaml 
 
<Page.Resources> 
    <local:ImageConverter x:Key="imageConverter" />     
</Page.Resources> 
 
<syncfusion:SfTreeGrid.Columns> 
   <syncfusion:TreeGridTextColumn Width="150" 
                                            MappingName="Name" 
                                            SetCellBoundValue="True"> 
     <syncfusion:TreeGridTextColumn.CellTemplate> 
        <DataTemplate> 
          <Grid> 
             <Grid.ColumnDefinitions> 
               <ColumnDefinition Width="Auto" /> 
                <ColumnDefinition Width="*" /> 
             </Grid.ColumnDefinitions> 
              <Image Grid.Column="0" 
                                    MinWidth="35" 
                                    Margin="1,6,0,6"    
                                    Source="{Binding Converter={StaticResource imageConverter}}" /> 
               <TextBlock Grid.Column="1" 
                                        Margin="2" 
                                        HorizontalAlignment="Left" 
                                        VerticalAlignment="Center" 
                                        Text="{Binding Path=Value}" /> 
         </Grid> 
     </DataTemplate> 
   </syncfusion:TreeGridTextColumn.CellTemplate> 
</syncfusion:TreeGridTextColumn> 

Code Snippet: C# 
 
internal class ImageConverter : IValueConverter 
{ 
    public object Convert(object value, Type targetType, object parameter, string language) 
    { 
        var datacontext = value as DataContextHelper; 
        if (datacontext.Value.ToString() == "Inbox" || datacontext.Value.ToString() == "Drafts" || datacontext.Value.ToString() == "Sent Items" 
            || datacontext.Value.ToString() == "Deleted Items" || datacontext.Value.ToString() == "Calendar" || datacontext.Value.ToString() == "Contacts") 
            return "ms-appx:///Images///" + datacontext.Value.ToString() + ".png"; 
        return "ms-appx:///Images///" + "Folder.png"; 
 
    } 
 
    public object ConvertBack(object value, Type targetType, object parameter, string language) 
    { 
        return null; 
    } 
} 



And also you can refer the TreeViewDemo sample in the installed Essential Studio in the below location, 

Path location: \..\AppData\Local\Syncfusion\EssentialStudio\{installed version}\UWP\SampleBrowser\SfTreeGrid\Views\Getting Started. 

Please let us know if you have any query. 

Regards, 
Muthukumar K 


tonyb
Replied On June 30, 2017 02:41 AM

Hi Muthukuma

Just what I was looking for , thanks for your help.


regards

Tony Broome


Muthukumar Kalyanasundaram [Syncfusion]
Replied On July 2, 2017 03:16 AM

Hi Tony, 
 
Thanks for the update. Please let us know if you need any other assistance. 
 
Regards, 
Muthukumar K 


Dave Brooks
Replied On March 24, 2018 01:13 PM

This is a really great sample, thank you.
Is there any way to style the expander button (the + sign)?

Muthukumar Kalyanasundaram [Syncfusion]
Replied On March 26, 2018 08:19 AM

Hi Dave, 

Thanks for the update. Yes. You can achieve your requirement by customizing the style of TreeGridExpander as like below code, 

Code Snippet: XAML 

<Style TargetType="syncfusion:TreeGridExpander"> 
    <Setter Property="Foreground" Value="{StaticResource ApplicationForegroundThemeBrush}" /> 
    <Setter Property="Background" Value="Transparent" /> 
    <Setter Property="BorderBrush" Value="Gray" /> 
    <Setter Property="BorderThickness" Value="1,1,1,1" /> 
    <Setter Property="FontSize" Value="12" /> 
    <Setter Property="IsTabStop" Value="False" /> 
    <Setter Property="Template"> 
        <Setter.Value> 
            <ControlTemplate TargetType="syncfusion:TreeGridExpander"> 
                <Border Background="Transparent" 
                BorderBrush="{TemplateBinding BorderBrush}" 
                BorderThickness="{TemplateBinding BorderThickness}"> 
 
                    <VisualStateManager.VisualStateGroups> 
                        <VisualStateGroup x:Name="ExpandedState"> 
                            <VisualState x:Name="Expanded"> 
                                <Storyboard> 
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_CollapseCellPath" Storyboard.TargetProperty="(FrameworkElement.Visibility)"> 
                                        <DiscreteObjectKeyFrame KeyTime="0:0:0"> 
. . . . . . 
. . . . . . 
. . . . . .  
                    <Grid Background="{TemplateBinding Background}"> 
                        <Path x:Name="PART_CollapseCellPath" 
                        Margin="1" 
                        Data="F1M0.697,8.01L0,7.293 3.373,4.005 0,0.717 0.697,0 4.804,4.005z" 
                        Fill="{TemplateBinding Foreground}" 
                        Stretch="Uniform"  
                        RenderTransformOrigin="0.5,0.5" 
                        Visibility="Collapsed"/> 
                        <Path x:Name="PART_ExpanderCellPath" 
                        Margin="1" 
                        Data="F1M4.005,4.805L0,0.698 0.717,0 4.005,3.373 7.293,0 8.01,0.698z" 
                        Fill="{TemplateBinding Foreground}" 
                        RenderTransformOrigin="0.5,0.5" 
                        Stretch="Uniform" 
                        Visibility="Visible"/> 
                    </Grid> 
                </Border> 
            </ControlTemplate> 
        </Setter.Value> 
    </Setter> 
</Style> 


Please let us know if you have any concerns. 

Regards, 
Muthukumar K 


Dave Brooks
Replied On March 29, 2018 05:42 AM

Terrific.
Thank you very much.

Jai Ganesh S [Syncfusion]
Replied On March 29, 2018 08:45 PM

Hi Dave, 
 
Thank you for the update. 
 
Please let us know if you need further assistance on this. 
 
Regards, 
Jai Ganesh S 


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.

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.

;