1. Home
  2. Forum
  3. Angular - EJ 2
  4. Compact mobile Visualisation of rows

Compact mobile Visualisation of rows

Hello,

we are currently improving the user experience of our application on mobile devices. We have already found your article, but are thinking of a different approach:
We would like to display each datarow on multiple lines, so that values for different columns appear side-by-side as well as beneath each other (similar to a flex-Layout with wrap). This way we increase the visible amount of data per row.

Can this layout be archieved with your grid?

3 Replies 1 reply marked as answer
MS Manivel Sellamuthu Syncfusion Team July 2, 2020 09:15 AM UTC

Hi David, 

Greetings from Syncfusion support. 

For your requirement, we suggest you to use text wrapping feature of the Grid., which can be enabled by allowTextWrap property of the Grid. Please refer the below documentation for information. 


Please let us know, if you need further assistance. 

Regards, 
Manivel 


DH David Hülsmeier July 2, 2020 09:39 AM UTC

Hello,

thanks for your reply.
This is not quite what we are trying to archieve: Instead of wrapping within a cell we would like to wrap cells themselfes.
Assuming a grid with columns 'A', 'B', 'C', 'D' and a row with values '1', '2', '3', '4' we would like to display something like this:

AB
CD
12
34



MS Manivel Sellamuthu Syncfusion Team July 3, 2020 08:45 AM UTC

Hi David, 

Thanks for your update. 

We would like to inform you that Our Grid renders the table based on the data Source key and values. Keys are rendered as columns and values are rendered as rows. By default columns are generated based on the column model defined for the Grid or the columns will be auto generated from the Grid. Please find the below documentation link for information. 





Please let us know, if you need further assistance. 

Regards, 
Manivel 


Marked as answer
Loader.
Up arrow icon