TDGrid (TD그리드) Widget Control

The Widget Control (Property · Method · Event) list you use to control the TDGrid widget from a script. For an introduction to the widget and how to use it, visit TDGrid.

info

In the examples below, tdgridID is the name (ID) you assigned to the TDGrid widget on the canvas. In a script, access it as widgetID.member.

Widget Control summary

Widget Control	Kind	Signature	Description
count	Property	tdgridID.count	Number of data rows (read/write, int)
current	Property	tdgridID.current	Index of the current (focused) row (read/write, int)
select	Property	tdgridID.select	Index of the selected row (read/write, int)
add	Method	tdgridID.add()	Adds an empty row and returns its index
insert	Method	tdgridID.insert(index)	Inserts an empty row at the given index
remove	Method	tdgridID.remove(index)	Removes the row at the given index
clear	Method	tdgridID.clear()	Removes every row
setState	Method	tdgridID.setState(index, function)	Updates the cell values of a row with a callback
setColVisible	Method	tdgridID.setColVisible(orgIndex, isShow, isAnimation)	Shows or hides a single column
setColVisibleGroup	Method	tdgridID.setColVisibleGroup(orgIndexes, isShow, isAnimation)	Shows or hides several columns at once
isColVisible	Method	tdgridID.isColVisible(orgIndex)	Returns whether a column is visible (bool)
setColWidth	Method	tdgridID.setColWidth(orgIndex, width, isAnimation)	Sets a column width
getColWidth	Method	tdgridID.getColWidth(orgIndex)	Returns a column width (int, 0 if missing)
sort	Method	tdgridID.sort(type, prop, isNumber, attrProp)	Sorts rows by a bound property value (bool)
initOriginIndex	Method	tdgridID.initOriginIndex()	Records each row's current position as its origin index (bool)
reorderColumn	Method	tdgridID.reorderColumn(colIndex)	Reorders columns so the given ones come first (bool)
setRowVisible	Method	tdgridID.setRowVisible(orgRow, visible)	Shows or hides a single row
isRowVisible	Method	tdgridID.isRowVisible(orgRow)	Returns whether a row is visible (bool)
setRowColor	Method	tdgridID.setRowColor(orgRow, color)	Sets a row background color (an empty string clears it)
setRowBorder	Method	tdgridID.setRowBorder(orgRow, color, width, bottomOnly)	Sets a row border
clearRowStyle	Method	tdgridID.clearRowStyle(orgRow)	Clears all per-row styling
setGroupHeader	Method	tdgridID.setGroupHeader(row, use, title, txtColor, bgColor)	Sets a row group header — doesn't work in the current version
setRowHeight	Method	tdgridID.setRowHeight(row, height)	Sets a row height (height <= 0 clears it)
calcTextLines	Method	tdgridID.calcTextLines(bulbID, colIdx, adjust)	Counts the lines of cell text in each row (List<int>)
getMaxTextWidth	Method	tdgridID.getMaxTextWidth(bulbID)	Returns the widest rendered width of cell text (int, -1 if missing)
getScrollPos	Method	tdgridID.getScrollPos(isVert)	Returns the current scroll position (double)
setScrollPos	Method	tdgridID.setScrollPos(isVert, pos)	Moves the scroll position
onSelected	Event	tdgridID.onSelected = (index) => { ... }	Runs when a row is selected
onStartScroll	Event	tdgridID.onStartScroll = (isVertical, position) => { ... }	Runs when scrolling starts
onUpdateScroll	Event	tdgridID.onUpdateScroll = (isVertical, position) => { ... }	Runs whenever the scroll position changes
onStopScroll	Event	tdgridID.onStopScroll = (isVertical, position) => { ... }	Runs when scrolling stops
onScrollEnd	Event	tdgridID.onScrollEnd = (isVertical) => { ... }	Runs when scrolling reaches the end

Property

count

The number of data rows in the grid. Read it to get the current row count, or write to it to set the row count.

• Kind: Property (read/write)
• Type: int

Example

const n = tdgridID.count;
tdgridID.count = 10;

current

The index of the current (focused) row.

• Kind: Property (read/write)
• Type: int

Example

const cur = tdgridID.current;
tdgridID.current = 0;

select

The index of the selected row.

• Kind: Property (read/write)
• Type: int

Example

const sel = tdgridID.select;
tdgridID.select = 2;

Method

add

Adds one empty row.

• Parameters: None
• Returns: int - The index of the newly added row

Example

const row = tdgridID.add();

insert

Inserts an empty row at the given index.

• Parameters: index (int) - Index at which to insert the row
• Returns: None

Example

tdgridID.insert(0);

remove

Removes the row at the given index.

• Parameters: index (int) - Index of the row to remove
• Returns: None

Example

tdgridID.remove(2);

clear

Removes every row.

• Parameters: None
• Returns: None

Example

tdgridID.clear();

setState

Updates the given row with a callback. The callback receives the row as an argument and sets its cell values.

• Parameters: index (int) - Index of the row to update / function - Callback that receives the row as an argument
• Returns: None

Example

tdgridID.setState(0, (row) => {
  row.priceCell.text = "72,500";
});

setColVisible

Shows or hides a single column, identified by its origin index.

• Parameters: orgIndex (int) - The column's origin (definition order) index / isShow (bool) - true shows, false hides / isAnimation (bool, true when omitted or null) - Whether to animate the width transition
• Returns: None

Example

tdgridID.setColVisible(2, false, true);

setColVisibleGroup

Shows or hides several columns at once with an array of origin indexes.

• Parameters: orgIndexes (array) - Array of column origin indexes / isShow (bool) - true shows, false hides / isAnimation (bool, true when omitted or null) - Whether to animate
• Returns: None

Example

tdgridID.setColVisibleGroup([1, 3, 5], false, true);

isColVisible

Returns whether the column at the given origin index is currently visible.

• Parameters: orgIndex (int) - The column's origin index
• Returns: bool - true if the column is visible

Example

const visible = tdgridID.isColVisible(2);

setColWidth

Sets the width, in logical pixels, of the column at the given origin index.

• Parameters: orgIndex (int) - The column's origin index / width (double) - Target width (px) / isAnimation (bool, true when omitted or null) - Whether to animate
• Returns: None

Example

tdgridID.setColWidth(1, 80, true);

getColWidth

Returns the current width (px) of the column at the given origin index.

• Parameters: orgIndex (int) - The column's origin index
• Returns: int - The column width (px), or 0 if the column doesn't exist

Example

const w = tdgridID.getColWidth(1);

sort

Sorts the rows by a bound property value.

• Parameters: type (int) - 0 original order, 1 ascending, 2 descending / prop (string) - Dot-notation path to the property to sort by, such as "objet.text"; ignored when type is 0 / isNumber (bool) - Treat the values as numbers, stripping mask characters before comparison / attrProp (string) - Property path, or an empty string if there is none
• Returns: bool - true if the sort ran

Example

tdgridID.sort(2, "priceCell.text", true, "");

initOriginIndex

Records each row's current position in its origin index property, so a later sort(0, ...) can restore the original order.

• Parameters: None
• Returns: bool (the current implementation always returns false)

Example

tdgridID.initOriginIndex();

reorderColumn

Reorders the columns so that the ones listed in colIndex come first, in the order you give. The remaining columns keep their relative order.

• Parameters: colIndex (array) - Array of origin indexes for the columns to move to the front
• Returns: bool - true if the reorder ran

Example

tdgridID.reorderColumn([3, 0, 1]);

setRowVisible

Shows or hides a single row, identified by its origin index.

• Parameters: orgRow (int) - The row's origin (data source) index / visible (bool) - true shows, false hides
• Returns: None

Example

tdgridID.setRowVisible(3, false);

isRowVisible

Returns whether the row at the given origin index is currently visible.

• Parameters: orgRow (int) - The row's origin index
• Returns: bool - true if the row is visible

Example

const visible = tdgridID.isRowVisible(3);

setRowColor

Sets a background color for a single row. Pass an empty string to clear it.

• Parameters: orgRow (int) - The row's origin index / color (string) - A color string such as "#FF0000"; "" clears it
• Returns: None

Example

tdgridID.setRowColor(3, "#FFEEEE");

setRowBorder

Sets a border for a single row. Set bottomOnly to true to draw only the bottom edge, otherwise all four edges are drawn. An empty color, or a width of 0 or less, clears the border.

• Parameters: orgRow (int) - The row's origin index / color (string) - Border color such as "#888888"; "" clears it / width (double) - Border thickness (px); 0 or less clears it / bottomOnly (bool) - true for the bottom edge only, false for all four edges
• Returns: None

Example

tdgridID.setRowBorder(3, "#888888", 1, true);

clearRowStyle

Clears all per-row styling — visibility, height, background, and border.

• Parameters: orgRow (int) - The row's origin index
• Returns: None

Example

tdgridID.clearRowStyle(3); //Clear the style applied to row 3

setGroupHeader

warning

This doesn't work in the current version.

Sets a group header on a row.

• Parameters: row (int) - The row's origin index / use (bool) - Whether to use a group header / title (string) - Header title / txtColor (string) - Text color / bgColor (string) - Background color
• Returns: None

Example

tdgridID.setGroupHeader(0, true, "그룹", "#000000", "#EEEEEE");

setRowHeight

Sets the height of a single row. A height of 0 or less clears the setting and restores the default row height.

• Parameters: row (int) - The row's origin index / height (int) - Row height (px); 0 or less clears it
• Returns: None

Example

tdgridID.setRowHeight(3, 48);

calcTextLines

Calculates how many lines the given cell's text wraps into within the column width plus an adjustment. Returns the line count for every row.

• Parameters: bulbID (string) - ID of the cell to measure / colIdx (int) - Origin index of the column used as the width reference / adjust (int) - Value (px) added to the column width before measuring
• Returns: List<int> - The line count for each row

Example

const lines = tdgridID.calcTextLines("nameCell", 0, -8);

getMaxTextWidth

Returns the widest single-line rendered text width (px) across every row for the given cell.

• Parameters: bulbID (string) - ID of the cell to measure
• Returns: int - The maximum text width (px), or -1 if there is no data

Example

const maxWidth = tdgridID.getMaxTextWidth("nameCell");

getScrollPos

Returns the current scroll position (px) on the given axis. Returns 0 when that axis hasn't scrolled yet.

• Parameters: isVert (bool) - true for the vertical axis, false for the horizontal axis
• Returns: double - The current scroll offset (px)

Example

const pos = tdgridID.getScrollPos(true);

setScrollPos

Moves the scroll position on the given axis to the offset you pass, clamped to the scrollable range. Does nothing when that axis isn't scrollable yet.

• Parameters: isVert (bool) - true for the vertical axis, false for the horizontal axis / pos (double) - Target offset (px)
• Returns: None

Example

tdgridID.setScrollPos(true, 0);

Event

onSelected

Runs when a row is selected.

• Kind: Event
• Handler arguments: index - Index of the selected row
• Returns: None

Example

tdgridID.onSelected = (index) => {
  // Handle the selected row
};

onStartScroll

Runs when scrolling starts.

• Kind: Event
• Handler arguments: isVertical - true for vertical scrolling, false for horizontal / position - The offset (px) at the moment scrolling started
• Returns: None

Example

tdgridID.onStartScroll = (isVertical, position) => {
  // ...
};

onUpdateScroll

Runs continuously, every time the scroll offset changes.

• Kind: Event
• Handler arguments: isVertical - true for vertical scrolling, false for horizontal / position - The current scroll offset (px)
• Returns: None

Example

tdgridID.onUpdateScroll = (isVertical, position) => {
  // ...
};

onStopScroll

Runs when scrolling stops.

• Kind: Event
• Handler arguments: isVertical - true for vertical scrolling, false for horizontal / position - The offset (px) where scrolling stopped
• Returns: None

Example

tdgridID.onStopScroll = (isVertical, position) => {
  // ...
};

onScrollEnd

Runs when scrolling reaches the end of the content — the bottom or the right edge.

• Kind: Event
• Handler arguments: isVertical - true if the vertical axis reached the end, false for the horizontal axis
• Returns: None

Example

tdgridID.onScrollEnd = (isVertical) => {
  // ...
};

Common Widget Control (all widgets)

note

Every widget supports name-based common Widget Control (Method) calls such as setProperty, getProperty, and setStyleProperty. See the common reference doc (to be written).