Angular Data Grid
Since I wanted to learn Angular.js, but still needed to focus on the requirements of my job’s project, I decided to build my own simple data grid directive mainly based on the features provided by ng-grid (http://angular-ui.github.io/ng-grid/). If you are interested in a directive with way more features, you can check out ng-grid.
One commun mistake is to forget to specify [heigh] and [width] parameters to this directive who can lead to layout issue.
*If you plan to mix fixed (px) and variable width (%), make sure variable summation is lower than 100%.
Usage:
<div ng-data-grid="gridOptions" height="gridDimension.gridHeight" width="gridDimension.gridWidth"></div>
gridOptions:
headerClass (default: ''): Appends a css class for the column header.
headerRowHeight (default: 25): The height of the header row in pixels.
rowHeight (default: 25): Row height of rows in grid.
showFooter (default: false): Show or hide the footer the footer is disabled by default.
headerTemplate (default: ~/app/src/scripts/directives/ng-data-grid/templates/ng-data-grid-default-header.html'): Define a header template for customization.
bodyTemplate (default: ~/app/src/scripts/directives/ng-data-grid/templates/ng-data-grid-default-body.html): Define a body template for customization.
footerTemplate (default: ''): Define a footer template for customization.
footerRowHeight (default: 32): Defining the height of the footer in pixels.
enableSorting (default: true): Enables or disables sorting in grid.
enablePaging (default: false): Enables the client-side paging feature
multiSelect (default: true): Set this to false if you only want one item selected at a time
keepLastSelected (default: true): Prevent unselections when in single selection mode
enableColumnResize (default: false): Enable or disable resizing of columns
primaryKey(default: undefined): Primary Key field name used for tracking selector [required]
columnDefs (default: undefined): Definitions of columns as an array [], if not defined columns are auto-generated.
headerCellTemplate : Sets the template for the column header cell.
(default:
<span ng-show="!isSortable(column)">{{ column.displayName }}</span>
<a ng-show="isSortable(column)" ng-click="sortBy(column)">{{ column.displayName }}
<span class="ng-data-grid-sort-icon"></span></a><span ng-show="isResizable(column)"
ng-style="{height:headerRowHeight-10}" class="ng-data-grid-column-resizer"
ng-mousedown="onMousedown($event, $index)"></span>)
gridOptions.columnDefs Options:
cellClass (default: ''): Appends a css class for the column cells.
cellStyle (default: undefined): Allow to apply style to a cell using a function of object.
Usage sample:
cellStyle: { color: '#FF00FF', backgroundColor: '#00FF00'}
OR
cellStyle: alarmColumnCustomStyle
function alarmColumnCustomStyle(row) {
return { color: '#FF00FF', backgroundColor: '#00FF00'};
}
field (default: ''): The string name of the property in your data model you want that column to represent.
displayName (default: ''): Sets the pretty display name of the column.
visible (default: true): Whether or not the column is visible by default.
sortable (default: true): Whether or not column is sortable.
resizable (default: true): Whether or not column is resizable.
excludeFromSelection(default: false): Whether or not column is exlude from selection.
cellTemplate (default: {{row[column.field]}}): Sets the cell template for the column.
sortFunction (default: undefined): Sets a custom sort function for the column. ex
downtimeComparator(timespan1, timespan2)
{
return timespanInSeconds(timespan1) <= timespanInSeconds(timespan2);
}
width (default: "*"): Sets the width of the column. Can be a fixed width in pixels ('42px'), percentage string ('42%'), weighted asterisks (width divided by total number of star 's is all column definition widths).
dataSource Options:
local (default: undefined): Data being provided localy by the controller.
remote(default: undefined): Date being provided remotly by ajax call.
dataSource.remote Options:
url (default: undefined): Url used to retrieve remote data.
parameters (default: undefined): Parameters used to retrieve remote data.
dataProperty (default: data): Parameters used to specify path to retrieve data.
ex: "viewModel.Customers"
pooling (default: false): Whether or not the pooling is active.
poolingRate (default: 30000): Polling rate used to retrieve remote data when pooling is active.
autoStart (default: false): Start poolling automatically.
gridOptions.pagingOptions Options:
pageSizes (default: [250, 500, 1000]): List of available page sizes.
*Page size selector is visible when there is multiple size defined into [pageSizes] parameter.
pageSize (default: 250): List of available page sizes.
currentPage (default: 1): Current page.
autoPage (default: false): Automatic page size calculation base on available space for rows. This will override pageSize value.
gridOptions.sortOptions Options:
direction (default: ''): Sort directions ['asc', 'desc'], directions are case-insensitive
field (default: ''): Sort field, there is no support for multiple field yet!
gridOptions.filterOptions Options:
dataFilter (default: undefined): Filter records based on field specific data.
searchFilter (default: undefined): Filter records based on text keyword.
gridOptions.filterOptions.searchFilter Options:
searchFields (default: [ ]): Fields used when searching records. When * is used all visible fields are added.
Usage sample:
searchFields : ['name', 'age'] searchFields : ['*']
searchText (default: []): Text used when searching records.
Methods:
exportToCsv(): Export the content of the grid to csv.
deselectAll(): Deselect all rows.
selectAll(): Select all rows.
forceRefresh(): Force data source refresh.
startPooling(): Start data source pooling.
stopPooling(): Stop data source pooling.
getTotalItemsCount(): Return total items count.
getSelectedItems(): Return selected items.
clearSelection(): Clear selected items.
selectByKey(['key1', 'key2']): Select rows by key
showWaitIndicator(): Show wait indicator (mainly used for local data source)
hideWaitIndicator(): Hide wait indicator (mainly used for local data source)
Events:
onBeforeSelectionChange(row, isSelected) : Current row, selected state.
If the function return false this will prevent row selection.
onAfterSelectionChange(row, isSelected): Current row, selected state.
onRowFiltering(row): If the function return false this will prevent row insertion
onPageRendered(rows): Current page rows...
onGridDatabound(rows): Grid databound event
onGridInitialized(): Grid initialized event
onCellDatabind(row, column, value): Grid cell binding event, allow user to decorate or transform value before display
onCellStyling(row, column, value, style): Grid cell styling event, allow user to decorate cell before display