Grid Field: Display Grid Columns Vertically

Hi,

We have a Grid where we have 20 Columns to display, Now using Out of box Grid Field is not looking that pleasing on the UI it leads to a Scroll bar and even due to some large Column Names overall UI look and feel is not appreciated.

Any suggestions on how to design a more appealing UI.

Can we make a Grid with Columns vertically and data for each column appear horizontally. For e.g. In Below grid Headers are (Employee Name, Department Etc. ) and corresponding values on the similar lines we have data to be displayed for 20 columns

 

Employee Name UL 1 UL 2 UL 3 UL 4
Department x x x  
Is Availing Transport? Y Y Y Y
Address Line 1 Nm Nm Nm Nm
Address Line 2 N N N N
City N N N N
State N N Y Y

  Discussion posts and replies are publicly visible

Parents
  • 0
    Certified Lead Developer

    Only way you can do it maybe is by using a!gridLayout() as a!gridLayout() uses rows to display data. You can make the fields readOnly. So, although it is an editable grid, it will be like displaying the values.
    You also have to append your dictionary to include Employee Name, Department,,, all other column names with you dataset.
    Also, the header cells will have to remain blank.
    It won't be a best practice but can be somewhat achieved like this.

Reply
  • 0
    Certified Lead Developer

    Only way you can do it maybe is by using a!gridLayout() as a!gridLayout() uses rows to display data. You can make the fields readOnly. So, although it is an editable grid, it will be like displaying the values.
    You also have to append your dictionary to include Employee Name, Department,,, all other column names with you dataset.
    Also, the header cells will have to remain blank.
    It won't be a best practice but can be somewhat achieved like this.

Children