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. (Last updated on : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Style the treegrid

Thread ID:

Created:

Updated:

Platform:

Replies:

131182 Jun 27,2017 07:37 AM UTC Mar 30,2018 12:45 AM UTC UWP 7
loading
Tags: SfTreeGrid
tonyb
Asked On June 27, 2017 07:37 AM UTC

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 08:51 AM UTC

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 06:41 AM UTC

Hi Muthukuma

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


regards

Tony Broome


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

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 05:13 PM UTC

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 12:19 PM UTC

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 09:42 AM UTC

Terrific.
Thank you very much.

Jai Ganesh S [Syncfusion]
Replied On March 30, 2018 12:45 AM UTC

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.

Warning Icon 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.Close Icon

;