FlexGrid. Make groups from JSON

FlexGrid. Make groups from JSON

Posted by: sicrum on 9 July 2019, 1:21 am EST

• 

  sicrum

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 9 July 2019, 1:21 am EST

  Hello

  I have a JSON that contains grouped data with aggregated values, like

  
  [
    { 
      Name : "Group1", 
      Prop1 : 10,    <-------aggregated value calculated on the server side
      Prop2: 20,   <-------aggregated value calculated on the server side
      Rows: [ 
         { Name: "Group1",  Prop1 : 4, Prop2: 11, Prop3: "ABC"  },
         { Name: "Group1",  Prop1 : 16, Prop2: 9, Prop3: "XYZ"  }
      ]
    }, 
    {
       Name : "Group2", 
       ...
    
    }  
    ...
    ...
  ]
  	
  
  

  Is there any way to generate groups from this json?
  
  So, what I want is to have is a flexgrid that has:

  1. Columns: Name, Prop1, Prop2, Prop3
  2. Collapsable Group1 with aggregated Prop1, Prop2 and Rows property as children data
  3. Collapsable Group2, etc…

  Thanks

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 9 July 2019, 7:19 am EST

  Hi,

  You may use the childItemsPath property of FlexGrid to create groups using the Rows property of the data source. Please refer to the code snippet below:

  var grid = new wjcGrid.FlexGrid('#grid', {
    itemsSource: data,
    autoGenerateColumns: false,
    columns: [
      { header: 'Name', binding: 'Name' },
      { header: 'Prop1', binding: 'Prop1' },
      { header: 'Prop2', binding: 'Prop2' },
      { header: 'Prop3', binding: 'Prop3' },
    ],
    childItemsPath: 'Rows'
  });
  

  You may also refer to the sample below:

  https://stackblitz.com/edit/js-aqqtnz

• 

  sicrum

  • Post Options:
  • Link
    Copy

  Posted 9 July 2019, 9:34 am EST

  Exactly what I need. Thanks