FlexGrid in Angular 8 how to bind itemsSource to columns instead of rows

FlexGrid in Angular 8 how to bind itemsSource to columns instead of rows

Posted by: sct999.1 on 10 September 2019, 2:52 am EST

• 

  sct999.1

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 10 September 2019, 2:52 am EST

  Hello, I’m trying the FlexGrid component, however the app where I want to use it needs to display data in a column-per-object manner instead of row-per-object

  Is there a way to bind the itemsSource property to create columns instead of rows?

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 10 September 2019, 4:31 pm EST

  Hi,

  I am sorry but I was not able to understand your use case properly. Could you please provide me with a sample of your data source so that I can investigate further?

  Regards,
  
  Ashwin

• 

  sct999.1

  • Post Options:
  • Link
    Copy

  Posted 11 September 2019, 1:29 am EST - Updated 3 October 2022, 10:25 am EST

  Hello, for this use case, the data is fairly simple

  
  [{
      "name": "John Doe",
      "age": 36
  }, {
      "name": "Julius Caesar",
      "age": 55 
  }]
  
  

  Based on this example https://www.grapecity.com/wijmo/demos/Grid/Data-binding/Basics/angular and using the data above as the itemsSource, a grid like this will be generated:

  

  In the grid above there is one object per row and each property is bound to a certain column: The Name column is bound to the name property and the Age column is bound to the age property.

  Now, I’d like to know if there is a way for generating a grid that assigns a column per-object, instead of a row per-object, something like this:

  

  In the grid above, the first object is would be assigned to the ‘A’ column and the second object would be assigned to the ‘B’ column.
  
  Also, the name property would be bound to the name row and the age property of each object would be bound to the age row.

  I know there is an unbound mode for generating arbitrary rows and columns, but I’d like to know if there is a way for generating a grid like the one in the second image and being able to use data binding.

  Thanks for your attention

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 11 September 2019, 3:39 pm EST

  Hi,

  As per my understanding, you wish to have a transposed FlexGrid. If this is your requirement, you will need to transpose the data source and assign it to the FlexGrid. Please refer to the sample below:

  https://stackblitz.com/edit/angular-qtn78j

  If you will edit the transposed, the original itemsSource will be updated automatically.

  ~regards

• 

  sct999.1

  • Post Options:
  • Link
    Copy

  Posted 12 September 2019, 12:32 am EST

  That’s right, I’ll take a look at your sample

  Thank you!

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 12 September 2019, 2:13 pm EST

  Hi,

  Yes, please take your time in exploring the sample and let me if know if you have any queries.

  ~regards