DisplayOptions

Configuration model for display information managed at the grid level

Signature:

export interface DisplayOptions

Remarks

When setting it as an option in Grid, you only need to enter the necessary information.

Example

grid.setDisplayOptions({rowResizable: true});

Events

Properties

Event Desc

rowBlockCallback

Callback to set custom rowBlockType

Example:

const f = function(grid, itemIndex) {
     let billNo;
     let ds = grid.getDataSource();
     let fld = ds.getFieldIndex("text1");
     let dataRow = grid.getDataRow(itemIndex);
     if (dataRow >= 0) {
         billNo = ds.getValue(dataRow, fld);
     } else {
         billNo = null;
     }
 
     let top = Math.min(grid.getTopItem(), itemIndex);
     let full = top + grid.fullItemCount();
     let startNo = top + full;
     let endNo = -1;
     let check1 = false;
 
     for (let i = top; i <= full; i++) {
         dataRow = grid.getDataRow(i);
         if (dataRow < 0) {
             continue;
         }
 
         let cBillNo = ds.getValue(dataRow, fld);
 
         if (cBillNo === billNo) {
             startNo = Math.min(startNo, i), endNo = Math.max(endNo, i);
             check1 = true;
         } else {
             if (check1) {
                 break;
             }
         }
     };
 
     if (startNo <= endNo && endNo > 0) {
         console.log(startNo)
         console.log(endNo);
         return { start: startNo, end: endNo };
     }
}
 
grid.setDisplayOptions = {
      rowBlockType: 'row,
      rowBlockCallback: f
}

scrollMessageCallback

A callback that returns a message displayed in the view indicating the scroll position when liveScroll is false

Remarks:

The format is ScrollMessageCallback.

Example:

gridView.displayOptions.scrollMessageCallback = function(grid, vertical, itemIndex) {
     var msg = grid.getValue(itemIndex, "area3name");
     return "<span style='color:blue;font-size:20px'>itemIndex = " + msg + "</span>";
}

Properties Desc

altSelectAndImmediateDrag

If true, when you press altKey and select a cell, it changes to drag&drop mode.

Type - boolean

Remarks:

DisplayOptions.selectionStyle is not applied when column is.

autoClearHeights

rowHeight Whether to delete the height set for each individual item when the property is changed.

Type - boolean

baseZindex

Set the zIndex of editor / editorButton.

Type - number

columnMovable

Column position can be changed

Type - boolean

Remarks:

Header cells can be changed by dragging them

columnResizable

Column width can be changed

Type - boolean

Remarks:

You can change it by dragging the right side of the header cell.

columnResizeThreshold

The mouse range that can change the width of the header

Type - number

defaultColumnWidth

Default value for column width

Type - number

eachRowResizable

Is each row height adjustable?

Type - boolean

Remarks:

You can adjust it by dragging the bottom of the cell. DisplayOptions.rowResizable must be true.

editItemMerging

Merged Whether to merge the row being edited when editing a cell in Row Grouping or Cell Merging mode. If true, the merge state is maintained.

Type - boolean

emptyMessage

Message displayed when there are no rows of data displayed in the grid.

Type - string

fitStyle

Form for adjusting column width to fit the width of the grid

Type - GridFitStyle

fitStyleIncludeFixed

Whether to include the fixed area when applying fitStyle.

Type - boolean

Remarks:

if set to DisplayOptions.fitStyle to even or evenFill, the width of the columns in the fixed area also changes.

GridFitStyle.FILL is not applicable.

focusType

form of focus

Type - FocusType

focusVisible

Visibility of focus

Type - boolean

groupFocusLevel

Specifies the groupLayout to be displayed when groupFocusVisible is true.

Type - number

Remarks:

-1: If the top Layout is greater than selection 0, the groupLayout corresponding to the input level is selected.

groupFocusVisible

When the focused cell is a child cell of the group layout, focus is displayed on the group layout.

Type - boolean

Remarks:

groupLayout is determined by groupFocusLevel.

hintDelay

Tooltip Delay Time

Type - number

horzPageScroll

Page-by-page scrolling when moving columns with the keyboard

Type - boolean

hscrollBar

Whether to display horizontal scroll bar

Type - boolean

hscrollDuration

tooltip display delay time when scrolling horizontally

Type - number

Remarks:

Delays the generation of tooltips when scrolling using the track-thumb of the scrollbar.

Applies only when liveScroll is false.

liveScroll

Whether to scroll immediately when scrolling using the track-thumb of the scrollbar

Type - boolean

Remarks:

If false, scrolling occurs when the mouse button is released.

maxRowHeight

row max height

Type - number

minCellWidth

cell minimum width

Type - number

minRowHeight

row minimum height

Type - number

minTableRowHeight

Table row minimum height

Type - number

popupDropdownCount

Number of lists displayed on one screen in pop-ups or context menus

Type - number

popupViewDistance

Specify the spacing between pop-up menu and submenu

Type - number

refCalcHeights

When rowHeight is -1, the height of the displayed row is not searched again when the grid is scrolled, but the calculated height is used.

Type - boolean

Remarks:

If set to false, the height will be recalculated when the row is displayed on the screen. This can be slow if many rows are displayed on the screen.

refreshMode

Mode when redrawing the grid

Type - RefreshMode

remergeWhenColumnMoved

Whether to retry the merge when the column position changes.

Type - boolean

rightClickable

Availability of right mouse button

Type - boolean

rowBlockType

Mask type when selecting rows

Type - RowMaskType

Remarks:

When selecting a row or cell, the row selection area is displayed.

rowChangeDelay

Latency for changing data row position

Type - number

Remarks:

Delay onCurrentRowChanged.

rowFocusType

Mask type of focused row

Type - RowMaskType

rowHeight

row height

Type - number

Remarks:

If it is 0, the height of the rows is found to be an appropriate value considering the font and padding style of the grid. If the value is greater than 0, the specified value becomes the height of the rows. If -1, the row height changes according to the contents of the cell.

rowHoverType

Mask type when hovering a row

Type - RowMaskType

Remarks:

When hovering, the row selection area is displayed.

rowResizable

Is the overall row height adjustable?

Type - boolean

Remarks:

You can adjust it by dragging the bottom of the cell in the first column or the bottom of the indicator in the first row.

scrollDuration

tooltip display delay time when scrolling vertically

Type - number

Remarks:

Delays the generation of tooltips when scrolling using the track-thumb of the scrollbar.

Applies only when liveScroll is false.

selectAndImmediateDrag

If true, changes to drag&drop mode immediately after selecting a cell.

Type - boolean

Remarks:

This does not apply if DisplayOptions.selectionStyle is column.

selectAtSingleRow

Whether multiple rows can be selected when DisplayOptions.selectionStyle is SelectionStyle.BLOCK or SelectionStyle.GROUP

Type - boolean

Remarks:

If false, selection is possible only on one row.

selectionDisplay

Display of selection area

Type - SelectionDisplay

Remarks:

For detailed explanation, see SelectionDisplay

selectionMode

mode of selection

Type - SelectionMode

Remarks:

In the case of multiple selection, rowMove and copy are not supported.

selectionRemovable

Whether selection area can be removed when control + clicked again

Type - boolean

selectionStyle

Style of selection

Type - SelectionStyle

Remarks:

For detailed explanation, see SelectionStyle

showChangeMarker

Whether to show marker changes

Type - boolean

showEmptyMessage

Whether to display a message when no rows of data are visible in the grid

Type - boolean

showEmptyTooltip

Whether to show tooltips regardless of data

Type - boolean

Remarks:

onShowTooltip() occurs when true

showInnerFocus

Whether to display individual cell areas in Merged Cell

Type - boolean

showNativeEditButton

Whether to display the edit button on the right side of the cell when using a native drop-down editor (date, list).

Type - boolean

showTooltip

Whether to display tooltips

Type - boolean

Remarks:

If set to true, the tooltip is displayed even if showTooltip is not set in the column. If renderer.showTooltip is false, it is not displayed.

syncGridHeight

Change the height of the grid container so that all data is visible on the screen.

Type - SyncGridHeight

Remarks:

If the number of displayed data is large, the speed may be slow. The height of the grid container must be specified before the grid is created to return to its original size.

If rowHeight is -1, it is not applied.

toastZIndex

Specify zIndex of the displayed Toast window

Type - number

tooltipEllipsisOnly

Whether to display tooltips for cells in ellipsis state

Type - boolean

Remarks:

If set to true, the tooltip will be displayed only for cells in ellipsis state. If renderer.tooltipEllipsisOnly is false, the tooltip for the column is displayed in all cells.

useAlternateRowStyle

Set “rg-alternate-row” to be added to the className of even rows.

Type - boolean

useFocusClass

Set the class name of the focused cell and row.

Type - boolean

Remarks:

If true, rg-focused-cell is added to the className of the focused cell. Add rg-focused-row to the className of Row.

vscrollBar

Vertical scroll bar visibility

Type - boolean

watchDisplayChange

Automatically updates the screen when the display of the container changes

Type - boolean

Remarks:

When the display of the upper grid element changes, the screen is automatically updated.

wheelAccelDelay

Minimum time for acceleration when scrolling vertically

Type - number

Remarks:

Use with wheelAccelScroll.

wheelAccelScroll

If there is a delay of wheelAccelDelay, scrolling is accelerated by the corresponding attribute.

Type - number | string

Remarks:

Number - number of items

String - Percentage ex) '50%'

wheelDeltaY

Adjust sensitivity when scrolling using the touchPad.

Type - number

Remarks:

In the case of the touchPad, scrolling occurs only when there is a slight movement, but only when there is a specified number of movements.

A value of around 10 ~ 20 is appropriate.

Applies only to vertical scrolling.

wheelEnabled

Wheel availability

Type - boolean

wheelEventPropagate

Whether wheel events that occur within the grid are emitted externally

Type - boolean

wheelScrollHorz

Position movement variation value (speed) when scrolling horizontally with the wheel

Type - number

wheelScrollLines

Number of rows scrolled at one time

Type - number