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

  • 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?
  • Replied 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
  • Replied 11 September 2019, 1:29 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
  • Replied 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
  • Replied 12 September 2019, 12:32 am EST

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

    Thank you!
  • Replied 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
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels