ng-grid

API Documentation

Grid Options

iddefault valuedefinitionplunkerprimaryKeyundefinedField of user's data that should be unique. Allows you automatically update selections state for previously loaded data.LinkaggregateTemplate<div ng-click="row.toggleExpand()" ng-style="{'left': row.offsetleft}" class="ngAggregate"><span class="ngAggregateText">{{row.label CUSTOM_FILTERS}} ({{row.totalChildren()}} {{AggItemsLabel}})</span><div class="{{row.aggClass()}}"></div></div>Define an aggregate template to customize the rows when grouped. See github wiki for more details.LinkafterSelectionChangefunction (rowItem, event) {}Callback for when you want to validate something after selection.LinkbeforeSelectionChangefunction (rowItem, event) { return true; }Callback if you want to inspect something before selection, return false if you want to cancel the selection. return true otherwise. If you need to wait for an async call to proceed with selection you can use rowItem.continueSelection(event) method after returning false initially. Note: when shift+ Selecting multiple items in the grid this will only get called once and the rowItem will be an array of items that are queued to be selected.LinkcheckboxCellTemplate<div class="ngSelectionCell"><input tabindex="-1" class="ngSelectionCheckbox" type="checkbox" ng-checked="row.selected" /></div>Checkbox cell template. see wiki for template detailsLinkcheckboxHeaderTemplate<input class="ngSelectionHeader" type="checkbox" ng-show="multiSelect" ng-model="allSelected" ng-change="toggleSelectAll(allSelected)"/>Checkbox header template. see wiki for template detailsLinkcolumnDefsundefineddefinitions of columns as an array [], if not defines columns are auto-generated. See github wiki for more details.Linkdata[]Data being displayed in the grid. Each item in the array is mapped to a row being displayed.LinkenableCellEditfalseGlobally allows all cells to be editable. use the editableCellTemplate option to override the default text inputLinkenableCellSelectionfalseEnable or disable cell navigation and selectionLinkenableColumnResizefalseEnable or disable resizing of columnsLinkenableColumnReorderingfalseEnable or disable reordering of columnsLinkenableHighlightingfalseEnable or disable cell content selectionLinkenablePagingfalseEnables the server-side paging featureLinkenableRowReorderingfalseEnable drag and drop row reordering. Only works in HTML5 compliant browsers.LinkenableRowSelectiontrueTo be able to have selectable rows in grid. (was canSelectRows prior to 2.0)LinkenableSortingtrueEnables or disables sorting in grid.LinkfilterOptions{ filterText: '', useExternalFilter: false }filterText: The text bound to the built-in search box. useExternalFilter: Bypass internal filtering if you want to roll your own filtering mechanism but want to use builtin search box.LinkfooterRowHeight55Defining the height of the footer in pixels.Linkgroups[]Initial fields to group data by. Array of field names, not displayName.LinkgroupsCollapsedByDefaulttrueCollapse entries when grouping is enabledLinkheaderRowHeight32The height of the header row in pixels.LinkheaderRowTemplateundefinedDefine a header row template for further customization. See github wiki for more details.Linkinitfunction(grid, $scope) { }Function to be called as soon as the grid is initialized.LinkjqueryUIDraggablefalseEnables the use of jquery UI reaggable/droppable plugin. requires jqueryUI to work if enabled. Useful if you want drag + drop but your users insist on crappy browsers.LinkjqueryUIThemefalseEnable the use jqueryUIThemesLinkkeepLastSelectedtrueprevent unselections when ini single selection mode.LinkmaintainColumnRatiosundefinedMaintains the column widths while resizing. Defaults to true when using *'s or undefined widths. Can be ovverriden by setting to false.LinkmultiSelecttrueSet this to false if you only want one item selected at a timeLinknoKeyboardNavigationfalseDisables keyboard navigationLinkpagingOptions{ pageSizes: [250, 500, 1000], pageSize: 250, totalServerItems: 0, currentPage: 1 }pageSizes: list of available page sizes. pageSize: currently selected page size. totalServerItems: Total items are on the server. currentPage: the uhm... current page.Linkplugins[]Array of plugin functions to register in ng-gridLinkrowHeight30Row height of rows in grid.LinkrowTemplate<div ng-style="{ 'cursor': row.cursor }" ng-repeat="col in renderedColumns" ng-class="col.colIndex()" class="ngCell {{col.cellClass}}"><div class="ngVerticalBar" ng-style="{height: rowHeight}" ng-class="{ ngVerticalBarVisible: !$last }">&nbsp;</div><div ng-cell></div></div>Define a row Template to customize output. See github wiki for more details.LinkselectedItems[]all of the items selected in the grid. In single select mode there will only be one item in the array.LinkselectWithCheckboxOnlyfalseDisable row selections by clicking on the row and only when the checkbox is clicked.LinkshowColumnMenufalseEnables menu to choose which columns to display and group by. If both showColumnMenu and showFilter are false the menu button will not display.LinkshowFilterfalseEnables display of the filterbox in the column menu. If both showColumnMenu and showFilter are false the menu button will not display.LinkshowFooterfalseShow or hide the footer the footer is disabled by defaultLinkshowGroupPanelfalseShow the dropzone for drag and drop groupingLinksortInfo{ fields: [], directions: [] }Define a sortInfo object to specify a default sorting state. You can also observe this variable to utilize server-side sorting (see useExternalSorting). Syntax is sortInfo: { fields: ['fieldName1',' fieldName2'], directions: ['asc', 'desc']}. Directions are case-insensitiveLinkshowSelectionCheckboxfalseRow selection check boxes appear as the first column. (was displaySelectionCheckbox prior to 2.0)LinktabIndex0Set the tab index of the Vieport.LinkuseExternalSortingfalsePrevents the internal sorting from executing. The sortInfo object will be updated with the sorting information so you can handle sorting (see sortInfo)LinkvirtualizationThreshold50The threshold in rows at which to force row virtualization on.LinkselectRowfunction (rowIndex, state)Function that is appended to the specifiec grid options for users to programatically select the row regardless of the related entity.LinkselectItemfunction (itemIndex, state)Function that is appended to the specifiec grid options for users to programatically select the row based on the index of the enitity in the data array option.LinkselectAllfunction (state)Function that is appended to the specifiec grid options for users to programatically set the selected value all of the rows to the state passed.Link

ColumnDefs Options

iddefault valuedefinitionplunkeraggLabelFilter''string name for filter to use on the aggregate label ('currency', 'date', etc..) defaults to cellFilter if not set.LinkcellClass''Appends a css class for the column cellsLinkcellFilter''string name for filter to use on the cell ('currency', 'date', etc..)LinkcellTemplate<div class="ngCellText" ng-class="col.colIndex()"><span ng-cell-text>{{COL_FIELD CUSTOM_FILTERS}}</span></div>Sets the cell template for the column. See github wiki for more details.LinkdisplayNamefieldSets the pretty display name of the column. default is the field givenLinkeditableCellTemplate<input ng-class="'colt' + col.index" ng-input="COL_FIELD" />Sets the editableCellTemplate for the column. Displayed when user uses enableFocusedCellEdit and cell is focused.LinkenableCellEditfalseDisplays cellTemplate when user is not focused on cell. Displays editableCellTemplate when user focuses on cell.Linkfield''The string name of the property in your data model you want that column to represent. Can also be a property path on your data model. 'foo.bar.myField', 'Name.First', etc..LinkgroupabletrueWhether or not the user is allowed to group the columnLinkheaderCellTemplate<div class="ngHeaderSortColumn {{col.headerClass}}" ng-style="{'cursor': col.cursor}" ng-class="{ 'ngSorted': !noSortVisible }"><div ng-click="col.sort($event)" ng-class="'colt' + col.index" class="ngHeaderText">{{col.displayName}}</div><div class="ngSortButtonDown" ng-show="col.showSortButtonDown()"></div><div class="ngSortButtonUp" ng-show="col.showSortButtonUp()"></div><div class="ngSortPriority">{{col.sortPriority}}</div><div ng-class="{ ngPinnedIcon: col.pinned, ngUnPinnedIcon: !col.pinned }" ng-click="togglePin(col)" ng-show="col.pinnable"></div></div><div ng-show="col.resizable" class="ngHeaderGrip" ng-click="col.gripClick($event)" ng-mousedown="col.gripOnMouseDown($event)"></div>Sets the template for the column header cell. See github wiki for more details.LinkheaderClass''Appends a css class for the column header.LinkmaxWidth9000Sets the maximum width of the column.LinkminWidth50Sets the minimum width of the column.LinkpinnabletrueWhether or not column can be pinned to the left.LinkresizabletrueWhether or not column is resizable.LinksortabletrueWhether or not column is sortable.LinksortFnBased on the detected data typeSets the sort function for the column. Useful when you have data that is formatted in an unusal way or if you want to sort on an underlying data type. Check the MDN sort docs for examplesLinkvisibletrueWhether or not the column is visible by default. Can be overridden by the user at run-time if showColumnMenu is true.Linkwidth'*'Sets the width of the column. Can be a fixed width in pixels as an int (42), string px('42px'), percentage string ('42%'), weighted asterisks (width divided by total number of *'s is all column definition widths) See github wiki for more details.Link