Get Specific Row and Cell Index

Get Specific Row and Cell Index

Smart.Grid allows getting and manipulating its rows and cells directly.

Getting Grid Rows

To get a collection of all Grid rows, access the rows property. And here is how to get a row at a specific index:

const grid = <Grid>document.getElementById('grid');
const thirdRow = grid.rows![2];

The row object presents a large number of fields with specific information about the row:

  • element - the repective smart-grid-row HTML element; this property returns null when the row is not in the view.
  • data - the data visualized in the row.
  • index - the row's index.
  • visibleIndex - the row's visible index.
  • id - the row's id.
  • height - the height of the row.
  • minHeight - the row's min height.
  • maxHeight - the row's max height.
  • cellHeight - the height of the row's cells.
  • showDetail - whether the row details are shown.
  • detailHeight - the height of the row details.
  • detailTemplate - sets or gets the row's detail template.
  • checked - whether the row is checked.
  • enabled - whether the row is enabled.
  • expanded - whether the row is expanded (in tree grid mode).
  • filtered - whether the row is filtered.
  • freeze - whether the row is frozen (pinned).
  • selected - whether the row is selected.
  • visible - whether the row is visible. Set the property to false to hide the row.
  • allowCheck - whether the row can be checked.
  • allowResize - whether the row can be resized.
  • allowSelect - whether the row can be selected.
  • allowToggle - whether the row can be toggled (in tree grid mode).
  • header - gets the row's header element.
  • leaf - whether the row is a "leaf" (has no descendants in tree grid mode).
  • parent - the parent row (group row or parent row in tree grid mode)
  • parentId - the parent row's id.
  • children - an array of the row's children (when either grouping or tree grid mode is enabled).
  • level - the row's level of nesting (when the Grid is grouped).

Getting Grid Cells

In addition to the aforementioned row properties, the row object provides a cells collection of all cells in the respective row. The following code shows how to get a specific cell object:

const grid = document.getElementById('grid');
const thirdRow = grid.rows![2];
const cellInSecondColumn = thirdRow.cells![1];

The cell object also presents several fields with useful information about the cell:

  • element- the repective smart-grid-cell HTML element.
  • value - the cell's value; can be used for setting or getting the value.
  • oldValue - the cell's old value (if applicable).
  • row - the object of the row the cell is in.
  • column - the object of the column the cell is in.
  • focused - whether the cell is focused.
  • isEditing - whether the cells is currently being edited.
  • readonly - whether the cell is readonly (cannot be edited).
  • selected - whether the cell is selected.
  • editor - sets or gets the cell's editor.
  • template - the cell's template.
  • tooltip - the cell's tooltip.
  • rowSpan - the number of rows the cell spans (1 by default, if the cell is no part of merged cells).
  • colSpan - the number of columns the cell spans (1 by default, if the cell is no part of merged cells).
  • align - sets or gets the horizontal alignment of the cell.
  • color - sets or gets the cell's text color.
  • background - sets or gets the cell's background.
  • borderColor - sets or gets the cell's borderColor.
  • fontFamily - sets or gets the cell's fontFamily.
  • fontSize - sets or gets the cell's fontSize.
  • fontStyle - sets or gets the cell's fontStyle.
  • fontWeight - sets or gets the cell's fontWeight.
  • verticalAlign - sets or gets the vertical alignment.
  • getFormattedValue - gets a formatted number or Date.
  • setProperties - a function that allows you to update multiple properties with single refresh.