46
Name
Description
The code below binds a grid to a collection of products, then assigns a DataMap to the grid's 'CategoryID'
D'
column so that the grid displays the category names rather than the raw IDs.
// bind grid to products
var flex = new wijmo.grid.FlexGrid();
flex.itemsSource = products;
// map CategoryID column to show category name instead of ID
var col = flex.columns.getColumn('CategoryID');
col.dataMap = new wijmo.grid.DataMap(categories, 'CategoryID', 'CategoryName');
FlexGrid
The FlexGrid control provides a powerful and flexible way to display and edit data in a tabular format.
.
The FlexGrid control is a full-featured grid, providing all the features you are used to including several
eral
selection modes, sorting, column reordering, grouping, filtering, editing, custom cells, XAML-style star-
-
sizing columns, row and column virtualization, etc.
FormatItemEventArgs
Provides arguments for the formatItem event.
GridPanel
Represents a logical part of the grid, such as the column headers, row headers, and scrollable data part.
GroupRow
Represents a row that serves as a header for a group of rows.
HitTestInfo
Contains information about the part of a FlexGrid control that exists at a specified page coordinate.
MergeManager
Defines the FlexGrid's cell merging behavior.
.
An instance of this class is automatically created and assigned to the grid's mergeManager property to
to
implement the grid's default merging behavior.
If you want to customize the default merging behavior, create a class that derives from MergeManager and
nd
override the getMergedRange method.
.
Row
Represents a row in the grid.
RowCol
An abstract class that serves as a base for the Row and Column classes.
RowColCollection
Abstract class that serves as a base for row and column collections.
RowCollection
Represents a collection of Row objects in a FlexGrid control.
Enumerations
42
Name
Description
AllowDragging
Specifies constants that define the row/column dragging behavior.
AllowMerging
Specifies constants that define which areas of the grid support cell merging.
AllowResizing
Specifies constants that define the row/column sizing behavior.
AutoSizeMode
Specifies constants that define the row/column auto-sizing behavior.
CellType
Identifies the type of cell in a GridPanel.
HeadersVisibility
Specifies constants that specify the visibility of row and column headers.
RowColFlags
Flags that specify the state of a grid row or column.
SelectedState
Specifies the selected state of a cell.
SelectionMode
Specifies constants that define the selection behavior.
SelMove
Specifies a type of movement for the selection.
CellFactory Class
Module
wijmo.grid
File
wijmo.grid.js
Creates HTML elements that represent cells within a FlexGrid control.
Methods
Name
Parameters
Description
disposeCell(cell)
cell (HTMLElement): The element that represents the cell. Disposes of a cell element and releases all
resources associated with it.
updateCell(p, r, c, cell,
rng?, updateContent?)
p (GridPanel): The GridPanel that contains the cell.
r (number): The index of the row that contains the cell.
c (number): The index of the column that contains the cell.
cell (HTMLElement): The element that represents the cell.
Creates or updates a cell in the grid.
33
Name
Parameters
Description
rng? (CellRange): The CellRange object that contains the
cell's merged range, or null if the cell is not merged.
updateContent? (boolean): Whether to update the cell's
content as well as its position and style.
CellRange Class
Module
wijmo.grid
File
wijmo.grid.js
Represents a rectangular group of cells defined by two row indices and two column indices.
Constructor
Name
Parameters
Description
constructor(r?, c?, r2?,
c2?)
r? (number): The index of the first row in the range
(defaults to -1).
(default value: -1)
c? (number): The index of the first column in the
range (defaults to -1).
(default value: -1)
r2? (number): The index of the last row in the
range (defaults to r).
(default value: r)
c2? (number): The index of the first column in the
range (defaults to r).
(default value: c)
Initializes a new instance of the CellRange class.
Properties
67
Name
Type
Description
bottomRow
number
Gets the index of the bottom row in the range.
col
number
Gets or sets the index of the first column in the range.
col2
number
Gets or sets the index of the second column in the range.
columnSpan
number
Gets the number of columns in the range.
isSingleCell
boolean
Checks whether this range corresponds to a single cell (beginning and ending
rows have the same index, and beginning and ending columns have the same
index).
isValid
boolean
Checks whether the range contains valid row and column indices (row and
column values are zero or greater).
leftCol
number
Gets the index of the leftmost column in the range.
rightCol
number
Gets the index of the rightmost column in the range.
row
number
Gets or sets the index of the first row in the range.
row2
number
Gets or sets the index of the second row in the range.
rowSpan
number
Gets the number of rows in the range.
topRow
number
Gets the index of the top row in the range.
Methods
Name
Parameters
Description
clone(): CellRange
Creates a copy of the range.
contains(r, c?): boolean r (any): The CellRange object or row index to find.
c? (number): The column index (required if the r
parameter is not a CellRange object).
Checks whether the range contains another range or
a specific cell.
containsColumn
(c): boolean
c (number): The index of the column to find.
Checks whether the range contains a given column.
containsRow (r): boolean r (number): The index of the row to find.
Checks whether the range contains a given row.
equals(rng): boolean
rng (CellRange): The CellRange object to compare
to this range.
Checks whether the range equals another range.
getRenderSize(p): Size
p (GridPanel): The GridPanel object that contains
the range.
Gets the rendered size of this range.
39
Name
Parameters
Description
Returns A Size object that represents the sum of
row heights and column widths in the range.
intersects(rng): boolean rng (CellRange): The CellRange object to check.
Checks whether the range intersects another range.
intersectsColumn
(rng): boolean
rng (CellRange): The CellRange object to check.
Checks whether the range intersects the columns in
another range.
intersectsRow
(rng): boolean
rng (CellRange): The CellRange object to check.
Checks whether the range intersects the rows in
another range.
setRange(r?, c?, r2?, c2?) r? (number): The index of the first row in the range
(defaults to -1).
(default value: -1)
c? (number): The index of the first column in the
range (defaults to -1).
(default value: -1)
r2? (number): The index of the last row in the
range (defaults to r).
(default value: r)
c2? (number): The index of the first column in the
range (defaults to r).
(default value: c)
Initializes an existing CellRange.
CellRangeEventArgs Class
Base Class
CancelEventArgs
Derived Classes
FormatItemEventArgs
Module
wijmo.grid
File
wijmo.grid.js
48
Provides arguments for CellRange events.
Constructor
Name
Parameters
Description
constructor(p, rng,
data?)
p (GridPanel): GridPanel that contains the range.
rng (CellRange): Range of cells affected by the event.
data? (string): Data related to the event.
Initializes a new instance of
the CellRangeEventArgs class.
Properties
Name
Type
Description
F cancel
boolean
Gets or sets a value that indicates whether the event should be canceled.
(inherited from CancelEventArgs).
col
number
Gets the column affected by this event.
data
any
Gets or sets the data associated with the event.
SF empty
EventArgs
Provides a value to use with events that do not have event data.
(inherited from EventArgs).
panel
GridPanel
Gets the GridPanel affected by this event.
range
CellRange
Gets the CellRange affected by this event.
row
number
Gets the row affected by this event.
Column Class
Base Class
RowCol
Derived Classes
WjFlexGridColumn
Module
wijmo.grid
File
wijmo.grid.js
46
Represents a column on the grid.
Constructor
Name
Parameters
Description
constructor(options?) options? (any): Initialization options for the column. Initializes a new instance of the Column class.
Properties
Name
Type
Description
aggregate
Aggregate
Gets or sets the Aggregate to display in the group header rows for the column.
align
string
Gets or sets the horizontal alignment of items in the column.
The default value for this property is null, which causes the grid to select the
alignment automatically based on the column's dataType(numbers are right-
-
aligned, Boolean values are centered, and other types are left-aligned).
If you want to override the default alignment, set this property to 'left,' 'right,' or
'center,'
allowDragging
boolean
Gets or sets a value that indicates whether the user can move the row or column to a
new position with the mouse.
(inherited from RowCol).
allowMerging
boolean
Gets or sets a value that indicates whether cells in the row or column can be merged.
(inherited from RowCol).
allowResizing
boolean
Gets or sets a value that indicates whether the user can resize the row or column
with the mouse.
(inherited from RowCol).
allowSorting
boolean
Gets or sets a value that indicates whether the user can sort the column by clicking
its header.
binding
string
Gets or sets the name of the property the column is bound to.
collectionView
ICollectionView Gets the ICollectionView bound to this row or column.
(inherited from RowCol).
51
Name
Type
Description
cssClass
string
Gets or sets a CSS class name to use when rendering non-header cells in the row or
column.
(inherited from RowCol).
currentSort
string
Gets a string that describes the current sorting applied to the column. Possible values
are '+' for ascending order, '-' for descending order, or null for unsorted columns.
dataMap
DataMap
Gets or sets the DataMap used to convert raw values into display values for the
the
column.
Columns with an associated dataMap show drop-down buttons that can be used for
for
quick editing. If you do not want to show the drop-down buttons, set the
e
column's showDropDown property to false.
.
Cell drop-downs require the wijmo.input module to be loaded.
dataType
DataType
Gets or sets the type of value stored in the column.
Values are coerced into the proper type when editing the grid.
dropDownCssClass
string
Gets or sets a CSS class name to add to drop-downs in this column.
The drop-down buttons are shown only if the column has a dataMap set and is
nd is
editable. Clicking on the drop-down buttons causes the grid to show a list where
users can select the value for the cell.
Cell drop-downs require the wijmo.input module to be loaded.
format
string
Gets or sets the format string used to convert raw values into display values for the
column (see Globalize).
grid
FlexGrid
Gets the FlexGrid that owns the row or column.
(inherited from RowCol).
header
string
Gets or sets the text displayed in the column header.
index
number
Gets the index of the row or column in the parent collection.
(inherited from RowCol).
43
Name
Type
Description
inputType
string
Gets or sets the "type" attribute of the HTML input element used to edit values in
this column.
By default, this property is set to "tel" for numeric columns, and to "text" for all
other non-boolean column types. The "tel" input type causes mobile devices to show
a numeric keyboard that includes a negative sign and a decimal separator.
Use this property to change the default setting if the default does not work well for
the current culture, device, or application. In these cases, try setting the property to
"number" or simply "text."
isContentHtml
boolean
Gets or sets a value that indicates whether cells in this row or column contain
HTML content rather than plain text.
(inherited from RowCol).
isReadOnly
boolean
Gets or sets a value that indicates whether cells in the row or column can be edited.
(inherited from RowCol).
isSelected
boolean
Gets or sets a value that indicates whether the row or column is selected.
(inherited from RowCol).
isVisible
boolean
Gets a value that indicates whether the row or column is visible and not collapsed.
This property is read-only. To change the visibility of a row or column, use
the visible property instead.
.
(inherited from RowCol).
.
mask
string
Gets or sets a mask to use while editing values in this column.
The mask format is the same used by the InputMask control.
l.
If specified, the mask must be compatible with the value of the format property. For
or
example, the mask '99/99/9999' can be used for entering dates formatted as
'MM/dd/yyyy'.
45
Name
Type
Description
maxWidth
number
Gets or sets the maximum width of the column.
minWidth
number
Gets or sets the minimum width of the column.
name
string
Gets or sets the name of the column.
The column name can be used to retrieve the column using the getColumn method.
.
pos
number
Gets the position of the row or column.
(inherited from RowCol).
renderSize
number
Gets the render size of the row or column. This property accounts for visibility,
default size, and min and max sizes.
(inherited from RowCol).
renderWidth
number
Gets the render width of the column.
The value returned takes into account the column's visibility, default size, and min
and max sizes.
required
boolean
Gets or sets a value that determines whether values in the column are required.
By default, this property is set to null, which means values are required, but string
columns may contain empty strings.
When set to true, values are required and empty strings are not allowed.
When set to false, null values and empty strings are allowed.
showDropDown
boolean
Gets or sets a value that indicates whether the grid adds drop-down buttons to the
cells in this column.
The drop-down buttons are shown only if the column has a dataMap set and is
nd is
editable. Clicking on the drop-down buttons causes the grid to show a list where
users can select the value for the cell.
Cell drop-downs require the wijmo.input module to be loaded.
.
Documents you may be interested
Documents you may be interested
