1. Home
  2. Forum
  3. Angular - EJ 2
  4. Cannot view the tree for a JSON hierarchical structure

Cannot view the tree for a JSON hierarchical structure

Hello.
I'm using the 'Treeview' component for the first time.
I have to view the gerarchicha structure provided by a server, in JSON format (which I have provided in Attach)

Unfortunately I can't view it.
Could you give me an example of how to do it?
Also I should have the possibility to be able to select the real nodes via check-boxes.

Thanks for the help you want to give me

Attachment: JSONstructure_1dd6214f.7z

5 Replies 1 reply marked as answer
SM Shalini Maragathavel Syncfusion Team June 18, 2021 01:04 PM UTC

Hi Alfredo,  

Greetings from Syncfusion Support.

Query#1: In JSON format (which I have provided in Attach). Unfortunately I can't view it. Could you give me an example of how to do it? 

Based on your query, we have rendered a TreeView component using your Hierarchical JSON data in the sample. The Hierarchial JSON data has to be set in the dataSource field, and map all the field members with corresponding keys from the hierarchical data to field property. Please refer to the below code snippet for your reference, 

export class AppComponent { 
  // Hierarchical data source for TreeView component 
  public continents: { [key: string]: Object }[] = [ 
    { 
      Descrizione: 'GruppiDiritti', 
      IdApp: 1, 
      Moduli: [ 
        { 
          Descrizione: 'GruppiDiritti', 
          IdModulo: 1, 
          IdApp: 10, 
          Funzioni: [{ Descrizione: 'Log', IdFunzione: 1, Id: 1 }] 
        } 
      ] 
    }, 
    
    { 
      Descrizione: 'Sms', 
      IdApp: 4, 
      Moduli: [ 
        { 
          Descrizione: 'Gestione Sms', 
          IdModulo: 1, 
          IdApp: 70, 
          Funzioni: [{ Descrizione: 'Log', IdFunzione: 1, Id: 88 }] 
        } 
      ] 
    } 
  ]; 
  public fields: object = { 
    dataSource: this.continents, 
    id: 'IdApp', 
    text: 'Descrizione', 
    child: 'Moduli' 
  }; 
  public showCheckBox: boolean = true; 
  public checkedNodes: string[] = ['70', '1', '88']; 
} 

Query#2: I should have the possibility to be able to select the real nodes via check-boxes.

Based on your query, we suspect that you need to select the nodes of the TreeView component using checkbox. To achieve your requirement, we suggest you to use the checkbox selection functionality of TreeView. This can be enabled by the showCheckBox property and required nodes can be programmatically checked through checkedNodes property.  
Please refer to the below code example for your reference, 
app.component.html

 <ejs-treeview id="tree" [showCheckBox]='showCheckBox'   [checkedNodes]='checkedNodes' 
                    [fields]='fields'> 
                </ejs-treeview>
-----------------------------------------------------------------
app.component.ts

export class AppComponent { 
  public showCheckBox: boolean = true; 
  public checkedNodes: string[] = ['70', '1', '88']; 
} 

Please find the below sample for your reference.

Sample: https://stackblitz.com/edit/angular-cdw8uv?file=app.component.html 

Please check with the below links to more about TreeView Component.  



Please get back to us if you need further assistance.  

Regards,  
Shalini M. 


AL Alfredo June 18, 2021 01:33 PM UTC

Hello.
First of all, thank you for the time you have spent on me.
I took a look at the information you gave me. Unfortunately I noticed that the tree that is displayed has only two levels of nesting, while the JSON structure provides 3.
In fact, in addition to the main level (consisting of 'GruppoDiritti', 'WebSuite', 'ConfigWebSuite' and 'Sms'), the second level is also displayed, thanks to the information provided in the public fields field (child: 'Modules').
In reality the structure has a third level that should be displayed (the 'Functions' level).
How can I also view the 3rd level ('Functions')?

Thanks in advance

SM Shalini Maragathavel Syncfusion Team June 21, 2021 08:45 AM UTC

Hi Alfredo,  

Sorry for the inconvenience.

We checked your query and would like to let you know that nested levels will be rendered based on the field value mapped in the child property. So to render the child node in the third level, we suggest you to use the same key name given in the child property(i.e, in your JSON datasource you have given Moduli as the second level child node and Funzioni as the third level child node) for the third level child node values. Please refer the below code snippet to be modified with your JSON data source. 

export class AppComponent { 
  // Hierarchical data source for TreeView component 
  public continents: { [key: string]: Object }[] = [ 
    { 
      Descrizione: 'GruppiDiritti', 
      IdApp: 1, 
      Moduli: [ 
        { 
          Descrizione: 'GruppiDiritti', 
          IdModulo: 1, 
          IdApp: 10, 
          Moduli: [{ Descrizione: 'Log', IdApp: 1, Id: 1 }] 
        } 
      ] 
    }, 
    { 
      Descrizione: 'WebSuite', 
      IdApp: 2, 
      Moduli: [ 
        { 
          Descrizione: 'Collaboratori', 
          IdApp: 11, 
          IdModulo: 3, 
          Moduli: [ 
            { Descrizione: 'Log', IdApp: 98, Id: 11 } ] 
        }, 
        { 
          Descrizione: 'Clienti', 
          IdModulo: 4, 
          IdApp: 11, 
          Moduli: [ 
            { Descrizione: 'Log', IdApp: 1, Id: 23 } 
          ] 
        }, 
      ] 
    }, 
    { 
      Descrizione: 'Sms', 
      IdApp: 4, 
      Moduli: [ 
        { 
          Descrizione: 'Gestione Sms', 
          IdModulo: 1, 
          IdApp: 70, 
          Moduli: [{ Descrizione: 'Log', IdApp: 1, Id: 88 }] 
        } 
      ] 
    } 
  ]; 
  public fields: object = { 
    dataSource: this.continents, 
    id: 'IdApp', 
    text: 'Descrizione', 
    child: 'Moduli' 
  }; 
} 

Please find the below sample for your reference.

Sample: https://stackblitz.com/edit/treeview-json-data?file=app.component.ts 
Please get back to us if you need further assistance.  

Regards,  
Shalini M. 


Marked as answer
AL Alfredo June 21, 2021 12:05 PM UTC

OK!

Thanks for your assistance and  informations.


Regards,

Alfredo


KR Keerthana Rajendran Syncfusion Team June 22, 2021 06:09 AM UTC

Hi Alfredo,   
 
Most welcome. We are glad to hear that the provided details helped you. Please get back to us if you need further assistance. We will be happy to assist you.  
 
Regards, 
Keerthana R. 


Loader.
Up arrow icon