Tree grid not showing all the nodes properly with hetrogenous data

Tree grid not showing all the nodes properly with hetrogenous data

Posted by: nnaina1997 on 13 October 2023, 3:24 am EST

• 

  nnaina1997

  • Post Options:
  • Link
    Copy

  Posted 13 October 2023, 3:24 am EST - Updated 13 October 2023, 3:31 am EST

  HI All,
  
  i am using [childItemsPath]=“[‘children’,‘products’]” but its not showing all the data properly.

   getWorkers() {
          return [{
              name: 'Jack Smith',
              children: [{
                  name: 'naina',
                  children: [{
                      name: 'naina1',
                      children: [{
                          name: 'naina2',
                          children: [{
                              name: 'naina3',
                              children: [{
                                  name: 'naina4'
                              }],
                              products: [{
                                  name: 'hello4'
                              }]
                          }],
                          products: [{
                              name: 'hello'
                          }]
                      }],
                      products: [{
                          name: 'hello'
                      }]
                  }],
                  products: [{
                      name: 'hello'
                  }]
              }],
              products: [{
                  name: 'hello'
              }]
          }]
      }

  
  
  

  Should show children node if children present and if products array is there then show below the children node

• 

  anirudh.verma

  

  • Post Options:
  • Link
    Copy

  Posted 15 October 2023, 9:48 pm EST

  Hi,
  
  As per my understanding, you need to display all the nested ‘children’ present in the data. You may do so by simply passing ‘children’ in the childItemsPath property. Please refer to this code snippet for reference:

  let grid = new FlexGrid('#gridHost', {
    autoGenerateColumns: false,
    itemsSource: getData(),
   childItemsPath: 'children',
    columns: [
      { header: 'Name', binding: 'name', width: 210 },
      { header: 'Products', binding: 'products[0].name' },
    ],
  });

  Or if you want to provide it in an array form then you need to pass an array that contains the ‘children’ occurrences as per the hierarchy of the data. Please refer to this code snippet for reference:
  
  childItemsPath: [‘children’, ‘children’, ‘children’, ‘children’, ‘children’],

  To provide the details of the products with the children please provide the column definition respectively where each column represents one item of the products’ array. Please refer to this sample for reference: https://stackblitz.com/edit/js-aq3tx6

  Also, if the requirement is to show two different nodes in the FlexGrid where one node represents children items and another represents the product items for the same level then it will not be possible to display that using this structure of data with TreeGrid.
  
  For that, you need to modify the provided data as shown in this sample: https://stackblitz.com/edit/js-exa2rn

  Regards
  
  Anirudh

• 

  nnaina1997

  • Post Options:
  • Link
    Copy

  Posted 15 October 2023, 10:29 pm EST - Updated 15 October 2023, 11:07 pm EST

  HI Anirudh
  
  The requirement is like the below structure

  wijmo Header Columns like- productID, ProductNAme,ProductDesc etc
  
  ->main category-Name(TreeNode)
  
  –>children(TreeNode)
  
  —>products grid if the product array is there.(Wijmo Grid structure

   getWorkers() {
          return [{
              name: 'Jack Smith',
              children: [{
                  name: 'Main Category',
                  children: [{
                      name: 'subCategory1',
                      children: [{
                          name: 'subCategory2',
                          children: [{
                              name: 'subCategory3',
                              children: [{
                                  name: 'subCategory4'
                              }],
                              products: [{
                                  productName: 'hello4'
                              }]
                          }],
                          products: [{
                              productName: 'hello'
                          }]
                      }],
                      products: [{
                          productName: 'hello'
                      }]
                  }],
                  products: [{
                      productName: 'hello'
                  }]
              }],
              products: [{
                  productName: 'hello'
              }]
          }]
      }

  Should show children node if children present and if products array is there then show below the children node) Like This
  
  

• 

  anirudh.verma

  

  • Post Options:
  • Link
    Copy

  Posted 16 October 2023, 10:55 pm EST

  Hi,
  
  We are sorry for the inconvenience but, it is not possible to achieve this layout with the provided data. To achieve the desired layout please modify the structure of the data.
  
  It is required because the childItemsPath will look for the children with the same object name (only ‘children’ OR only ‘products’ in the given data hierarchy). It will not create different nodes for different arrays present on the same level. For FlexGrid to generate rows for two arrays present at the same level, the arrays should be present as the properties of different objects in the same parent array where each array should have same name. When an array is provided then it will look for the names in that parent array only. For example, if we provide [‘obj1’, ‘obj2’] to the childItemsPath property then, it will look for an object named ‘obj1’ in the first data item of the data array. Then in the ‘obj1’ object, it will look for the ‘obj2’ array present in each data item. The data in this case should be:

  let data = [
      {
        name: 'Main category',
        obj1: [
          {
            name: 'children',
            obj2: [
              {
                name: 'children inside checks - 1',
              },
              {
                name: 'children inside checks - 2',
              },
              {
                name: 'children inside checks - 3',
              },
            ],
          },
          {
            name: 'products',
            obj2: [
              {
                name: 'products inside checks - 1',
              },
              {
                name: 'products inside checks - 2',
              },
              {
                name: 'products inside checks - 3',
              },
            ],
          },
        ],
      },
    ]

  The below-shared sample modifies the data to achieve the desired layout. Please refer to this sample for reference: https://stackblitz.com/edit/js-zrnkxj?file=data.js

  Please let us know if you have any further queries.

  Regards
  
  Anirudh