Custom TreeView - UWP

[Rohith Kunchamwar]

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

[Jagadeesan Pichaimuthu]

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. 

 

Link: https://help.syncfusion.com/uwp/sfaccordion/overview  

 

Let us know whether this helps also if you need any further assistance on this. 

 

Regards, 

Jagadeesan 

[Rohith Kunchamwar]

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.

[Jagadeesan Pichaimuthu]

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 12^th, 2019. 

 

We appreciate your patience until then.  

 

Regards, 

Jagadeesan 

[Subashini Mahendran]

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: 

 

 

 

Sample: http://www.syncfusion.com/downloads/support/directtrac/142978/ze/SfAccordion_sample-164984451.zip  

 

And, please let us know if you need any further assistance on this. 

 

Regards, 

Subashini M. 

[Rohith Kunchamwar]

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.

https://help.syncfusion.com/xamarin-ios/sftreeview/overview

Thanks,

Saravana Pandian M.

[Jagadeesan Pichaimuthu]

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 14^th 2019. 

We appreciate your patience until then. 

Regards, 

Jagadeesan

[Shobika Palani]

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 

https://github.com/syncfusion/uwp-demos/tree/master/SfTreeGrid   

Can you please confirm us whether this meets your requirement? 

Regards, 

Shobika. 

[Rohith Kunchamwar]

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.

[Jagadeesan Pichaimuthu]

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 20^th March,2019. 

We will appreciate your patience until then. 

Regards, 

Jagadeesan 

[Jagadeesan Pichaimuthu]

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 

[Arulraj A]

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(); 

    } 

} 

 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/TreeGrid_UWP2102051219.zip 

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

Regards, 

Arulraj A