realgrid package

Classes

Abstract Classes

Enumerations

Interfaces

Type Aliases

Enumeration Desc

BarOrigin

The position of the bar in BarCellRenderer

Members:

Example:

column.renderer = {
      "type": "bar",
      "origin":"right"
}

ButtonVisibility

How to display the column button and edit button in the data cell when a button is set in the column

Members:

Remarks:

Used in the buttonVisibility and editButtonVisibility properties of ValueColumn.

Example:

// column button
column.buttonVisibility = false;
 
// Buttons in editor
column.editButtonVisibility = false;

CalendarMode

Set limits on the year, month, and day selection screen.

Members:

Remarks:

Used to select year-month or only year.

CellButton

Type of button to display on the right side of data cell

Members:

Remarks:

Used in ValueColumn.button.

Example:

column.button = 'popup';

CellLayoutType

Specifies the type of layout.

Members:

Remarks:

GridBase.addLayout() or [CellLayoutGroupItem.addLayout()](/refsWhen adding a layout using /Interface/CellLayoutGroupItem#addlayout), specify the layout type.

ColumnHeaderItemLocation

Position type of image or check box in column header

Members:

Remarks:

Used in ColumnHeader.checkLocation.

Example:

let col = grid.columnByName('col1')
col.header.checkLocation = 'leftEdge';

ColumnLayoutDirection

Placement direction when setting Cell Layout

Members:

Remarks:

Used in CellLayoutGroupItem.direction.

DataDropMode

Mode when dropping data

Members:

DataFillMode

How to populate data

Members:

Remarks:

Used in DataFillOptions.fillMode.

DefaultShowDate

When using the calendar editor, the type of dates displayed on the calendar

Members:

Remarks:

Used in DateCellEditor.

Example:

column.editor = { type: "date", maxLength: 6, yearNavigation: true, defaultShowDate: 'today' }

DragFeedbackStyle

Feedback style that shows the drop location when the mouse is over

Members:

DropDownPosition

A list of DropDownCellEditor or a calendar of DateCellEditor, BTDateCellEditor Position of selection box

Members:

Example:

column.editor = {
type: 'list',
values: ['value1', 'value2'],
dropDownPosition: 'editor'
}

DropDownSortStyle

DropDownCellEditor How to sort the list

Members:

Example:

column.editor = {
type: 'list',
values: ['value1', 'value2'],
itemSortStyle: 'descending'
}

DropDownValueLabel

How to show the list of DropDownCellEditor

Members:

Example:

column.editor = {
type: 'list',
values: ['value1', 'value2'],
labels: ['label1', 'label2'],
displayLabels: 'valueLabel'
}

EdgeMark

edgeMark

Members:

Remarks:

Used in ValueColumn.edgeMark.

Example:

column.edgeMark = "leftTop"

ExitGridWhenTab

Conditions for leaving the grid when entering a tab

It can be set in EditOptions.exitGridWhenTab.

Members:

Example:

grid.editOptions.exitGridWhenTab = 'grid';

ExpanderVisibility

Whether to display Expander when grouping rows

Members:

Remarks:

Used in RowGroup.mergeExpanderVisibility.

Example:

gridView.rowGroup.mergeExpanderVisibility = 'always';

ExpandWhenSetData

Sets whether to keep the existing expansion after set data.

Members:

Remarks:

Used in TreeOptions.expandWhenSetData.

ExportCompression

Whether to compress files when creating them

Members:

ExportLayoutExpand

When exporting a layout with layout Expandable set to true to Excel

Members:

ExportTarget

Destination when exporting a grid to an external document

Members:

ExportType

Types of when to export a grid to an external document

Members:

Remarks:

Used in ExportBaseOptions.type.

FilterMode

Filter operation mode after data modification

Members:

Remarks:

Used in GridView.filterMode.

Example:

gridView.filterMode = 'explicit';

FocusMoveStep

How to move focus when inputting the left or right arrow when there is a columnGroup

Members:

FocusType

Display focus in layer form or display only the border.

It can be set in DisplayOptions.focusType.

Members:

GridCellType

Grid cell types

Members:

Remarks:

Used in ClickData, etc.

Example:

gridView.onMenuItemClicked = function (grid, item, clickData) {
      console.log(item.label + "was clicked.");
      console.log("cellType is: " + clickData.cellType);
};

GridFitStyle

Constants that control how columns are displayed

Members:

Remarks:

Used in DisplayOptions.fitStyle, etc.

Example:

grid.displayOptions.fitStyle = 'even'

GroupShowMode

Determines whether the group column will be displayed when collapsed or expanded.

Set in CellLayoutItem.groupShowMode.

Members:

Remarks:

It is visible or hidden depending on the expansion state of the parent layout.

HandleVisibility

How to display handles

Members:

Remarks:

The function icon displayed in the column header during sorting or filtering is called a handle.

HandleVisiblity is implemented as the handleVisibility property of SortingOptions, FilteringOptions.

Example:

grid.sortingOptions.handleVisibility = 'visible';

IconLocation

Location of icons, checkboxes, shapes, etc. to be rendered

Members:

Remarks:

IconCellRendererUsed in , CheckCellRenderer, ShapeCellRenderer.

Example:

...
"renderer": {
          "type": "check",
          "checkLocation": "right"
      },
...

IndicatorValue

Type of content to be displayed on the indicator

Members:

InlineFilterOperator

This is the type of operator that can be used in FilterPanel.

Members:

Remarks:

There are restrictions on the operators that can be used depending on DataColumn.valueType.

ItemState

Condition of the item

Members:

ItemType

Types of items in the grid

Members:

Remarks:

Used in getModelAs(), etc.

Example:

let model = gridView.getModelAs(3, 'row');

LayoutDirection

Direction of item placement

Members:

MenuItemType

Types of menu items displayed in PopupMenu, etc.

Members:

Remarks:

Used in PopupMenuItem.type and MenuItem.type.

Example:

let menu = [{
      label: "This is menu3",
      type: "check",
      checked: true,
  }]

NullsOrder

When sorting, place undefined, null '' at the top or bottom regardless of ascending or descending order.

Set in SortingOptions.nullsOrder.

Members:

PolygonShape

List of shapes available in ShapeCellRenderer

Members:

Example:

column.renderer = {
     "type": "shape",
     "shape": "triangle" // PolygonShape
}

RefreshMode

Constants needed when redrawing the grid

Members:

Remarks:

Used in DisplayOptions.refreshMode.

Example:

grid.displayOptions.refreshMode = 'visibleOnly';

RestoreMode

Restoration mode type

Members:

RowGroupAdornments

How to display header or footer when in row group state

Members:

Remarks:

RowGroup.collapsedAdornments, RowGroup.expandedAdornmentsIt is used in

Example:

grid.setRowGroup({expandedAdornments: "none"});

RowMaskType

Display type of selected row (row mask type)

Members:

Remarks:

rowBlockType, rowHoverType, [rowFocusType](/refs/Interface/DisplayOptions #rowfocustype), etc.

Example:

grid.displayOptions.rowBlockCallback = f;
grid.displayOptions.rowBlockType = 'row';

RowState

status of row

Members:

ScrollOnEditing

Processing status when scrolling while editing

Members:

Remarks:

It can be set in EditOptions.scrollOnEditing.

Example:

grid.editOptions.scrollOnEditing = 'cancel';

SelectionDisplay

Cell selection display

Members:

Remarks:

developing...

SelectionMode

Mode for cell selection

Members:

Remarks:

Used in DisplayOptions.selectionMode.

SelectionStyle

Styles for cell selection

Members:

Remarks:

SINGLE, SINGLE_ROW, and SINGLE_COLUMN are called single selection styles.

Used in DisplayOptions.selectionStyle.

For the RowIndicator.selectable function to work properly, DisplayOptions.selectionStyle must not be a single selection style.

If DisplayOptions.selectionStyle is not a single selection style, a column-wise selection area is specified when you press the ctrl key and then drag the column header.

SortCase

Case sensitive type

Members:

Remarks:

Used in SortingOptions.textCase, orderBy(), etc.

Example:

gridView.orderBy(['fruit'], ['descending'], ['insensitive']);

SortDirection

sorting method

Members:

Remarks:

Used in getDistinctValues(), orderBy(), etc.

Example:

gridView.orderBy(['fruit'], ['descending'], ['insensitive']);

SortMode

Sort operation mode after data modification

Members:

Remarks:

Used in GridBase.sortMode.

Example:

gridView.sortMode = "explicit";

SortStyle

Sort type when clicking on grid column header

Members:

Remarks:

Used in SortingOptions.style.

Example:

grid.sortingOptions.style = 'inclusive'

StateMark

How to display status in status bar

Members:

SummaryMode

How to calculate the sum of each column in the grid

Members:

Remarks:

It can be set and used in GridBase.summaryMode, etc.Example:

let sum = gridView.getSummary('unitPrice', 'sum');

SummaryType

Type for calculating the total value of a field

Members:

Remarks:

Used in GridBase.getSummary().

Example:

let sum = gridView.getSummary('unitPrice', 'sum');

SyncGridHeight

Change the height of the grid so that all searched data can be seen.

Members:

Remarks:

If there is no data, the initial height is displayed. If a lot of data is output, it becomes slow, so you need to import only some data and then add data using the 'More' button.

TextInputCase

uppercase and lowercase letters

Members:

Remarks:

Used in ValueColumn.textInputCase, CellEditor.textCase, etc.

Example:

column.editor = { type: "line", maxLength: 1, textCase: 'lower'}

TimeCategory

Classification unit when filtering by time

Members:

Remarks:

Used in FilterAutomatingOptions.timeCategorize.

TimeSelectType

Members:

TreeExpanderIconStyle

Specifies the style of the default icon displayed in Tree Expander.

Members:

UserFilterPosition

Position of user filter when autoFilter and user filter are shown at the same time

Members:

ValidationLevel

Data verification result level

Members:

Remarks:

Used in GridBase.setValidations(), etc.

Example:

gridView.setValidations({
      message: 'Too expensive!',
      criteria: "values['UnitPrice'] > 100",
      level: 'error'
})

ValidationMode

Verification method

Members:

Remarks:

Used in GridBase.setValidations(), etc.

Example:

gridView.setValidations({
      message: 'Too expensive!',
      criteria: "values['UnitPrice'] > 100",
      mode: 'always'
})

ValueType

Data type of data field

Members:

Remarks:

When used in DataField.dataType, TEXT, NUMBER, DATETIME, BOOLEAN It is used as , OBJECT, and when you want to limit the applied data type, it can be given to DataField.subType as follows.

dataType is TEXT: CHAR

dataType has NUMBER: INT, UNUM, UINT

dataType is DATETIME: DATE

Example:

let fields = [{
...
      dataType: "text",
      subType: "char",
...
}]
 
ds.setFields(fields);

VerticalMoveStep

How to move focus when an up or down arrow is entered in a subcolumn of a ColumnGruop whose direction is vertical.

Members:

Type Aliases Desc

BooleanOutputCallback

Callback function format to be performed when converting a boolean field

Remarks:

Used in DataOutputOptions.booleanCallback.

[Parameter list]

ds - DataProvider control

row - the index of the item

field - field name

value - the value

[return value] - value to output

Example:

const f = function(ds, row, field, value) {
      return !!value;
}

CategoryCallback

Callback format for custom classification during automatic filtering

Remarks:

[Parameter list]

column - Column with automatic filtering applied

values - all values

[Return value] - Array type of category classification model

Example:

const f = function(column, values) {
      const emptyText = 'Empty item'
      if (!values) {
          return null;
      }
      const valids = values.filter(function (el) { return el !=undefined && el != null; });
      const min = Math.min.apply(null, valids);
      const vlen = values.length;
      let unit;
      if (vlen > 15) {
          const groupCount = Math.min(Math.round(vlen / 5)), 10);
          unit = Math.round(vlen / groupCount);
      } else {
          unit = 1;
      }
      let categories = [];
      let gvals = [];
      let gindex = 0;
      let gmin = min;
      let isEmpty = false;
      for (let i = 0; i < vlen; i++) {
          const v = values[i];
          if (v === undefined || v === null) {
              isEmpty = true;
              continue;
          }
          if (i == gindex + unit || i === vlen - 1) {
              categories.push({ text: gmin + ' ~ ' + v, values: gvals });
              gvals = [v];
              gindex = i;
              gmin = v;
          } else {
              gvals.push(v);
          }
      }
      if (isEmpty) {
          categories.push({ text: emptyText, empty: true });
      }
      return categories;
}

CellSpanCallback

Callback to set custom cell spanning

Remarks:

Used in CellLayoutColumnItem.

[Parameter list] grid - GridBase control

layout - layout item

itemIndex - the index of the row

Example:

const f = function (grid, layout, itemIndex) {
     var value = grid.getValue(itemIndex, layout.column.dataIndex);
     if (value) {
         return value[0] === "B" ? 3: value[0] === "F" ? 2:1;
     }
     return 1;
};

CellStyleCallback

Callbacks for dynamic cell style changes

Remarks:

When returning ColumnStyleObject, GridBase.setCellStyleCallback(), [ValueColumn.styleCallback](/refs/Interface/ Used in ValueColumn#stylecallback).

ColumnSummaryStyleObject returns GridFooter.cellStyleCallback, [HeaderSummary.cellStyleCallback](/refs/Interface/HeaderSummary# cellstylecallback).

Specified as a style name when returning a string

[Parameter list]

grid - GridBase control

model - a cell in the grid

[Return value] - Object or style class name to apply dynamic style

Example:

const f1 = function(grid, model) {
      if (model.value > 5) return "rg-data-cell bold-cell";
      if (model.value < 0 && model.value > -10) {
          return {
              styleName: 'custom-negative-cell',
              renderer: {
                  type: 'bar',
                  absoluteValue: true
              }
          }
      }
}
 
const f2 = function(grid, model) {
      if (model.value > 10) {
          return {
              styleName: 'custom-summary-cell'
          }
      }
}
 
// Apply to all data cells
gridView.setCellStyleCallback(f1);
 
// Apply to each column
let column = gridView.columnByName('Price');
column.styleCallback = f1;
 
// Apply footer
gridView.footer.cellStyleCallback = f2;
 
// Apply header summary
gridView.headerSummary.cellStyleCallback = f2;

CheckableCallback

A callback that determines whether a check is possible in CheckBar

Remarks:

[Parameter list]

dataSource - DataProvider control

item - The item to be checked (row item, header item, etc.)

[Return value] - Checkable or not

Example:

const f = function(dataSource, item) {
      if (item.value) {
          return item.value !== 'doNotCheck';
      }
      else {
          return false;
      }
}

ColumnObjectCallback

A callback used when displaying data whose dataType is object on the screen.

Remarks:

[Parameter list]

fieldName - field name

dataRow - dataRow

value - value

[Return value] - Content to display on screen

Example:

const callback = function(fieldName, dataRow, value) {
   return JSON.stringify(value);
}
 
gridView.columnByName("objectColumn").objectCallback = callback;

ColumnSummaryCallback

Callback format used when the user specifies the value displayed in the footer or summary of the column

Remarks:

[Parameter list]

grid - gridView

column - Column of footer or summary

footerIndex - Order number if there are multiple footers in the column

summary - footer or summary object GroupItem object if groupFooter

value - the value if expression is specified

[Return value] - Content to be displayed on the screen.

CompareCallback

Value comparison callback format for user-specified conditions when searching

Remarks:

[Parameter list]

v1 - the value to be searched for

v2 - the searched value

sensitive - case sensitive

partialMatch - Whether to also search for contained characters

[Return value] - Whether the value matches

Example:

const f = function(v1, v2, sensitive, partialMatch) {
      if (v1 === v2) {
           return true;
      }
      let s1 = String(v1);
      let s2 = v2 == null ? undefined : String(v2);
      if (!s1 && !s2) {
           return true;
      }
      if (!s1 || !s2) {
           return false;
      }
      if (!caseSensitive) {
           s1 = s1.toLowerCase();
           s2 = s2.toLowerCase();
      }
      if (partialMatch) {
      return s2.indexOf(s1) >= 0;
      } else {
      return s1 == s2;
      }
}

CompareFunction

Comparison function format

Remarks:

It has the same format as CompareFunction used in Array.prototype.sort().

Used in DataProviderBase.setDataComparer().

ConfigObject

CopyTextCallback

Callback type that returns text saved to the clipboard when copying the grid

Remarks:

[CopyOptions.copyTextCallback]Used in (/refs/Interface/CopyOptions#copytextcallback).

[Parameter list]

grid - GridBase control

itemIndex - itemIndex of the row being copied

column - DataColumn object

[Return value] - When returning undefined, the text to be copied to the clipboard, the text is copied according to value or other settings in copyOptions.

Example:

const f = function(grid, itemIndex, column, value) {
      if (value != null && column.name === "number1") {
          return value + "";
      }
}
grid.copyOptions.copyTextCallback = f;

CreateFooterCallback

Callback format for specifying whether to display a specific group footer

Remarks:

This is the format used in RowGroup.createFooterCallback.

[Parameter list]

owner - GridBase control

group - group item

footerIndex - Index within the footer collection

Example:

createFooterCallback: function(owner, group, footerIndex) {
    if (group.level >= 5) { return false }
    if (group.level === 4) {
        let relation2 = owner.getDataSource().getValue(group.firstItem.dataRow, "relation2");
        return relation2 === "relative"
    }
    if (group.level === 3) {
        let relation1 = owner.getDataSource().getValue(group.firstItem.dataRow, "relation1");
        return relation1 === "same person"
    }
    return true;
}

DataDragCallback

Callback format that occurs when starting drag and drop between grids

Remarks:

If false is returned, drag and drop is canceled. Used in DataDropOptions.dragCallback.

[Parameter list]

source - the GridBase control where the dragged item was located

sourceItems - Index of items in the dragged grid

target - GridBase control or HTMLElement to drop

targetItem - Index of the item in the grid to drop

targetColumn - targetColumn in the grid to drop to

[Return value] - Whether drag and drop is possible

Example:

gridView.dataDropOptions.dragCallback = function (source, sourceItems, target, targetItem) {
     return targetItem % 2 == 0;
}

DataDragLabelCallback

Format of the callback to determine the label text of the item being dragged

Remarks:

[Parameter list]

source - the GridBase control where the dragged item was located

sourceItems - Index of items in the dragged grid

target - GridBase control or HTMLElement to drop

targetItem - Index of the item in the grid to drop

targetColumn - targetColumn in the grid to drop to

[return value] - the text of the label

Example:

gridView.dataDropOptions.labelCallback = function (source, sourceItems, target, targetItem) {
     return sourceItems.length + " rows ";
}

DataDropCallback

Callback format that occurs when dragging and dropping between grids

Remarks:

Used in DataDropOptions.callback.

[Parameter list]

source - the GridBase control where the dragged item was located

sourceItems - Index of items in the dragged grid

target - GridBase control or HTMLElement to drop

targetItem - Index of the item in the grid to drop

targetColumn - targetColumn in the grid to drop to

Example:

gridView.dataDropOptions.callback = function (source, sourceItems, target, targetItem) {
     alert('row from ' + sourceItems + ' to ' + targetItem);
     for (var i = 0; i < sourceItems.length; i++) {
         var r = source.getDataRow(sourceItems[0]);
         var ds = source.getDataSource();
         var row = ds.getJsonRow(r)
         if (targetItem >= target.getItemCount()) {
             ds.addRow(row);
         } else {
             r = target.getDataRow(targetItem);
             target.getDataSource().insertRow(r, row);
         }
     }
}

DataFieldInput

Input format for data fields

Remarks:

Used in setFields, etc.

Example:

// string
ds.setFields('fieldName');
 
// model
let fields = ds.getFields();
ds.setFields(fields);
 
//config
ds.setFields({
      fieldName: 'OrderID',
      dataType: 'text',
});

DataFilters

Array and collection objects in filter conditions

Remarks:

Used in LocalDataProvider.setFilters().

Example:

// string
dataProvider.setFilters([
   "value['field1']='Singer'",
   "value['field2']='Woman'"
], "and");
 
//object
dataProvider.setFilters([
   {criteria: "value['field1']='Singer'"},
   {criteria: "value['field2']='Woman'"}
], "and");

DataValues

Row objects and row arrays

Remarks:

It is used in various ways in the method of LocalDataProvider, LocalTreeDataProvider.

RowObject or RowValues.

Example:

//array
let row = ['value1', 'value2', 'value3']
 
//object
let row = {field1: 'value1', field2: 'value2', field3: 'value3'}

DatetimeOutputCallback

Callback function format to be performed when converting a datetime field

Remarks:

Used in DataOutputOptions.datetimeCallback.

[Parameter list]

ds - DataProvider control

row - the index of the item

field - field name

value - the value

[return value] - value to output

Example:

const f = function(ds, row, field, value) {
      if (value === 'today') {
          return new Date();
      }
      return new Date(value);
}

DropFieldMapCallback

A callback format that returns the rules applied when moving/copying by dragging and dropping between grids.

Remarks:

[Parameter list]

source - the GridBase control where the dragged item was located

sourceItems - Index of items in the dragged grid

target - GridBase control to drop

targetItem - Index of the item in the grid to droptargetColumn - targetColumn in the grid to drop to

[Return Value] - FieldMap object

Example:

gridView.dataDropOptions.fieldMapCallback = function (source, sourceItems, target, targetItem) {
     if (targetItem % 2 == 0) {
         return {
             Country: "Country",
             CompanyName: "ShipAddress",
             EmployeeID: "ShipPostalCode"
         }
     }
}

EditMask

The editor's display format that can be applied to text or date fields.

Remarks:

When applying ValueColumn.editor, it is used in the editor's mask property.

For numeric fields, use NumberCellEditor.editFormat.

The format applied to Marks is displayed only in the editor.

dropDown, multiLine, multiCheck, does not work in number Editor.

Example:

// string
column.editor = {
      type: 'line',
      mask: '9999-99-99'
}
 
//object
column.editor = {
      type: 'line',
      mask: {
          editMask: '9999-99-99',
          placeHolder: 'input...'
      }
}

ExpanderVisibleCallback

A callback that returns whether the group expander is visible.

Remarks:

This is the format used in RowGroup.expanderVisibleCallback.

[Parameter list] grid - GridBase control

group - group item

Example:

gridView.rowGroup.expanderVisibleCallback = function(grid, group) {
      // Only 2-level groups display the expander.
      return group.level === 2;
}

ExportSimpleCallback

Format of the callback to be performed when completing the export to set done

Remarks:

[Parameter list]

data - Sent when the target is stream.

ExportValueCallback

Format for specifying callbacks to be performed when outputting each field in Grid Export Settings

Remarks:

[Parameter list]

index - index

name - Column name or field name

value - the entered value

grid - the grid or data provider being exported

[return value] - value to be exported

FieldValueCallback

If it is a calculated field, the type of callback to be calculated by specifying a formula

Remarks:

Used in DataField.valueCallback or DataFieldObject.valueCallback.

Finally, simply return the value you want to output.

[Parameter list]

ds - DataProvider control

rowId - Row unique number

fieldName - Field name

fields - array of field names

values - array of values

[return value] - value to output

Example:

function (ds, rowID, fieldName, fields, values) {
     let quantity = values[fields.indexOf("Quantity")];
     let unitprice = values[fields.indexOf("UnitPrice")];
     if (isNaN(quantity) || isNaN(unitprice))
         return undefined;
     else
         return quantity >= 1000 ? Math.round(quantity * unitprice * 0.95) : quantity * unitprice;
}

FilterCallback

filter callback

Remarks:

If the return value is undefined, ColumnFilter.criteria is applied.

Used in ColumnFilter.callback or FilterAutomatingOptions.selectCallback.

[Parameter list]

ds - Provider control

dataRow - the index of the row

level - level

field - field name

filter - ColumnFilter object

value - the value

[Return value] - Whether to decide on filtering

Example:

const f = function(ds, dataRow, level, field, filter, value) {
      let res = isMatched(value, filter.criteria);
      return res;
}

FilterPanelCallback

This is a callback called when you enter text in the input window of FilterPanel and then type enter or after filterDelay.

Remarks:

If true is returned, grid filtering is not performed. When operator and text are returned, filtering is performed using the entered operator and text.

[Parameter list]

grid - GridBase control

column - the column object of the input window

operator - InlineFilterOperator

text - entered text

Example:

grid.filterPanel.filterPanleCallback = function(grid, column, operator, text) {
  if (column.fieldName === "notRun") {
      return true; // Fields that are notRun are not filtered.
  } else if (column.fieldName = "userFilter") {
      return {
          operator: InlineFilterOperator.STARTS_WITH,
          text: text.substr(0,2) // Filter only the first 2 characters of the entered characters.
      }
  }
}

GetAriaLabelCallback

Callback format used in CellRenderer.ariaLabelCallback

Remarks:

[Parameter list]

grid - GridBase control

model - a cell in the grid

[Return Value] - String to be read by the screen reader.

Example:

const f = function(grid, model) {
      var s = model.value;
      var date = grid.getValue(model.item.index, "date")
      s += (date.getTime() > Date.now() - 60*60*24*7*1000) ? " new" : "";
      return s;
}
 
column.renderer = {
      type: 'text',
      ariaLabelCallback: f
}

GetCellTitleCallback

A callback format for setting the alt text of an image when rendering an image or setting the title text of an HTML Anchor Element when rendering a link cell.

Remarks:

Used in ImageCellRenderer.titleCallback or LinkCellRenderer.titleCallback.

[Parameter list]

grid - GridBase control

model - a cell in the grid

[return value] - alt text or title text

Example:

const f = function(grid, model) {
      return 'catimage'
}

GetCheckedCallback

Callback type that determines the check value when rendering

Remarks:

Used in CheckCellRenderer.getCheckedCallback.

[Parameter list]

grid - GridBase control

itemIndex - Order of items

column - a column object

value - the value

[Return value] - Checked or not

Example:

const f = function(grid, itemIndex, column, value) {
      if (typeof value === "number") {
          return value % 2 === 1;
      }
      else if (typeof value ==="boolean") {
          return value;
      }
      else {
          return Boolean(v);
      }
}

GetClassCallback

Add class to a tag of linkRenderer

Remarks:

Used when adding a class to the a tag of LinkCellRenderer.

[Parameter list]

grid - GridBase control

model - a cell in the grid

[return value] - string

Example:

const callback = function (grid, model) {
   let cls = "";
   model.value.indexOf("New post") > 0 && (cls += " new");
   model.value.indexOf("Secret post") > 0 && (cls += " lock");
   // When adding a new post/secret post icon to the link in background format
}
 

GetImageCallback

A callback format that specifies the path to the image for rendering.

Remarks:

Used in ImageCellRenderer.imageCallback or IconCellRenderer.iconCallback.

[Property List]

grid - GridBase control

model - a cell in the grid

[return value] - image path

Example:

const f = function(grid, model) {
      const base = '/images/';
      if (jpgSet.indexOf(model.value)){
          return base + model.value + '.jpg';
      }
      else base + 'default.jpg';
}

GetLinkUrlCallback

Callback format used in LinkCellRenderer.urlCallback

Remarks:

[Parameter list]

grid - GridBase control

model - a cell in the grid

[Return value] - Url address

Example:

...
      "renderer" : {
          "type": "link",
          "urlCallback": function (grid, cell) {
              return "http://realgrid.com";
          },
      }
...

GetShapeCallback

Callback format used in ShapeCellRenderer.shapeCallback to specify the type of shape in the shape renderer.

Remarks:

[Parameter list]

grid - GridBase control

model - a cell in the grid

[Return value] - Shape type, PolygonShape or 'ellipse'.

Example:

const f = function(grid, model) {
      if (model.value) {
          return 'ellipse';
      }
      else {
          return 'minus';
      }
}

GetTemplateCallback

Callback format used in TemplateCellRenderer.callback

Remarks:

[Parameter list]

grid - GridBase control

model - a cell in the grid

width - width of the cell

height - height of the cell

[Return value] - template format of string type

Example:

const f = function (grid, model, width, height) {
     return "<img src='images/realgrid-logo.png' height='" + height / 2 + "'></img>" + "<div>" + model.value + "</div>";
}
 
column.renderer = {
     type: "html",
     callback: f
}

GroupFooterCellSpanCallback

Callback to set custom groupFooter spanning

Remarks:

Used in CellLayoutColumnItem.

[Parameter list] grid - GridBase control

layout - layout item

itemIndex - the index of the row

footerIndex - index of groupFooter

GroupFooterStyleCallback

Callback to style the grid group footer row

Remarks:

This is the format used in RowGroupFooter.styleCallback.

[Parameter list] grid - GridBase control

itemIndex - the itemIndex of the footer

footerIndex - The index of the footer if there are multiple footers in the group.

Example:

var f = function(grid, itemIndex, footerIndex) {
     var dataRow = grid.getGroupModel(itemIndex, true).firstDataItem.dataRow;
     var value = grid.getDataSource().getValue(dataRow, "area2name");
     return value && value.indexOf("Gun") >= 0 ? `style-1-${footerIndex}` : undefined;
};
 
gridView.rowGroup.setFooters([{styleCallback: f},{styleCallback: f}]);

GroupFooterUserSpanCallback

Callback to set custom groupFooterUser span

Remarks:

Used in CellLayoutColumnItem.

[Parameter list] grid - GridBase control

layout - layout item

model - GroupModel

itemIndex - the index of the row

footerIndex - index of groupFooter

HeaderCallback

Callback that returns the text displayed in the row group header

Remarks:

This is the format used in RowGroup.headerCallback. RowGroup.headerStatement is ignored if present.

[Parameter list] grid - GridBase control

group - group item

Example:

gridView.rowGroup.headerStatement = undefined;
gridView.rowGroup.headerCallback = function(grid, group) {
      var ds = grid.getDataSource()
      if (group.level === 1) {
          return ds.getOrgFieldName(group.groupField) + " - " + group.firstDataItem.getData(group.groupField) + " - " + group.descendantCount + " rows"
      } else if (group.level === 2) {
          var sum = group.getSum("number");
          return isNaN(sum) ? "no sum" : ("sum => "+ sum.toString());
      } else {
          return "GroupLevel => "+group.level.toString()
      }
}