• State Not Answered
  • Replies 6 replies
  • Subscribers 9 subscribers
  • Views 6444 views
  • Users 0 members are here
Related Discussions
Home » Discussions » User Interface

Grid Field: Display Grid Columns Vertically

PGarg

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
    Hi Prakhar,

    Another approach I would suggest here is to display a limited number of columns upfront and allow user to select any additional columns if they wish to see. As per my experience, any user may not have interest in seeing all the 20 columns at one shot and they may want to see specific columns upfront with an option to expand the view further.

    Example:
    1) You can have a section with all the 20 fields to be displayed as checkbox, with the default ones as selected
    2) Have a initial grid which displays these default columns
    3) Once user selects a new field to be displayed, you can show the additional column in the grid.

    I believe this will give a better look and a cleaner approach to implementation with the user having the control on what they want to see.

    Thanks.
    Hitesh
  • 0 in reply to hiteshd


    Hi Hitesh,

    As mentioned by you it is correct, as per design I did the same displaying only required columns like Name, Employee Code Etc. and providing link to show rest details in below section.

    But in our case all the columns are relevant because the same kind of grid has to be created for some calculations between 20-25 columns of the grid and all should be visible at the same time as if there are 4 rows some AND & OR logic has to be applied and user doesn't want to click the link check the details individually.

    Thanks
Reply
  • 0 in reply to hiteshd


    Hi Hitesh,

    As mentioned by you it is correct, as per design I did the same displaying only required columns like Name, Employee Code Etc. and providing link to show rest details in below section.

    But in our case all the columns are relevant because the same kind of grid has to be created for some calculations between 20-25 columns of the grid and all should be visible at the same time as if there are 4 rows some AND & OR logic has to be applied and user doesn't want to click the link check the details individually.

    Thanks
Children
No Data

© 2024 Appian. All rights reserved.