Balsamiq Community Discussion

Help working with "really long" Data Grids

Hi folks, working on a project to prototype some WebApp UI screens containing DataGrids and I’m trying to work with your supplied DataGrid component.

Unfortunately our data grid screens are usually very wide and utilize scrollbars to see all the available columns.

From some searches, and comments I’ve seen, I realize I will have to break up the screen into multiple views to show all the columns (since there isn’t a way to actually scroll the DataGrid component).

My problem is, as I’m adding more columns, the column header names are becoming clipped and I can’t control the width of each column header?

I saw the info on how you can specify relative column widths etc.

“0” for exact widths is perfect for me, BUT unfortunately, those values DON’T take into account the Header Name, only the data values!??

I’ve been trying to pad my data values with spaces to make the columns wider but that’s not working AND, when I try to center those values, it becomes a matter of juggling how many spaces are on the left and right of the value text which defeats the “c” centering specification altogether.

HELP!

Is there anything I can do at this point for correcting these column Header widths?

For me, the column header names are dictating the required column widths more than the data values themselves.

I’m thinking it would be helpful to have specifiers for both the header AND data values so you have a choice on which value drives the column width.

Having that ability (along with Left/Right/Center for the headers) would really solve ALL the issues I’m having, allowing me to then move forward with these screens as I’ve done with the other screens for this project.

I’ve linked an image to a screen capture of how the data grid looks - I don’t have any control over the column widths, and text alignment for my header names.

Any suggestions are really appreciated!

Wireframe Screen Snap

-Will

Hi @WillBellJr and welcome to our forums!

Before, we talk about possible solutions to your issue, I’ll be the first to admit that the Data Grid control is not perfect and could definitely benefit from an update. It’s on the list of things to do and I have added your feedback to our tracking.

That said, I think I have a couple or workarounds which, hopefully, you can use to get the look you need.

First, you could uncheck the Header Row property and highlight the first row manually by overlaying a Rectangle with appropriate opacity. That way, the text in the ‘header row’ behaves as a regular row. Like this:

I have attached to this message a BMPR file called DataGrid.bmpr so you can see how I did it.

Alternately, you could use two Data Grid controls, grouped together to manage the ‘header’ and the regular rows differently. There’s some help on that here - Creating Multiple Header Rows. That example addresses a different problem but it should provide some help in using more than one table to get a different look.

Hopefully you can make something like this work for you? Get back to us if you have any questions, ok? All the best for now.

DataGrid.bmpr (52 KB)

Hey @WillBellJr,
If you heavily involved into grids, I’d recommend prototype tables using Google Sheets / Excel, and paste these in Balsamiq as images.

Spreadsheet allows you to edit / format / manage your tables easily. It seems this isn’t an ideal solution, but at the wireframe stage you rather want to approve a concept and move to the next stage as soon, as possible. So any workaround could work for you.

1 Like

Thanks so much guys, especially for such a quick response!

Actually the idea about making the Header a “regular” row and they manually coloring it, may actually be the quick save for me - I’ll give that a try now!

Alexey, after posting my message here, I immediately went to using Excel and attempting to create a screen shot of the correctly sized Columns w/text BUT my SnagIt tool kept crashing when I attempted to perform a panoramic capture of the long header row - we’re talking [A] - [AW] - smh!

I had even discovered, and downloaded the “Balsamiq Font” and installed them onto my system, being worried about trying to match the same look when using Excel.

If Google Docs creates snaps that are readily usable in Balsamiq, I’ll switch to using that, but I usually don’t work with GSheets?

If it’s one thing I pride myself in, is being able to break software (ahem, typically because I don’t know what I’m doing - I’m the perfect QA tester LOL!)

So I’ve posted over at TechSmith as well, pointing out the repeatable crash with their SnagIt tool…

I was up to 2am late night trying to get some progress with all of this!

I actually kept going back and forth (with the most progress being the winner), between your tool, and attempting to do a quick mockup using Visual Studio along with a Core 3 Blazor project; I’m at the point where I want to start learning Blazor, and figured a quick Blazor mockup would be nice using our DevExpress Blazor DataGrid (we use DevExpress UI tools at my job).

Come to find out DevEx’s brand new Blazor DataGrid isn’t as feature rich yet, compared to their regular WPF and MVC grids - GOSH! (Opened a ticket with them last night as well - they don’t yet support header centering (what??), and other styling available in their more mature components - there I go again breaking stuff!)

I told them I wish had known their Blazor grids weren’t up to snuff like the others beforehand, I could have saved myself the time!

Shame on me for doing actual coding instead of wireframing anyway, BUT this is a hi-pri project, and I figured, any time saved by having some actual code to reuse later down the line would be helpful later on the project schedule…

Anyway, thanks for your suggestions - think I can work with your tip about using a regular row for the header.

…And please don’t let the DataGrid become dusty, and left behind; for large companies like mine, data grids are the life blood of upper management - they want to see their spreadsheets, charts and graphs on a DAILY basis - part of the reason why I had recommended to my manager we buy into the DevExpress suite of UI tools; their DataGrids and other UI controls are really nice, giving an edge on visual quality, and time saved in development!

-Will

2 Likes