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:

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.

headers-focusibility

= A HeadersFocusability value indicatinf whether the row and column headers are focusible.

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.

beginning-edit

& Handler for the FlexGrid.beginningEdit event.

cell-edit-ended

& Handler for the FlexGrid.cellEditEnded event.

cell-edit-ending

& Handler for the FlexGrid.cellEditEnding event.

prepare-cell-for-edit

& Handler for the FlexGrid.prepareCellForEdit event.

resizing-column

& Handler for the FlexGrid.resizingColumn event.

resized-column

& Handler for the FlexGrid.resizedColumn event.

dragged-column

& Handler for the FlexGrid.draggedColumn event.

dragging-column

& Handler for the FlexGrid.draggingColumn event.

sorted-column

& Handler for the FlexGrid.sortedColumn event.

sorting-column

& Handler for the FlexGrid.sortingColumn event.

deleting-row

& Handler for the FlexGrid.deletingRow event.

dragging-row

& Handler for the FlexGrid.draggingRow event.

dragged-row

& Handler for the FlexGrid.draggedRow event.

resizing-row

& Handler for the FlexGrid.resizingRow event.

resized-row

& Handler for the FlexGrid.resizedRow event.

row-added

& Handler for the FlexGrid.rowAdded event.

row-edit-ended

& Handler for the FlexGrid.rowEditEnded event.

row-edit-ending

& Handler for the FlexGrid.rowEditEnding event.

loaded-rows

& Handler for the FlexGrid.loadedRows event.

loading-rows

& Handler for the FlexGrid.loadingRows event.

group-collapsed-changed

& Handler for the FlexGrid.groupCollapsedChanged event.

group-collapsed-changing

& Handler for the FlexGrid.groupCollapsedChanging event.

items-source-changed

& Handler for the FlexGrid.itemsSourceChanged event.

selection-changing

& Handler for the FlexGrid.selectionChanging event.

selection-changed

& Handler for the FlexGrid.selectionChanged event.

got-focus

& Handler for the FlexGrid.gotFocus event.

lost-focus

& Handler for the FlexGrid.lostFocus event.

scroll-position-changed

& Handler for the FlexGrid.scrollPositionChanged event.

The wj-flex-grid directive may contain wijmo.angular.grid.WjFlexGridColumn, wijmo.angular.grid.WjFlexGridCellTemplate and wijmo.angular.grid.detail.WjFlexGridDetail child directives.