# GeeGrid API Reference

Language: [English](./index.en.md) | [Korean](./index.ko.md)  
Complete AI context: [English](/ai-en.txt) | [Korean](/ai-ko.txt)

This reference contains the verified public API used to generate GeeGrid v3 screens. Do not infer undocumented methods or internal behavior.

## Required files

~~~html
<link rel="stylesheet" href="/js/geegrid_v3/geegrid.css">
<link rel="stylesheet" href="/js/geegrid_v3/geegrid-template.css">
<script src="/js/geegrid_v3/gee.common.js"></script>
<script src="/js/geegrid_v3/gee.util.js"></script>
<script src="/js/geegrid_v3/gee.grid.js"></script>
<script src="/js/geegrid_v3/gee.object.js"></script>
<script src="/js/geegrid_v3/gee.search.js"></script>
~~~

## Constructors

| Constructor | Purpose |
| --- | --- |
| new GeeGrid(id) | Initialize a geegrid element |
| new GeeSearch(id) | Initialize a verified item-based search form |
| new GeeObject(id) | Initialize a general form or UI object |

Create an instance only after its DOM root exists.

## Grid declaration

~~~html
<geegrid id="userGrid"
         width="100%"
         height="420px"
         pageable="true"
         rows="20"
         handler="load_users"
         sort_handler="sort_users">
  <column id="id" type="number" width="80px">ID</column>
  <column id="name"
          type="html"
          width="180px"
          sortable="true"
          orderBy="name">Name</column>
</geegrid>
~~~

## geegrid options

id, width, height, pageable, rows, page, numbering, number_width, check_column, handler, sort_handler, fixCol, leftWidth, rightWidth, rowHeight, show_totalcount, dynamic_scroll, dynamic_load, dynamicthreshold, dynamichandler, status, debug, formName, key, value.

Do not enable dynamic_scroll and dynamic_load together.

## column options

id, dataid, type, title, width, align, class, style, resize, sortable, orderBy, orderby, merge, mergekey, renderer, onclick, ondblclick, onchange, data, jsondata, keytext, keyvalue, textEvent, textHandler, editMask, textColor, textCursor, readonly, disabled, cols, rows, flow, drag, text, value.

Use dataid when the column id differs from the row object key.

## column types

html, input, textarea, select, selectbox, dropdown, radio, checkbox, calendar, number, range, button, code, key, numberformat, hidden, numbering, check_column, define.

## Data methods

### setObjectData(rows)

Use for object rows.

~~~js
grid.setObjectData([
  { id: 1, name: 'Alice Kim' },
  { id: 2, name: 'Daniel Lee' }
]);
~~~

### setArrayData(fieldNames, rows)

Use for array rows. The field-name array is required.

~~~js
grid.setArrayData(
  ['id', 'name'],
  [
    [1, 'Alice Kim'],
    [2, 'Daniel Lee']
  ]
);
~~~

### setJsonData(records)

Use for the verified JSON-record path.

~~~js
grid.setJsonData([
  { id: 1, name: 'Alice Kim', status: 'READY' }
]);
~~~

### Value access

~~~js
var rows = grid.getData();
var value = grid.getValue(0, 'name');
grid.setValue(0, 'name', 'Daniel Lee');
~~~

## Paging and sorting methods

| Method | Purpose |
| --- | --- |
| makePageParams() | Build paging and sorting request parameters |
| setTotalCount(count) | Set total record count |
| setCurrentPage(page) | Set current page |
| setViewLength(rows) | Set rows per page |
| makePaging() | Render or refresh paging controls |

Verified makePageParams fields are page, pageSize, startIDX, endIDX, orderColumn, and orderMethod.

Apply results in this order:

~~~js
grid.setTotalCount(Number(ret.count || 0));
grid.setCurrentPage(Number(ret.page || 1));
grid.setViewLength(Number(ret.rows || 20));
grid.setObjectData(Array.isArray(ret.records) ? ret.records : []);
grid.makePaging();
~~~

## Event APIs

| API | Purpose |
| --- | --- |
| GeeGrid.on(name, handler) | Register a named callback |
| GeeGrid.invoke(name, params) | Invoke a registered callback |
| GeeGrid.off | Remove a callback |
| GeeGrid.emit | Emit an event |
| GeeGrid.source | Access a registered source |

Callback attributes contain names only:

~~~html
<geegrid handler="load_users" sort_handler="sort_users">
  <column id="name"
          renderer="render_name"
          onclick="open_user"
          onchange="name_changed">Name</column>
</geegrid>
~~~

~~~js
GeeGrid.on('load_users', function () {});
GeeGrid.on('sort_users', function () {
  GeeGrid.invoke('load_users', {});
});
GeeGrid.on('render_name', function (payload) {
  payload.cell.textContent = String(payload.value || '');
});
~~~

Never write load_users() or open_user(event) in callback attributes.

## Callback payload

Verified fields, depending on callback type:

gridId, rowIndex, columnIndex, columnId, value, options, dataType, row, data, cell, element, event.

## GeeSearch methods

~~~js
var search = new GeeSearch('searchTool');
var encoded = search.getFormData();
var keyword = search.getValue('keyword');
search.setValue('keyword', 'Alice');
search.reset();
~~~

Use GeeSearch only when item syntax is already verified in the target screen or explicitly requested.

## GeeObject rendering

~~~js
GeeObject.render('cards', [
  { name: 'Alice Kim', status: 'READY' }
], 'No data available.', true);
~~~

Signature: GeeObject.render(domid, data, defaultMessage, initFlag).

## Layout and layer APIs

Verified usage includes:

- GeeObject.layout.openWindowLayer(id)
- GeeObject.layout.closeWindowLayer(id)
- GeeObject.layout.closeLayer(id)
- GeeGrid.layer.open(options)
- GeeGrid.layer.getElement(options)
- GeeGrid.layer.getId(key)
- GeeGrid.layer.ready(options)

## Recommended response

~~~json
{
  "result": "success",
  "count": 120,
  "page": 1,
  "rows": 20,
  "records": []
}
~~~

Use the actual project response when it differs. Do not invent API URLs, response fields, authentication headers, SQL behavior, or Runtime internals.