What are ways to reduce the number of columns in a table/grid? - user-interface

I have a datagrid with many columns. This makes it pretty wide. Now we want to add more information to the table. Aside from removing or shortening existing columns what are some ways we might be able to add additional information without adding new columnes.
The data we want to add would be one of several values. For example:
Projected
Actual
Other
For other cases when the value was an off/on or true/false we would change the color of the row. In this case that doesn't seem to be a good option.
Another thing we considered is using an icon to indicate the information.
Any other ways this could be done?

A solution i've seen implemented with grid components is to have a column chooser - some sort of popup dialog that lists the columns and you can select which ones you would like to see in the grid. You should be able to invoke this popup by triggering it from the grid, e.g. it might appear as an option when the user right clicks and causes the context menu to appear.

Can you group related information into tabs?

an overflow area? ie a number of fields underneath the table that populate based on the selected row.
or just only show the minimum needed info and the have full details in a popup when doble clicked or something..

1) Popup on row hover
2) Drop open inline in the grid with extra info on row click

One technique I've used in the past was to create a "container" type of class that has its own labels and textboxes, and you can arrange them however you want, then insert this class into a single grid column. You still have to do some tricks on binding multiple controls that are not native "grid column" controls, but should help you along. Then, you can actually have each row a single container control in a single grid column...

You can't add completely new data to a grid without reserving a column to display it. The best solution I've seen is to provide only the essential information in the grid displaying all records, and then create a drilldown view that shows all of the data for one row. The drilldown can either be a new view in the same form, a popup for an additional window, or perhaps a mouseover popup.
I've worked on systems that use all sorts of shortcuts to display every last bit of information on a single page, and I found that it just made everything more confusing and harder to use. "Oh, that little icon there means that <insert something totally unrelated to the icon picture>."

Related

LibGDX (Scene2D): Using Table with Labels to do a chat menu

I am trying to do a chat menu in my game using a Table and Labels but I can't seem to get the labels to behave the way I want them to.
By default they are drawn in the middle of the table. I added this settings to fix that but now when I add new labels they expand to fill the table, which I don't want.
After adding settings:
After adding a new label:
Note: The second message is there, it's jsut very faint. Just another bug I am having :/
Also, you may notice that the "Send" button is half off screen, trying to fix that too, but one problem at a time I guess.
By the way, the table is within a ScrollPane.

Ajax-like appearing/disappearing elements in Access 2010 web database project

I'm trying to have a feature to allow users choose two different methods of cost calculation: either they can enter a yearly cost breakdown on a datasheet (2010: $10,000, 2011: $12,000, etc) or they can enter a flat yearly cost multiplied by the number of years they select.
If I were developing another kind of web application, I'd have radio buttons to select two different options. One option would display the datasheet, and the other option would display two text fields to enter values into. However, I understand that you can't have radio buttons in Access 2010 web databases. Also, is it possible to make elements appear and disappear based on a combo box selection?
If not, perhaps I could have two different combo box options: "enter yearly cost breakdown"
or "enter flat yearly cost," which open the correct respective forms as pop-ups.
So, 1) can I have Ajax-like appearing and disappearing elements as triggered by a combo box (or ideally, radio buttons), and 2) if not, can anyone think of another clever way of doing it?
Sure, you get a nice effect by using a tab control. You can place controls and even a sub form on that tab control.
So, you build a screen like this:
Then, simple set the visible property of the second tab = No. This will hide the tab (don't change this until you built the page since it will hide it! (use property sheet to hide/un-hide during development).
Now, add some code to the after update event of the list box. Like this:
In the above, I have named the tabs PYear and PFlat.
The result is this (this is a animated gif I inserted):
Of course, you really probably could just dump the whole "list box" selection, and use a screen like this with the tabs (tabs are good UI, and users tend to grasp them quick):
So, you can hide a "set" of controls, and it really far less work and hassle then writing a bunch of JaveScript anyway. As noted, the "set" of controls you drop into each of the tabs can be sub forms, and also that of continues forms. So, the "hiding" as a set does work well in this case. I did have some format issues and found that I had to "start out" with the 2nd tab dispaled first (the first one being hidden). As noted, the listbox selecting is nice, but one could likly just go with using tabs in the first place.

Drag & drop columns into or out of the SlickGrid

I am just learning about the impressive SlickGrid library; and here's my question:
We would like to give users the ability to drag & drop columns from a list of possible columns into the grid to add columns (and possibly likewise drag & drop columns out of the grid to remove columns). Think: Outlook field chooser - where you can add/remove the To column, the From column, etc. via drag & drop.
Any chance that this might be possible? Many thanks, Dave
It isn't drag and drop, but there is a context menu in the header that allows you to check off the columns you want to show/hide. You can customize it in the slick.columnpicker.js file.
This isn't currently possible since you'd essentially have to modify SlickGrid's built-in column management code. As part of an on-going componentization of SlickGrid, that code may get moved into a separate plugin, which would make it easier to extend. In the meantime, you can extend the column picker control (included in the distro) to have two lists with columns that can be drag'n'dropped within the control itself (not onto the grid's columns).

How do I edit a cell in an MFC Listbox?

I have a CListCtrl control that has 2 columns and any number of rows. I want the user to be able to click(or maybe double-click) a "cell" and be able edit the text therein.
What I mean is that I want to be able to click and edit any of the places where it says "TEST" by clicking on the text to make it editable.
How should I go about this? I suppose I should use a mouse click event but how would I make the cell editable?
This looks like a list control in report mode, which is different from a list box. A list box doesn't support editing contents at all. You can write code entirely on your own to get the contents of a line, copy that to an edit control, display the edit control exactly where the existing content was shown, allow the user to edit, and copy data back when/if the user hits return.
A list control allows editing of one (and only one) field. If you want to support more, you have a couple of choices. One would be about like above, creating your own edit control in the right place. The obvious alternative would be to look up one of the many grid controls. CodeProject has a number of variations.

mouse pointer and thumb nail for selection

What would be the appropriate way for selecting a particular row in a paginated view.
For example, while trying to select a particular row in Yahoo Inbox you can use the pointer to select the check box and if you try to click beyond the check box, no action is taken.
But while trying to select a particular row in GMail Inbox you can use the pointer to select it or if you navigate away from the checkbox it changes into a thumbnail but allows you to select the row.
Which method is preferable from a usability perspective and how to implement the thumbnail based selection as done by GMail
Both methods are appropriate, and both can be very usable.
I think the main difference is that row selection (the system used by Gmail) is more like a desktop application and a little less web-like. With links (like in the Yahoo inbox or StackOverflow), it's completely obvious that you're supposed to click on them. With rows, you sort of have to figure that out that you can click them, but I doubt it takes people long.
One thing to keep in mind is that, if you go with row selection, it's probably a good idea to bunch together any other clickable control (like checkboxes, links, or "favorite" stars). This way, you can click anywhere on the row. If you intersperse controls along the row, you increase the likelihood users will make clicking errors (aiming for the row but accidentally clicking some other control), and it will make it harder for users to recognize that the row itself is a clickable region.
So, both are perfectly acceptable user interfaces. You'll have to decide which one is a better match for your particular situation. I think, in general, links are a little bit more versatile, but with clickable rows, you know you can click anywhere and it will work.

Resources