ThumbsGrid

Overview
Include resource files
Default Options
Methods
Events
Examples

Overview

The ThumbsGrid is a reusable UI component for presenting data in the form of a thumbs. It's main function is to display thumbnails with image plus caption, but in fact ThumbsGrid can be easily extended further and adjusted with another UI elements, like Buttons, etc. Thumbs' appearance can be easily controlled with CSS.

Include resource files

/Shared/Scripts/lazy_loader.js
- <script type="text/javascript" src="/Shared/Scripts/lazy_loader.js"></script>
/Shared/UIComponents/Internal/ThumbsGrid
- css/thumbs_grid.css
- Scripts/thumbs_grid.js

Default Options

Name	Description	Type	Default Value
data	Default data to render	Array	[]
show_icon	Whether to display image or not	Boolean	true
show_label	Whether to display label or not	Boolean	true
top_html	HTML to be displayed on top of each thumb	String	""
bottom_html	HTML to be displayed below each thumb	String	""
columns	Number of columns to split the grid to. 0 (zero) means no columns (grid takes all available estate (a.k.a. "auto"))	Number	0
key_imagesrc	Data key name of image source file (if any). See possible values	String	"icon"
key_label	Data key name of label (if any). See possible values	String	"label"
selected	Key-value pair; selects the first matched thumb which has the same key-value pair	Object	null
lazy_load	Whether to load images on demand (a.k.a. lazy loading) or not	Boolean	true
enable_queue	Whether to start queue immediately or wait for a call outside	Boolean	true
filters	Filters to be applied over the thumbs. (see Filters)	Array	[]
sort	Sort option to be applied over the thumbs by a key-value pair	Object	null

Possible key_* values

All key_* options define the paths to values in the data structure (see example).

Possible values are "src", "image.src", '["cells"]["123.123456"]', etc.

Methods

Name	Description	Parameters	Returns
setData	Sets data to the instance and renders it	data: Object	-
getData	Returns current data	-	data: Object
empty	Clears current data. Removes all thumbs from view	-	-
destroy	Destroys the whole UI	-	-
selectThumbByKeyValue	Selects the first matched thumb by key name and value	key: String (See possible values), value: Mixed	success: Boolean
selectPrev	Selects the previous thumb relative to the currently selected one, and taking into account filters & sorting. If no currently selected thumb, or currently selected is the first one, will select the last one	-	-
selectNext	Selects the next thumb relative to the currently selected one, and taking into account filters & sorting. If no currently selected thumb, or currently selected is the last one, will select the first one	-	-
applyFilters	Applies filtering over the thumbs. Each thumb that does not match any filter will be removed from the grid	filters: Array (see Filters)	num_filtered: Number
applySorting	Applies sorting over the thumbs by a data key. Can accept a custom sorting function	key: String (See possible values), sort_fn: Function (optional)	-

Filters

The Filters Array contains Filter Groups, which are also Arrays, which contain Filter Objects:

The key_name is the path to the key in data object See possible values. The expression could be a RegExp or a Function.

All Filter Objects in a Group are OR-ed (disjunction). All Groups are AND-ed (conjunction).

Example of a Filters Array:

Events

Name	Description	Arguments
onSelect	Fires when the user has selected a thumb	thumb_data: Object
onReady	Fires when the UI is ready	-

Examples

Configurations for different Data Structures

Let's say we have the following data structure:

For this data structure, we will have the following configuration:

Now let's say our data comes from the database:

In this case the configuration will look lie this:

Primary usage of Filters as with custom sort function

Let's use the following data:

Filtering the data to the value of the "filter" property:

Implement a Button to each Thumb

For this example we will create a class extending ThumbsGrid: