This is a migrated thread and some comments may be shown as answers.

Customized TreeView with different connecting lines and on-demand expansion feature

6 Answers 169 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Chandra Sekhar
Top achievements
Rank 1
Chandra Sekhar asked on 24 Oct 2017, 02:56 PM

Hi,

I am working on some requirement where I have hierarchical data(attached sample XML) to represent in a tree view(almost like tree view, attached sample) with customizing lines between the nodes and on-demand expansion/collapse features. I am new to WPF UI, please help me kick start my implementation by providing a sample project with the attached samples as reference. Thanks in advance. 

<root>
      <system name="a" id="1" img-src="">
             <sub-system name="a1" label="a1" id="101">
                        <component name="a1.1" label="a1.1" id="1100">
                               <test name="a1.1.1" label="a1.1.1" id="1101" />
                               <test name="a1.1.2" label="a1.1.2" id="1102" />
                               <test name="a1.1.3" label="a1.1.3" id="1103" />
                                <test name="a1.1.4" label="a1.1.4" id="1104" />
                               <test name="a1.1.5" label="a1.1.5" id="1105" />
                               <test name="a1.1.6" label="a1.1.6" id="1106" />
                         </component>
                          <component name="a1.2" label="a1.2" id="1200">
                                <test name="a1.2.1" label="a1.2.1" id="1201" />
                                <test name="a1.2.2" label="a1.2.2" id="1202" />
                                <test name="a1.2.3" label="a1.2.3" id="1203" />
                                <test name="a1.2.4" label="a1.2.4" id="1204" />
                                 <test name="a1.2.5" label="a1.2.5" id="1205" />
                          </component>
                     </sub-system>
                    <sub-system name="a2" label="a2" id="201">
                            <component name="a2.1" label="a2.1" id="2100">
                                   <test name="a2.1.1" label="a2.1.1" id="2101" />
                            </component>
                            <component name="a2.2" label="a2.2" id="2200">
                                     <test name="a2.2.1" label="a2.2.1" id="2201" />
                            </component>
                            <component name="a2.3" label="a2.3" id="2300">
                                     <test name="a2.3.1" label="a2.3.1" id="2301" />
                            </component>
                            <component name="a2.4" label="a2.4" id="2400">
                                     <test name="a2.4.1" label="a2.4.1" id="2401" />
                                     <test name="a2.4.2" label="a2.4.2" id="2401" />
                                     <test name="a2.4.3" label="a2.4.3" id="2401" />
                                     <test name="a2.4.4" label="a2.4.4" id="2401" />
                             </component>
                      </sub-system>
                      <sub-system name="a3" label="a3" id="301">
                             <component name="a3.1" label="a3.1" id="3100">
                                     <test name="a3.1.1" label="a3.1.1" id="3101" />
                             </component>
                             <component name="a3.2" label="a3.2" id="3200">
                                     <test name="a3.2.1" label="a3.2.1" id="3201" />
                             </component>
                      </sub-system>

               </system>
          </root>

 

 

Thanks,

Cha

6 Answers, 1 is accepted

Sort by
0
Dinko | Tech Support Engineer
Telerik team
answered on 25 Oct 2017, 02:47 PM
Hello Chandra Sekhar,

Thank you for contacting us.

Looking at the attached picture I think the RadDiagram framework will fit better in your scenario. The example in the attached picture looks very similar to the OrgChart example of the RadDiagram. You can take a look at this example in our WPF Controls Demo desktop application. Also, you can take a look at the OrgChart example in our GitHub repository.

Regards,
Dinko
Progress Telerik
Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which you to write beautiful native mobile apps using a single shared C# codebase.
0
Chandra Sekhar
Top achievements
Rank 1
answered on 25 Oct 2017, 08:25 PM

Hi Dinko,

I appreciate your help for reviewing my question and providing inputs. However, I couldn't able to compile and run the whole example(s) solution downloaded from the Github repository. I was able to resolve most of the referencing issues but still close to 33 compilation errors are coming. If you could prepare a small sample application which at least take 2 levels of my above sample data and show/render as a horizontal tree(like the attached sample in the actual post), that will be really helpful for me.

Thanks,

Cha.

0
Dinko | Tech Support Engineer
Telerik team
answered on 27 Oct 2017, 10:30 AM
Hi Chandra Sekhar,

Attached to this reply you can find the OrgChart example project. You can download the project and just referenced the required assemblies.

Regards,
Dinko
Progress Telerik
Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which you to write beautiful native mobile apps using a single shared C# codebase.
0
Dinko | Tech Support Engineer
Telerik team
answered on 27 Oct 2017, 10:31 AM
Hi Chandra Sekhar,

Here is the project.

Regards,
Dinko
Progress Telerik
Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which you to write beautiful native mobile apps using a single shared C# codebase.
0
Chandra Sekhar
Top achievements
Rank 1
answered on 31 Oct 2017, 06:45 PM

Hi Dinko,

Thanks for the sample. Really appreciate your help.

I am not able to understand the underlying drawing logic implemented in the sample in order to create same kind of result with my data. Also I need to have the ellipses as nodes. I would really appreciate if you can provide a small sample which generates the similar UI as posted by me earlier with the data. Thanks in advance.

Regards,

Cha.

 

0
Dinko | Tech Support Engineer
Telerik team
answered on 03 Nov 2017, 01:24 PM
Hi Chandra Sekhar,

I have prepared very sample MVVM project based on the picture provided in your first reply. I am using the code in the Use MVVM in RadDiagram help article in our documentation.

For achieving your final behavior you can get familiar with RadDiagram control using our documentation and SDK examples in our GitHub repository. Check the following articles which would be good starting point.
Regards,
Dinko
Progress Telerik
Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which you to write beautiful native mobile apps using a single shared C# codebase.
Tags
TreeView
Asked by
Chandra Sekhar
Top achievements
Rank 1
Answers by
Dinko | Tech Support Engineer
Telerik team
Chandra Sekhar
Top achievements
Rank 1
Share this question
or