• State Not Answered
  • Replies 6 replies
  • Subscribers 8 subscribers
  • Views 6466 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
    Certified Lead Developer
     in reply to hiteshd

    Crazy thought here.  You could get your dataset, split that into arrays for each field, such as datasubset.department as 1 array, datasubset.isAvailingTransport the next, and so on, until you have a separate array of data for each.

    Then, make a series of grids, make the column names null for each one, make the labels for each grid display ADJACENT.  Then you'll need to use the forEach function to make your columns equal to the number of inputs you have.

    This is just a quick POC that I did because I was intrigued by your question.   It doesn't look fully pretty.  You do have blank leftovers where it expects the columns to be displayed.  It's not as nice as an optional vertical columns addition to the grid components would be, but it sort of gets the job done.

     

  • 0 in reply to Dave Lewis


    Hey David,

    Thank you for the POC and suggestion. I totally agree that look and feel of the UI will not be that good because of Blank spaces but It might suffice one of our scenarios.

    Hoping if we can have this kind of functionality Out Of The Box in upcoming releases.

    Thanks
Reply Children
No Data

© 2024 Appian. All rights reserved.