gridx.modules
Property Summary
Method Summary
- Bar() This is a general-purpose bar for gridx. It can be configured to hold various plugins, such as pager, pageSizer, gotoPageButton, summary, quickFilter, toobar, etc.
- Body() The body UI of grid.
- CellWidget() This module makes it possible to efficiently show widgets within a grid cell.
- ColumnLock() Column lock machinery.
- ColumnResizer() Column Resizer machinery.
- ColumnWidth() Manages column width distribution, allow grid autoWidth and column autoResize.
- Dod()
- Focus()
- HLayout() This module manages the horizontal layout of all grid UI parts.
- HScroller() This module provides basic horizontal scrolling for grid
- Header() The header UI of grid
- IndirectSelect() This module shows a checkbox(or radiobutton) on the row header when row selection is used.
- Menu()
- NestedSort()
- Persist(grid) Provide a mechanism to persist various grid features when the grid is destroyed, so that when a new grid with the same id (or the same persist key) is created, all these features will be restored. By default use cookie, but users can also provide custom put and get functions. Note: since dojox.storage is still experimental, and with HTML5 we will hardly need things like gears or behavior storage, so we aren't supporting dojox.storage by default.
- RowHeader() This modules provides a header before each row.
- SingleSort() This module provides the single column sorting functionality for grid.
- SummaryBar()
- TitleBar()
- ToolBar(grid, args)
- Tree() Tree Grid module.
- VLayout() This module manages the vertical layout of all the grid UI parts.
- VScroller() This module provides basic vertical scrolling logic for grid.
- VirtualVScroller(grid, args) This module implements lazy-rendering when virtically scrolling grid.
Attached Objects
Properties
Methods
This module is in charge of row rendering. It should be compatible with virtual/non-virtual scroll, pagination, details on demand, and even tree structure.
Since widget declarations need to be parsed by dojo.parser, it can NOT be directly created by the decorator function. This module takes advantage of the _TemplatedMixin and the _WidgetInTemplateMixin so that users can write "templates" containing widgets in decorator function. This modules also limits the total number of widgets, so that the performance of grid can be configured to a tolerable level when there're lots of widgets in grid.
This module provides a way to lock consecutive leading columns. Columns can be locked in following ways:
var grid = new Grid({
modules: [
{moduleClass: gridx.modules.ColumnLock, count: 2}, ...
],
...
});
Or another way to set the lock number:
var grid = new Grid({
columnLockCount: 2
modules: [
gridx.modules.ColumnLock, ...
],
})
2. Lock or unlock columns dynamically
// lock 2 leading columns
grid.columnLock.lock(2)
// unlock all columns
grid.columnLock.unLock();
When a user creates a grid with a given width, it means the width of the whole grid, which includes grid body, row header, and virtical scrollerbar (and maybe more in the future). So the width of the grid body must be calculated out so as to layout the grid properly. This module calculates grid body width by collecting width from all the registered grid UI parts. It is assumed that the width of these UI parts will not change when grid is resized.
This module is in charge of the rendering of the grid header. But it should not manage column width, which is the responsibility of ColumnWidth module.
This module relies on an implementation of the RowHeader module, and an implementation of the SelectRow module. This module will check whether the SelectRow module provides the functionality of "select rows by index" (which means the "selectByIndex" method exists). If so, a "select all" checkbox can be provided in the header node of the row header column. This module will also check whether the SelectRow module is configured to "single selection" mode (which means the "multiple" attribute is set to false). If so, radio button instead of checkbox will be used in row headers.
Parameter | Type | Description |
---|---|---|
grid | Object | The grid itself. |
Row header can be used as a UI handler for row selection, especially when cell selection is turned on and selectRowTriggerOnCell is turned off. It can also be used as a place to hold the checkbox/radiobutton for IndirectSelect
This module is used for creation, destruction and management of the Tree Grid.
There are two kind of Tree Grid: columnar or nested, it will be indicated by
the argument type
, and the layout of the TreeGrid will be defined by extended
structure
argument.
{ identifier: 'name',
label: 'name',
items: [
{ name:'Africa', type:'continent', children: [
{ name:'Egypt', type:'country' },
{ name:'Kenya', type:'country', children:[
{ name:'Nairobi', type:'city', adults: 70400, popnum: 2940911 },
{ name:'Mombasa', type:'city', adults: 294091, popnum: 707400 } ]
},
{ name:'Sudan', type:'country', children:
{ name:'Khartoum', type:'city', adults: 480293, popnum: 1200394 }
} ]
},
{ name:'Asia', type:'continent', children:[
{ name:'China', type:'country' },
{ name:'India', type:'country' },
{ name:'Russia', type:'country' },
{ name:'Mongolia', type:'country' } ]
},
{ name:'Australia', type:'continent', population:'21 million', children:
{ name:'Commonwealth of Australia', type:'country', population:'21 million'}
} ]
}
define the grid structure
var structure = [
{name: "Name", field: "name", expandLevel: 'all'},
{name: "Type", field: "type"},
{name: "Population", field: "population"}
];
For the nested TreeGrid, there could be more than one column can be expanded,
so the structure might be a little more complicated. There is ONLY one attribute
name can be assigned to the `expandField` as children, and there would be a
attribute called `nestedLevel` to specify the hierarchy of the column.
A quick sample:
sample of data source
{ identifier: 'id',
items: [
{ id: "1", playername: "Player 1", seasons: [
{ id: "2", seasonindex: "Season 1", games: [
{ id: "3", gameindex: "Game 1", quarters: [
{id: "4", point: "3", rebound: "3", assistant: "1"},
{id: "5", point: "5", rebound: "0", assistant: "0"},
{id: "6", point: "0", rebound: "1", assistant: "3"},
{id: "7", point: "2", rebound: "2", assistant: "0"} ]
},
{ id: "8", gameindex: "Game 2", quarters: [
{id: "9", point: "3", rebound: "0", assistant: "2"},
{id: "10", point: "0", rebound: "4", assistant: "1"},
{id: "11", point: "5", rebound: "0", assistant: "1"},
{id: "12", point: "10", rebound: "2", assistant: "0"} ]
} ]
},
{ id: "13", seasonindex: "Season 2" } ]
} ]
}
define the tree grid type
treeNested: true;
define the grid structure
var structure = [
{name: "Player", field: "playername", expandLevel: 1},
{name: "Season", field: "seasonindex", expandLevel: 2},
{name: "Game", field: "gameindex", expandLevel: 3},
{name: "Point", field: "point"},
{name: "Rebound", field: "rebound"},
{name: "Assistant", field: "assistant"}
];
When user creates a grid with a given height, it means the height of the whole grid, which includes grid body, toobar, pagination bar, headerbar, horizontal scrollerbar, etc. So the height of the grid body must be calculated out so as to layout the grid properly. This module calculates grid body height by collecting height from all the registered grid UI parts. The reLayout function in this module will be called everytime the grid size is changed.
This module will make the grid body render all rows without paging. So it is very fast for small client side store, and might be extremely slow for large server side store.