What are some good UI Patterns for dealing with potentially large matrices of data?

Question

I'm migrating an old vb desktop app to an ASP.NET web application version. The app allows someone to spec out a quote for a building, floor by floor, specify how many of each item, are needed on each floor. The existing DB is a very simple M:N Join

+----------+    +-----------+    +----------+
| Floors   |    | FloorItems|    | Items    |
+----------+    +-----------+    +----------+
| FloorId  |--->| FloorId   |    |          |
| ...      |    | ItemId    |<---| ItemId   |
|          |    | Quantity  |    | ...      |
+----------+    +-----------+    +----------+

In the existing desktop app, the developers hacked together this 2D Matrix Grid for allowing the End-User to add the quantities of all items on all floors in one Screen. e.g.

        | Item 1 | Item 2 | Item 3 | Item 4 | ....
--------+--------+--------+--------+--------+------
Floor 1 |
Floor 2 |
Floor 3 |
Floor 4 |
...     |

This raises all sorts of problems though in a web UI as the Grid can potentially grow very wide as the item/product catalogue grows. page size is also an issue. not to mention validation of potentially hundreds of on screen inputs & auto saving them at regular intervals...

Can anyone recommend any other UI patterns for dealing with potentially large matrices of inputs in a web-app? Or point out some good examples online ?

(I'm toying with the idea of doing this one screen in Silverlight allowing a grid to scroll as far right as needed within the UI, and saving every textbox on-focus-exit)

thanks for the feedback guys. looking into some of the JQuery Grid Controls. — Eoin Campbell, Dec 13 '11 at 10:55

score 1 · Accepted Answer · answered Nov 27 '11 at 16:35

Firstly, I'd try to see if the customer is open for reducing the amount of data they want to view.
When editing items quantities on the 4th floor, is it really necessary to view the 2nd floor's items?
Alternatively- perhaps, when editing item #3, the user isn't really bothered with the quantity of item #12.

If the answer to any of the above is positive, you can re-design the screen to show only one floor / item at a time, which pretty much eliminates your problem.

If you simply must display that huge amount of data, there are many grid controls that can handle large volumes of data nicely.
Personally I like jQuery's jqgrid. obviously there are many more.

score 1 · Answer 2 · answered Nov 28 '11 at 13:33

If you are just trying to have the list grow down instead of across, why not use a tree control? The display only gros down, and you can expand and collapse the view so they are only working on one floor at a time. If you want to implement some checkpointed validate/save then add Edit, Cancel and Save buttons at the floor level, with the data being readonly until they hit Edit, and you can validate upon Save. If the user tries to edit another floor then warn they need to Save or Cancel the current.

Building
|
+--Floor 1       [Edit] [Cancel] [Save]      
   |
   +-- Item 1   _Qty Entry_
   |
   +-- Item 2   _Qty Entry_
   |
   +-- Item 3   _Qty Entry_
   |
   +-- Item 4   _Qty Entry_
|
+--Floor 2    
   |
   +-- Item 1   _Qty Entry_
   |
   +-- Item 2   _Qty Entry_
   |
   +-- Item 3   _Qty Entry_
   |
   +-- Item 4   _Qty Entry_

What are some good UI Patterns for dealing with potentially large matrices of data?

2 Answers2