Best way of selecting rows in a grid across pages?

Question

Best way of selecting rows in a grid across pages? We have a data grid which spans multiple pages, which is core part of our web based application.

Scenario 1: Checkboxes denote selection.

Use Case 1: Users can select/highlight rows to perform an action (with a modal windows popping up for user input), using a context menu or menu underneath the grid.

Use Case 2: Users also have check boxes for allowing selection across multiple pages. When users highlight a set of rows and select an action, this will automatically check the check boxes in highlighted rows.

In both above scenarios, check boxes denote selection.

Scenario 2: Rows Highlighted denote selection.

User Case 3: User can also drag drop selected rows onto a drop box to perform an action (with no modal windows popping up).

In this scenario, highlighted rows denote selection.

New Use Case

Use Case 4: Recently we started combining these two scenario(s), user's can drag and drop selected rows onto a dropbox. This time we popup a modal window asking for user input before we perform the action (same action(s) used Use Case 1, Use Case 2).

This time, highlighted rows denote selection.

---

As you can see, it's confusing to say the least.

We want to remove the checkboxes all together, to simplify the product. But how do we acheive the row selection across multiple pages.

One suggestion has been to have temporary bucket(s) users can drop rows into to and perform actions on the bucket later.

What do you think would be a better UX? Have you seen this implemented better anywhere rather than good old checkboxes?

Answer 1

Isn't this just like shopping for groceries online? (or a wish-list or wedding list or anything similar you're happy to think of it as).

When shopping online I visit multiple pages - I select some things to add to a basket and when I've got all I want, then I click the button that says Checkout [or Check out before Rahul says anything :-)]

Add a mechanism to add your rows to the 'basket', and substitute your action for the Checkout button and it's an almost identical scenario - just a different application.

The mechanism to add rows to the 'basket' can consist of the following.

• select/highlight one or more rows - click 'Add' icon/button.
• select/highlight one or more rows - drag to drop area (basket).

Mark the added rows in some way to provide some simple feedback (this is the equivalent of your checkboxes), and also indicate the number of items in the 'basket' for the same reason.

Maybe your application would also benefit from the equivalent of 'View Basket' before applying the chosen action.

It's very difficult to otherwise deal with multiple pages without having the concept of a list or basket to which you've added items from different pages.

Answer 2

Could you draw on Excel for an answer? So a button at leftmost end of a row would select that row on that page, while a button to the left of that would select that row on all pages?

Answer 3

I guess its for a web application, but anyway may be a look at Silverlight Toolkit can give you ideas how to tackle it. At chapter Data > DataGrid you see a typical sort of grid used in desktop applications.

For showing detailed data, there is a pattern called DetailedRow, which I like for its elegance. And you can fix/frost rows (you may know this from excel as well). What you think about frosting selected rows across your pages? Editing data by clicking twice in a cell. And some more stuff. May be worth to consider?