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

7 posts, 0 answers
  1. Chandra Sekhar
    Chandra Sekhar avatar
    15 posts
    Member since:
    Sep 2016

    Posted 24 Oct 2017 Link to this post

    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

  2. Dinko
    Admin
    Dinko avatar
    644 posts

    Posted 25 Oct 2017 Link to this post

    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 allow you to write beautiful native mobile apps using a single shared C# codebase.
  3. Chandra Sekhar
    Chandra Sekhar avatar
    15 posts
    Member since:
    Sep 2016

    Posted 25 Oct 2017 in reply to Dinko Link to this post

    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.

  4. Dinko
    Admin
    Dinko avatar
    644 posts

    Posted 27 Oct 2017 Link to this post

    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 allow you to write beautiful native mobile apps using a single shared C# codebase.
  5. Dinko
    Admin
    Dinko avatar
    644 posts

    Posted 27 Oct 2017 Link to this post

    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 allow you to write beautiful native mobile apps using a single shared C# codebase.
  6. Chandra Sekhar
    Chandra Sekhar avatar
    15 posts
    Member since:
    Sep 2016

    Posted 31 Oct 2017 in reply to Chandra Sekhar Link to this post

    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.

     

  7. Dinko
    Admin
    Dinko avatar
    644 posts

    Posted 03 Nov 2017 Link to this post

    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 allow you to write beautiful native mobile apps using a single shared C# codebase.
Back to Top