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

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

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.

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

Hi Chandra Sekhar,

Here is the project.

Regards,
Dinko
Progress Telerik

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.

 

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.

• Getting Started
• DataBinding
• Shapes
• Connections
• ContainerShapes
• DiagramExtensions ViewModels
• Routing
  

Regards,
Dinko
Progress Telerik