syidaxgrid
Home Pricing Settings

GRID FEATURE

Live column API

Live column objects are references connected to the current Grid. They differ from serializable column-state arrays: references suit UI controls for individual columns, while state arrays suit saved preferences.

Markdown source Features

How it works and when to use it

getColumn accepts a unique column name and may return null for missing names. Do not assume an old reference remains valid after columns are replaced or a view is removed.

In the code, grid is the Grid element prepared in the installation chapter. Check each example's data and settings, and implement the app functions and server endpoints for your project.

Example 1. Compare one column with all columns

Find the product column and query the complete column list.

javascript
const product = await grid.getColumn('product');
const columns = await grid.getColumns();
console.log(product, columns);

Verify the result: Receive one reference and an array of references. Query using field or colId, not the title.

Example 2. Connect APIs to the current view

Show the current width in your app immediately after users drag it.

javascript
grid.addEventListener('columnResized', async () => {
  console.log(await grid.getColumnWidth('product'));
});

Verify the result: Read the applied width rather than the initial width declaration. Clean up event subscriptions when disposing of the view.

Example 3. Read serializable state

Read dedicated state instead of serializing live objects.

javascript
const state = await grid.getColumnState();
const json = JSON.stringify(state);
await grid.applyColumnState(JSON.parse(json));

Verify the result: Store width, order, visibility, and pinning as serializable values. Use getState if you also need complete filter and selection state.

Combining features and troubleshooting

Component methods return Promises. const column = grid.getColumn(...) yields a Promise, not a column; use await.

In views with multiple Grids, track which element supplied a reference. Matching column IDs in different Grids do not identify the same column object.

Related reading