How to use TreeList with complicated data structure

1 Answer 53 Views
TreeList
Steven
Top achievements
Rank 1
Steven asked on 03 Nov 2023, 05:42 PM
Hello, I tried to use the Kendo TreeList component to render the treeview. The problem is how we can handle subItemsField if the data structure is complicated.

So, for example:
// my data
const blocks = [
 {
      name: 'block1',
      cost: 90,
      failures: [
        {
           ......
           effects: [{}, ....],
           causes: [{
                 .....,
                actions: [],
                controls: [],
           }, .....],
        },
        {
          .....
              effects: [{}, ....],
              causes: [{
                   .....,
                  actions: [],
                  controls: [],
              }, .....],
        }
      ]
  }
]

// kendo data
const a = [
   {
       subITem: [{
               .....
               subITem: [{}, {}, ...]
        }]
   }
]

If the data structure is like kendo data, then, it is easy to use subItemsField property to render treeview via treelist component.
But if it's not, then, how we can handle it? Let me get the answer asap.

I appreciate your help.

Regards

1 Answer, 1 is accepted

Sort by
1
Konstantin Dikov
Telerik team
answered on 07 Nov 2023, 07:41 AM

Hello Steven,

The TreeList expects tree structure with specific field for the child nodes, so if you want to use the data in question within the TreeList, you will have to map it accordingly and provide an unified field for the sub items.

Another thing that we can suggest, which allows having different structures for each level is the Master-Detail Grids implementation, where each level binds to a different Grid with different structure:

I have noticed that you have two collections within the failures array and having a Master-Detail Grids implementation will allow you to display two Grids for the "effects" and "causes" for example.

Note that you can nest as many "detail" Grids.

Hope this helps.

 

Regards,
Konstantin Dikov
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources!

Tags
TreeList
Asked by
Steven
Top achievements
Rank 1
Answers by
Konstantin Dikov
Telerik team
Share this question
or