MasonryGrid (메이슨리그리드) Widget Control

This page lists the Widget Controls (Property · Method · Event) you use to control the MasonryGrid widget from a script. For an introduction to the widget and how to use it, visit MasonryGrid.

info

In the examples below, masonrygridID is the name (ID) you gave the MasonryGrid widget on the canvas. Scripts access members in the form widgetID.member.

Widget Control summary

Widget Control	Kind	Signature	Description
count	Property	masonrygridID.count (get/set int)	Read or set the number of repeated items
current	Property	masonrygridID.current (get/set int)	Index of the current item used as the binding scope
select	Property	masonrygridID.select (get/set int)	Index of the selected item
add	Method	masonrygridID.add()	Append an item at the end (returns the new index)
insert	Method	masonrygridID.insert(index)	Insert an item at a given position
remove	Method	masonrygridID.remove(index)	Remove the item at a given index
clear	Method	masonrygridID.clear()	Remove every item
setState	Method	masonrygridID.setState(index, function)	Update a single item
onSelected	Event	masonrygridID.onSelected = (index) => { ... }	Runs when an item is tapped

Property

count

The number of repeated items. Write a value and the bound data list grows or shrinks to match, then redraws. Read it to get the current item count.

• Kind: Property (read/write)
• Type: int
• Read: Returns the current number of repeated items
• Write: Sets the item count to the given value

Example

masonrygridID.count = 10;
const n = masonrygridID.count;

current

The index of the current item used as the binding scope. Later property writes target this item's row.

• Kind: Property (read/write)
• Type: int
• Read: Returns the current item index (-1 if none is set)
• Write: Sets the item index to use as the binding scope

Example

masonrygridID.current = 0;

select

The index of the selected item.

• Kind: Property (read/write)
• Type: int
• Read: Returns the index of the selected item (-1 if nothing is selected)
• Write: Sets the item index to select

Example

masonrygridID.select = 2;

Method

add

Appends an empty item at the end and redraws.

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

Example

const i = masonrygridID.add();

insert

Inserts an empty item at the given index and redraws.

• Parameters: index (int) - the position to insert at
• Returns: None

Example

masonrygridID.insert(0);

remove

Removes the item at the given index and redraws. An out-of-range index does nothing.

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

Example

masonrygridID.remove(0);

clear

Removes every item and redraws.

• Parameters: None
• Returns: None

Example

masonrygridID.clear();

setState

Runs a callback with the given index set as the binding scope, then redraws only that item. Use it to update the bound properties of a single item.

• Parameters: index (int) - the index of the item to update / function (callback function) - the callback to run while that index is active
• Returns: None

Example

masonrygridID.setState(0, () => {
  // Update the bound properties of item 0
});

Event

onSelected

Runs when the user taps an item.

• Kind: Event
• Handler arguments: index - the index of the tapped item
• Returns: None

Example

masonrygridID.onSelected = (index) => {
  // Handle the index of the tapped item
};

Common Widget Control (all widgets)

note

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