Home

ng-react-grid directive grid

Example:

 <ng-react-grid grid="grid"></ng-react-grid>

 var dataSet = [{
   user: {
     firstName: 'Joe',
     lastName: 'Smith'
   },
   disableCheckbox: true
 }, {
   user: {
     firstName: 'Jane',
     lastName: 'Smith'
   },
   disableCheckbox: false
 }];

 $scope.grid = {
    data: dataSet,
    columnDefs: [
        new ngReactGridCheckbox($scope.selections, 
            {batchToggle: true,
             disableCheckboxField: 'disableCheckbox'}),
        {
            field: "user.firstName",
            displayName: "First Name",
            columnFilter: true,
            edit: function (row) {
                return new ngReactGridTextField(row, 'user.firstName');
            }
        },
        {
            field: "user.lastName",
            displayName: "Last Name"
        }
    ]
};

               

Option	Type	Default Value	Description
data	array	[]	Data set
columnDefs	array	[]	Ordered column properties
showGridShowPerPage	boolean	true	Displays dropdown for number of entries shown per page
showGridSearch	boolean	true	Displays global table search input
pageSize	integer	25	Initial number of entries shown per page
pageSizes	array	[25, 50, 100, 500]	Set of selectable number of entries shown per page (if showGridShowPerpage is enabled)
localMode	boolean	true	Disable to use server-side processing
height	integer	500	Height of table

ColumnDefs

Option	Type	Default Value	Description
field	string	''	Data object key or path to column data
displayName	string	''	Column header name
columnFilter	boolean	false	Enables filtering for column data

ColumnDefs Components

ngReactGridCheckbox

Option	Type	Default Value	Description
batchToggle	boolean	false	Enables batch toggle checkbox in header that checks/unchecks all row checkboxes
disableCheckboxField	string	''	Disable checkboxes in rows with falsy value in referenced field
hideDisabledCheckboxField	boolean	false	Prevent disabled checkboxes from being rendered

** API **

Method	Options	Description
setHeaderCheckboxState(checkedValue)		Selects or de-selects checkbox in header when batchToggle is enabled
setVisibleCheckboxState(checkedValue)		Selects or de-selects all non-disabled checkbox in active table page. Updates bound selectionTarget object
setVisibleCheckboxState(checkedValue, [options])		Selects or de-selects checkboxes in specific rows
targetCheckboxes	Object with 'key' and 'value' attributes and associated values that specify which rows to target

Example:

var checkboxGrid = 
  new ngReactGridCheckbox($scope.selections, 
      {batchToggle: true,
       disableCheckboxField: 'disableCheckbox'});

/* After pushing into grid.columnDefs */

// de-selects checkbox in header when batchToggle is enabled
checkboxGrid.setHeaderCheckboxState(false)

// Selects all non-disabled checkbox in active table page. Updates bound selectionTarget object
checkboxGrid.setVisibleCheckboxState(true); 

// Selects only checkbox in rows whose 'user.firstName' in grid.data value is 'Jose1'
checkboxGrid.setVisibleCheckboxState(true, {targetCheckboxes: {key: 'user.firstName', value: 'Jose1'}});