How I can Bring the Row grouped Structure in Wijmo flexgrid in angular 4?

How I can Bring the Row grouped Structure in Wijmo flexgrid in angular 4?

Posted by: pritam1995kumar on 2 August 2018, 12:36 am EST

• 

  pritam1995kumar

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 2 August 2018, 12:36 am EST

  I want to bind the below data to flexgrid which I am not able to bing .

  If i will give :

  
  <wj-flex-grid
  itemsource = "data">
  </wj-flex-grid
  
  

  It’s only binding the numberofmobiles column only.

  for refrence to the desired output refer to the attached zip

  var data = [
  
  {
  
  “NumberOfMobiles”: “3”,
  
  “Mobiless”: [
  
  {
  
  “Price”: 939,
  
  “Mobiles”: “Samsung S9”
  
  },
  
  {
  
  “Price”: 458,
  
  “Mobiles”: “Apple x”
  
  },
  
  {
  
  “Price”: 366,
  
  “Mobiles”: “mi 8”
  
  },
  
  {
  
  “Price”: 1500,
  
  “Mobiles”: “oneplus 6”
  
  }
  
  ]
  
  },
  
  {
  
  “NumberOfMobiles”: “4”,
  
  “Mobiless”: [
  
  {
  
  “Price”: 883,
  
  “Mobiles”: “Samsung S9”
  
  },
  
  {
  
  “Price”: 449,
  
  “Mobiles”: “Apple x”
  
  },
  
  {
  
  “Price”: 329,
  
  “Mobiles”: “mi 8”
  
  },
  
  {
  
  “Price”: 1500,
  
  “Mobiles”: “oneplus 6”
  
  }
  
  ]
  
  },
  
  {
  
  “NumberOfMobiles”: “5”,
  
  “Mobiless”: [
  
  {
  
  “Price”: 893,
  
  “Mobiles”: “Samsung S9”
  
  },
  
  {
  
  “Price”: 450,
  
  “Mobiles”: “Apple x”
  
  },
  
  {
  
  “Price”: 337,
  
  “Mobiles”: “mi 8”
  
  },
  
  {
  
  “Price”: 1500,
  
  “Mobiles”: “oneplus 6”
  
  }
  
  ]
  
  },
  
  {
  
  “NumberOfMobiles”: “6”,
  
  “Mobiless”: [
  
  {
  
  “Price”: 880,
  
  “Mobiles”: “Samsung S9”
  
  },
  
  {
  
  “Price”: 446,
  
  “Mobiles”: “Apple x”
  
  },
  
  {
  
  “Price”: 327,
  
  “Mobiles”: “mi 8”
  
  },
  
  {
  
  “Price”: 1500,
  
  “Mobiles”: “oneplus 6”
  
  }
  
  ]
  
  }
  
  ];

  Sample table.zip

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 3 August 2018, 7:02 am EST

  Hi,
  
  The FlexGrid works on flatten data structure of Objects.
  
  For e.g
  
  Valid Data (1)

  let data =[{id:1,country:"US",sales:789,active:true},....]
  

  Valid data (2)

  let data=[{id:1, address:{country:"US",city:"Pitsburg"},sales:789,active:true}]
  

  Now, as your data structure, you may opt one of the following:

  1. Do flatter your source and remove hierarchy i.e convert source data to form:-

  data=[
    {"NumberOfMobiles":3, "Price":800, "Mobile":"Apple X"},
    {"NumberOfMobiles":5, "Price":900, "Mobile":"Oneplus 6"},
  ]
  

  PS: FlexGrid works with this type of data source i.e array of objects.
  
  This is the recommended approach.

  2. Use childItemsPath to set the path for child items. This will display the data in a hierarchical form. Above mentioned sample also showcases the use of childItemsPath.
     
     Please refer to the “Trees and Hierarchical Data” section for following demo sample:
     
     https://demos.wijmo.com/5/angular2/FlexGridIntro/FlexGridIntro/

  3. Use wjFlexGridDetail to display grid data associated with a row.
     
     Please refer to this sample for wjFlexGridDetail:-
     
     https://demos.wijmo.com/5/Angular2/RowDetails/RowDetails/

  Please let us know if you any further queries.

  ~Manish

• 

  pritam1995kumar

  • Post Options:
  • Link
    Copy

  Posted 22 August 2018, 4:01 pm EST

  hi manish ,

  thanks for the suggestion , but i used the column group provider using mergemanager and did it.