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. Image for the cookie policy date

Custom TreeView - UWP

Hi Team,

We have below three requirements in TreeNavigator.

a). Inside of HeaderView, we need to use three icons. They are Tick, Minus, Plus.

Tick - If we Select the particular item, icon has to be Tick.
Plus - If we Collapse the particular item, icon has to be Plus.
Minus - If we Expand the particular item, icon has to be Minus.

b). All the items should be in a single view. It shouldn`t navigate to the another view when we click on parent item.

Ex: If we click on the root item, the children should be placed below to the root item instead navigating to another view. 

We have used TreeNavigator for this requirement. But, it navigates to another view.

Please find the attached screenshot for reference.

Thanks,
Saravana Pandian M.

Attachment: CustomTreeView_ba9c8197.zip

11 Replies

JP Jagadeesan Pichaimuthu Syncfusion Team February 28, 2019 09:06 AM UTC

Hi Rohith, 
 
Thank you for contacting Syncfusion support. 
 
In TreeNavigator, currently we have option to navigate to another view only and it is not possible to expand below the root item. We suggest you to use our SfAccordian control which offers your required view and also, you can use the icons at the sample level in order to update your selection. Please refer the below link to know more details about the SfAccordian control. 
 
 
Let us know whether this helps also if you need any further assistance on this. 
 
Regards, 
Jagadeesan 



RK Rohith Kunchamwar March 8, 2019 07:10 AM UTC

Hi Jagadeesan,

Okay. Is it possible to achieve this requirement by using either Accordion or TreeGrid control. If so, please reassign this incident to the corresponding team and ask them to update the custom sample.

Thanks,
Saravana Pandian M.


JP Jagadeesan Pichaimuthu Syncfusion Team March 11, 2019 12:56 PM UTC

Hi Saravana Pandian, 
 
Thanks for your update. 
 
We have checked your requirement with Accordin control, but your requirement could not achieved using this. So currently we are checking your requirement with TreeGrid control, so we will provide more details on March 12th, 2019. 
 
We appreciate your patience until then.  
 
Regards, 
Jagadeesan 



SM Subashini Mahendran Syncfusion Team March 12, 2019 04:56 PM UTC

Hi Saravana Pandian, 
 
We have tired to achieve the reported requirement with SfAccordion. But, our SfAccordion does not contain hierarchical items (add item inside another item) support. We can only add content inside accordion item and it contain only expanded (this also represent selection state) and collapsed state. We have prepared sample for the same in which we have set the plus and minus icon for expand and collapse state. Please find the screenshot and sample regarding it below: 
 
 
 
 
And, please let us know if you need any further assistance on this. 
 
Regards, 
Subashini M. 



RK Rohith Kunchamwar March 13, 2019 08:29 AM UTC

Hi Subashini,

The update which you gave me is inappropriate as we already know that, accordion control doesn`t contain multiple children. In your previous update, you said that, you are checking this requirement with TreeGrid control. We request you to check with TreeGrid for this requirement and provide us update.

Anyhow, we need exact output like the TreeView control.


Thanks,
Saravana Pandian M.


JP Jagadeesan Pichaimuthu Syncfusion Team March 13, 2019 12:57 PM UTC

Hi Saravana Pandian, 

Sorry for the inconvenience.  

Currently we are checking your requirement using the TreeGrid control in our end, so we will provide the more details on March 14th 2019. 

We appreciate your patience until then. 

Regards, 
Jagadeesan


SP Shobika Palani Syncfusion Team March 14, 2019 01:19 PM UTC

Hi Saravana Pandian, 

Thanks for your patience.  

We have analyzed the feasibility with SfTreeGrid control for achieving your requirement. Please refer to the below screenshot 

SfTreeGrid : 
   

Also you can refer to the TreeViewDemo sample in the SfTreeGrid sample browser which will be available in the below link 

Can you please confirm us whether this meets your requirement? 

Regards, 
Shobika. 



RK Rohith Kunchamwar March 15, 2019 12:25 PM UTC

Hi Shobika,

Thanks for the update. We are looking for simlar apporach where we will have folder/file tree view. But the shared code doesn't have the binding functionality. 
Its been coded on the assumption of having only two level(one parent and one child) and those level value are got based on codition from view model code. This will not suite in the case where we have dynamic data or even with static multi level data. Can't we have heirarchy level binding in the control where based on itemsource of heirarchy tree will autogenerated and if the item doesn't contain any child there there wont be any icon(+,-) presented to it. If item contains child item + need to be displayed for expanded(- icon to collapse) and 
collapse(+ icon to expand) functionality. Kindly provide the sample with this requirement.


JP Jagadeesan Pichaimuthu Syncfusion Team March 18, 2019 12:43 PM UTC

Hi Saravana Pandian, 

Thanks for the update. 

We are currently working on to achieve your requirement of loading automatic tree structure based on dynamic data and we will update you with demo sample on 20th March,2019. 

We will appreciate your patience until then. 

Regards, 
Jagadeesan 



JP Jagadeesan Pichaimuthu Syncfusion Team March 20, 2019 04:22 PM UTC

Hi Saravana Pandian, 

Sorry for the delay. 

Still we are currently working on to achieve your requirement of loading automatic tree structure based on dynamic data and we will update you with demo sample on 21 March,2019.  

We will appreciate your patience until then. 

Regards, 
Jagadeesan 



AA Arulraj A Syncfusion Team March 21, 2019 11:17 AM UTC

Hi Saravana Pandian, 

Thanks for your patience.  

We have prepared the sample in TreeGrid UWP as like the TreeView Xamarin demo. Please make use of the below code and sample,  

XAML 
<syncfusion:SfTreeGrid.Columns> 
    <syncfusion:TreeGridTemplateColumn HeaderText="Name" MappingName="ItemName"> 
        <syncfusion:TreeGridTemplateColumn.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 ImageIcon, Converter={StaticResource converter}}"/> 
                    <TextBlock Grid.Column="1" 
                                       Margin="2" 
                                       HorizontalAlignment="Left" 
                                       VerticalAlignment="Center" 
                                       Text="{Binding Path=ItemName}" /> 
                </Grid> 
            </DataTemplate> 
        </syncfusion:TreeGridTemplateColumn.CellTemplate> 
    </syncfusion:TreeGridTemplateColumn> 
</syncfusion:SfTreeGrid.Columns> 

C#: 
class StringToImageConverter : IValueConverter 
{ 
    public object Convert(object value, Type targetType, object parameter, string language) 
    { 
        Image image = value as Image; 
        return image.Source; 
    } 
 
    public object ConvertBack(object value, Type targetType, object parameter, string language) 
    { 
        throw new NotImplementedException(); 
    } 
} 


 


Please get back to us if you need any further assistance on this.  

Arulraj A 


Loader.
Live Chat Icon For mobile
Up arrow icon