Grid-Selecting


This will continue the selectable interaction refactor work started on Selectable

 

Demo

http://view.jqueryui.com/grid/grid-editing/grid-selectable.html

Uses the selectable interaction to allow for mouse/lasso selection of grid rows, setting a boolean selected field on each through tmplItem. In the grid refresh, if selected, TR gets the same class, 'ui-selected'. The behavior between pages is a bit inconsistent as clicking on a single row on one page will clear other selected rows on the same page, however any selections not currently visible will remain.

 

Selection Patterns

 

definitions (anchor, focus and range from https://developer.mozilla.org/en/DOM/Selection )

* single selection: at most one item in the set can be selected

* multiple selection: more than one item in the set can be selected

* independent toggle: each item selection in the set toggles independent of others

* dependent toggle: each item selection in the set clears previous selection in same set

* modifier key, ctrl (Win) / command (Mac): switches dependent toggle to independent toggle when ON

* shift key: activates a range selection when ON

* anchor: The anchor of a selection is the beginning point of the selection. When making a selection with a mouse, the anchor is where in the document the mouse button is initially pressed. As the user changes the selection using the mouse or the keyboard, the anchor does not move.

* focus: The focus of a selection is the end point of the selection. When making a selection with a mouse, the focus is where in the document the mouse button is released. As the user changes the selection using the mouse or the keyboard, the focus is the end of the selection that moves.

* range: A range is a contiguous part of a document.

 

Checkboxes

- multiple selection

- independent toggle

 

Radio buttons

- single selection

- dependent toggle

 

Select box

- single selection

- dependent toggle

 

Select box with multiple, modifier key OFF

- single selection

- dependent toggle

 

Select box with multiple, modifier key ON

- multiple selection

- independent toggle

 

Mouse click

- TODO with and without modifier and shift

 

Mouse lasso, modifier OFF

- selects all elements that intersect with a rectangle drawn by opposite corners at anchor and focus

- multiple selection

- dependent toggle

 

Mouse lasso, modifier key ON

- multiple selection

- independent toggle

 

Mouse range

- selects all elements between anchor and focus

 

Keyboard arrows

- TODO

 

Keyboard arrows with shift key

- TODO

 

Keyboard arrows with modifier key

- TODO

 

Keyboard arrows with shift and modifier keys

- TODO

 

Keyboard arrows with mouse (and shift and modifier keys)

- TODO

 

Patterns in the wild