Grid Component

Grid is a simple React component with huge capabilities which helps to create data driven spreadsheets with capabilities of:

• Sorting and pagination
• Table cells inplace-editing
• Record selection and Bulk operations
• Automatic synchronization of multiple forms and grids with a shared data model
• and more

  <UIKernel.Grid
    ref={(grid) => this.grid = grid}
    model={model}
    cols={columns}
    viewColumns={viewColumns}
    height={height}
    saveFullRecord={saveFullRecord}
    autoSubmit={autoSubmit}
    defaultViewCount={defaultViewCount}
    viewCount={viewCount}
    viewVariants={viewVariants}
    onChangeViewCount={onChangeViewCount}
    onSelectedChange={onSelectedChange}
    className={className}
    multipleSorting={multipleSorting}
    defaultSort={defaultSort}
    sort={sort}
    onSorting={onSorting}
    onPageLoad={onPageLoad}
    onError={onError}
    partialErrorChecking={partialErrorChecking}
  />

Properties

onChangeViewCount arguments:

onSelectedChange arguments:

onSorting arguments:

onPageLoad arguments:

onError arguments:

Methods

• set
• getRecord
• getRecordChanges
• getRecordErrors
• getErrors
• getModel
• async save
• clearRecordChanges
• clearAllChanges
• reset
• handleChangeViewCount
• handleFirstPage
• handleLastPage
• handlePrevPage
• handleNextPage
• getCurrentPage
• getCountRecords
• setPage
• setViewCount
• getPagesCount
• sort
• getSortDirection
• resetSorting
• addRecordStatus
• addRecordStatusGroup
• removeRecordStatus
• hasRecordStatus
• getAllWithStatus
• removeRecordStatusAll
• setSelectedRecords
• selectRecord
• unselectRecord
• isSelected
• toggleSelected
• toggleSelectAll
• selectAll
• unselectAll
• isSelectBlackMode
• getAllSelected
• async updateTable

set

  grid.set(recordId, data);

Change grid record. The method marks changed fields and validates them. If autoSubmit is turned on, method grid.save() will be called.

Parameters:

getRecord

  const gridRecord = grid.getRecord(recordId);

Get record data by recordId. If the record has changes the result data will contain these changes too.

Parameters:

Returns: Object with record data which has the following structure: {field1: 'value1', ..., fieldN: 'valueN'}.

getRecordChanges

  const recordChanges = grid.getRecordChanges(recordId);

Get record changes by recordId. If the record has no changes an empty object will be returned.

Parameters:

Returns: Object with record changes which has the following structure: {field1: 'changes1', ..., fieldN: 'changesN'}.

getRecordErrors

  const recErrors = grid.getRecordErrors(recordId);

Get validation errors of the record with specified recordId.

Parameters:

Returns: ValidationErrors instance.

getErrors

  const errors = grid.getErrors();

Get validation errors of all grid records.

Returns: null if there is no errors else Array of record entries in format: [[‘recId1’, validationErrorsInstance1], …, [‘recIdN’, validationErrorsInstanceN]].

getModel

  const gridModel = grid.getModel();

Get grid model(which was passed to the grid as props.model).

Returns: GridModel instance.

async save

  const result = await grid.save();

Save grid changes: calls props.model.update with current grid changes and resolves it’s response. If the result of that call contains ValidationErrors, they will be added to internal errors list. Successfully saved changes will be cleared form changes list.

Returns: promise which resolves with response from props.model.update.

clearRecordChanges

  grid.clearRecordChanges(recordId);

Clear record changes. Corresponding warnings and errors for the record will be cleared as well.

Parameters:

clearAllChanges

  grid.clearAllChanges();

Clear all grid changes(and their warnings and errors).

reset

  grid.reset();

Reset grid to its initial state: set page = 1 and reset sorting.

handleChangeViewCount

  grid.handleChangeViewCount(event);

Event handler of displayed rows count change in a grid. The method is useful if you would like to implement your own component for selecting amount of records per page, so you would add this event handler to your component and when it is called the grid will perform the event.

Parameters:

handleFirstPage

  grid.handleFirstPage(event);

Event handler of moving to the first page in the grid pagination. The method is useful if you’d like to implement your own grid pagination, so you would add this event handler to your component and when it is called the grid will perform the event.

Parameters:

handleLastPage

  grid.handleLastPage(event);

Event handler of moving to the last page in the grid pagination. The method is useful if you’d like to implement your own grid pagination, so you would add this event handler to your component and when it is called the grid will perform the event.

Parameters:

handlePrevPage

  grid.handlePrevPage(event);

Event handler of moving to the previous page in the grid pagination. The method is useful if you’d like to implement your own grid pagination, so you would add this event handler to your component and when it is called the grid will perform the event.

Parameters:

handleNextPage

  grid.handleNextPage(event);

Event handler of moving to the next page in the grid pagination. The method is useful if you’d like to implement your own grid pagination, so you would add this event handler to your component and when it is called the grid will perform the event.

Parameters:

getCurrentPage

  const currPageIndex = grid.getCurrentPage();

Get current page index (pagination item number) (numeration from 0).

Returns: Number.

getCountRecords

  const gridRecordsNumber = grid.getCountRecords();

Get overall number of records in the grid (including all pagination pages, even if those pages aren’t fetched yet).

Returns: Number. If the grid has no records the method will return 0.

setPage

  grid.setPage(page);

Set current page index(pagination item number) (numeration from 0).

setViewCount

  grid.setViewCount(viewCount);

Set number of displayed elements(table rows) for each page.

This method is only available if props.viewCount isn’t set.

Parameters:

getPagesCount

  const gridPagesCount = grid.getPagesCount();

Get number of pages in pagination.

Returns: Number

sort

  grid.sort(string field, string direction)

Add sorting of grid records by specified field in specified direction: if props.multipleSorting is set - the specified rule will be added to an internal sorting queue, else an internal sorting queue will be set to the specified rule. The grid will be rerenderead and props.onSorting will be called afterwards.

This method is only available if props.sort isn’t set.

Sorting is performed by props.model, not by the grid component itself. Grid component only passes there its internal sorting queue in model.read() method.

Parameters:

getSortDirection

  const sortingRules = grid.getSortDirection();

Get current sorting rules.

Returns: null if no sorting rules is set, else returns object if props.multipleSorting isn’t set else returns object[] with sorting rules. The object will consist of fields “column” and “direction”.

resetSorting:

  grid.resetSorting();

Reset sorting rules to default parameters(props.defaultSort). Calls props.onSorting and rerenders grid table afterwards.

This method is only available if props.sort isn’t set.

addRecordStatus

  grid.addRecordStatus(recordId, status);

Add record status(the status will be stored in internal hash map and it will be set className with the status value to the corresponding row in the grid).

Parameters:

addRecordStatusGroup

  grid.addRecordStatusGroup(Array group, status);

Add status to records group(to each record of the specified array group) (the status will be stored in an internal hash map and it will be set className with the status value to the corresponding row in the grid).

Parameters:

removeRecordStatus

  grid.removeRecordStatus(recordId, status);

Remove record status(the status will be removed from the internal hash map and it will be removed className with the status value from the corresponding row in the grid).

Parameters:

hasRecordStatus

  const recHasStatus = grid.hasRecordStatus(recordId, status);

Check record status presence.

Parameters:

Returns: Boolean. true - record with id = recordId has status, else returns false.

getAllWithStatus

  const ids = grid.getAllWithStatus(status);

Get all record IDs that have the specified status.

Parameters:

Returns: Array with IDs of records that have specified status. If there is no records that have the specified status, an empty array will be returned.

removeRecordStatusAll

  grid.removeRecordStatusAll(status);

Remove specified status from all records.

setSelectedRecords

  grid.setSelectedRecords(selectedIds, blackListMode);

Select only specific records.

Parameters:

selectRecord

  grid.selectRecord(recordId, ignoreBlackList);

Select specified record. props.onSelectedChange() will be called afterwards. If all the grid records becomes selected - the BlackList mode will be toggled.

Parameters:

unselectRecord

  grid.unselectRecord(recordId, ignoreBlackList);

Unselect specified record. props.onSelectedChange() will be called afterwards. If all the grid records becomes selected - the BlackList mode will be toggled.

Parameters:

isSelected

  isRecSelected = grid.isSelected(recordId);

Check if a record is selected.

Parameters:

Returns: Boolean. Record selection state: true - record is selected and records selection mode = ‘Whitelist’, else returns false.

toggleSelected

  grid.toggleSelected(recordId);

Switch selection of the specified record: if the record is selected, it will be called grid.unselectRecord(), else it will be called grid.selectRecord().

Parameters:

toggleSelectAll

  grid.toggleSelectAll();

Switch records selection mode: if current state is “blacklist”, calls grid.unselectAll(), else calls grid.selectAll().

selectAll

  grid.selectAll();

Select all records: switches records selection mode to “blacklist”, clears list of selected records, rerenders grid table and calls props.onSelectedChange().

unselectAll

  grid.unselectAll();

Unselect all records: switches records selection mode to “whitelist”, clears list of selected records, rerenders grid table and calls props.onSelectedChange().

isSelectBlackMode

  const isBlackMode = grid.isSelectBlackMode();

Get current records selection mode.

Returns: Boolean. Records selection mode: true - Blacklist, false - Whitelist.

getAllSelected

  const selectedRecordIds = grid.getAllSelected();

Get IDs of selected records. Note that if Blacklist is turned on, it will be returned IDs of UNselected records.

Returns: Array. E.g.: [1, 3, 17]

async updateTable

  await grid.updateTable();

Update table (it will fetch table data calling props.model.read()). Note that it will be fetched only visible data, so if the grid has several pages of data, it will be fetched only data of the current page.

Usage example

class ExampleComponent extends React.Component {
  clearChanges() {
    this.grid.clearAllChanges();      //here we use one of the grid component methods
  }

  render() {
    return (
      <UIKernel.Grid
        ref={(grid) => this.grid = grid}
        model={this.state.model}                             // Grid model
        cols={columns}                                       // columns configuration
        viewCount={10}                                       // display 10 records per page
        defaultSort=\{\{column: "name", direction: "asc"\}\} // default sorting
      />
      <a className="btn btn-success" onClick={this.clearChanges}>Clear</a>
    );
  }
}

ReactDOM.render(<ExampleComponent />, document.getElementById('example'));

Full example you can found in the tutorial.