Use the wj-flex-grid directive to add grids to your AngularJS applications.
Note that directive and parameter names must be formatted as lower-case with dashes
instead of camel-case. For example:
The example below creates a FlexGrid control and binds it to a 'data' array
exposed by the controller. The grid has three columns, each corresponding to
a property of the objects contained in the source array.
Example
The wj-flex-grid directive supports the following attributes:
allow-add-new
@ A value indicating whether to show a new row
template so users can add items to the source collection.
allow-delete
@ A value indicating whether the grid deletes the
selected rows when the Delete key is pressed.
allow-dragging
@ An AllowDragging value indicating
whether and how the user can drag rows and columns with the mouse.
allow-merging
@ An AllowMerging value indicating
which parts of the grid provide cell merging.
allow-resizing
@ An AllowResizing value indicating
whether users are allowed to resize rows and columns with the mouse.
allow-sorting
@ A boolean value indicating whether users can sort
columns by clicking the column headers.
auto-generate-columns
@ A boolean value indicating whether the grid generates
columns automatically based on the items-source.
child-items-path
@ The name of the property used to generate
child rows in hierarchical grids (or an array of property names if items
at different hierarchical levels use different names for their child items).
control
= A reference to the FlexGrid control
created by this directive.
defer-resizing
= A boolean value indicating whether row and column
resizing should be deferred until the user releases the mouse button.
frozen-columns
@ The number of frozen (non-scrollable) columns in the grid.
frozen-rows
@ The number of frozen (non-scrollable) rows in the grid.
group-header-format
@ The format string used to create the group
header content.
headers-visibility
= A HeadersVisibility value
indicating whether the row and column headers are visible.
ime-enabled
@ Gets or sets a value that determines whether the grid should
support Input Method Editors (IME) while not in edit mode.
initialized
& This event occurs after the binding has finished
initializing the control with attribute values.
is-initialized
= A value indicating whether the binding has finished
initializing the control with attribute values.
item-formatter
= A function that customizes
cells on this grid.
items-source
= An array or ICollectionView object that
contains the items shown on the grid.
is-read-only
@ A boolean value indicating whether the user is
prevented from editing grid cells by typing into them.
merge-manager
= A MergeManager object that specifies
the merged extent of the specified cell.
selection-mode
@ A SelectionMode value
indicating whether and how the user can select cells.
show-groups
@ A boolean value indicating whether to insert group
rows to delimit data groups.
show-sort
@ A boolean value indicating whether to display sort
indicators in the column headers.
sort-row-index
@ A number specifying the index of row in the column
header panel that shows and changes the current sort.
tree-indent
@ The indentation, in pixels, used to offset row
groups of different levels.
AngularJS directive for the FlexGrid control.
Use the wj-flex-grid directive to add grids to your AngularJS applications. Note that directive and parameter names must be formatted as lower-case with dashes instead of camel-case. For example:
<p>Here is a FlexGrid control:</p> <wj-flex-grid items-source="data"> <wj-flex-grid-column header="Country" binding="country"> </wj-flex-grid-column> <wj-flex-grid-column header="Sales" binding="sales"> </wj-flex-grid-column> <wj-flex-grid-column header="Expenses" binding="expenses"> </wj-flex-grid-column> <wj-flex-grid-column header="Downloads" binding="downloads"> </wj-flex-grid-column> </wj-flex-grid>The example below creates a FlexGrid control and binds it to a 'data' array exposed by the controller. The grid has three columns, each corresponding to a property of the objects contained in the source array.
Example
The wj-flex-grid directive supports the following attributes:
@A value indicating whether to show a new row template so users can add items to the source collection.@A value indicating whether the grid deletes the selected rows when the Delete key is pressed.@An AllowDragging value indicating whether and how the user can drag rows and columns with the mouse.@An AllowMerging value indicating which parts of the grid provide cell merging.@An AllowResizing value indicating whether users are allowed to resize rows and columns with the mouse.@A boolean value indicating whether users can sort columns by clicking the column headers.@A boolean value indicating whether the grid generates columns automatically based on the items-source.@The name of the property used to generate child rows in hierarchical grids (or an array of property names if items at different hierarchical levels use different names for their child items).=A reference to the FlexGrid control created by this directive.=A boolean value indicating whether row and column resizing should be deferred until the user releases the mouse button.@The number of frozen (non-scrollable) columns in the grid.@The number of frozen (non-scrollable) rows in the grid.@The format string used to create the group header content.=A HeadersVisibility value indicating whether the row and column headers are visible.@Gets or sets a value that determines whether the grid should support Input Method Editors (IME) while not in edit mode.&This event occurs after the binding has finished initializing the control with attribute values.=A value indicating whether the binding has finished initializing the control with attribute values.=A function that customizes cells on this grid.=An array or ICollectionView object that contains the items shown on the grid.@A boolean value indicating whether the user is prevented from editing grid cells by typing into them.=A MergeManager object that specifies the merged extent of the specified cell.@A SelectionMode value indicating whether and how the user can select cells.@A boolean value indicating whether to insert group rows to delimit data groups.@A boolean value indicating whether to display sort indicators in the column headers.@A number specifying the index of row in the column header panel that shows and changes the current sort.@The indentation, in pixels, used to offset row groups of different levels.&Handler for the beginningEdit event.&Handler for the cellEditEnded event.&Handler for the cellEditEnding event.&Handler for the prepareCellForEdit event.&Handler for the resizingColumn event.&Handler for the resizedColumn event.&Handler for the draggedColumn event.&Handler for the draggingColumn event.&Handler for the sortedColumn event.&Handler for the sortingColumn event.&Handler for the deletingRow event.&Handler for the draggingRow event.&Handler for the draggedRow event.&Handler for the resizingRow event.&Handler for the resizedRow event.&Handler for the rowAdded event.&Handler for the rowEditEnded event.&Handler for the rowEditEnding event.&Handler for the loadedRows event.&Handler for the loadingRows event.&Handler for the groupCollapsedChanged event.&Handler for the groupCollapsedChanging event.&Handler for the itemsSourceChanged event.&Handler for the selectionChanging event.&Handler for the selectionChanged event.&Handler for the gotFocus event.&Handler for the lostFocus event.&Handler for the scrollPositionChanged event.The wj-flex-grid directive may contain WjFlexGridColumn, WjFlexGridCellTemplate and WjFlexGridDetail child directives.