Question

I have some complex data structure and am looking for a way to present them in a user friendly manner:

Data Strubture:

A hasMany B 
B hasMany C (columns: C1, C2)
B hasMany D (columns: D1, D2, D3, D4)

so ideally the final display should look like the following, where the first two levels (A and B) are expandable tree nodes, and on the leaves (C and D) are different grids.

(The TreeGrid example in the doc looks similar but the leaves all have the same columns which is different from my use case.)

Any better solution?

-A
  -B1
    -C (grid)
      C1    C2 (Header)
      c11   c12
      c21   c22
    -D (grid)
      D1    D2    D3    D4 (Header)
      d11   d12   d13   d14
      d21   d22   d23   d24
      d31   d32   d33   d34
  -B2
    -C (grid)
      C1    C2 (Header)
      c11   c12
      c21   c22
    -D (grid)
      D1    D2    D3    D4 (Header)
      d11   d12   d13   d14
      d21   d22   d23   d24
      d31   d32   d33   d34
  -B3
  ....

Answer 1

Can’t be done I’m afraid – you are trying to eat the cake and leave it complete… you can’t ask a single grid component to have different columns per record type.

If your display involves different amount of columns per records, you should consider using something other than treegrid.

If I was you I’d have a tree containing the As and Bs on an east panel; when the user clicks on a B node, two grids that exist on the center pane will display the related records.