syidaxgrid
Home Pricing Settings

SYIDAX GRID

Grid Docs

Grid is both a table for reading data and an input interface that returns users' search, selection, and editing results to your app. This manual explains data flow and how to combine features, as well as how to enable them.

Markdown source Features

How it works and when to use it

Start with installation and the data model, then visit the feature chapters you need. The API reference lets you look up individual properties, methods, and events. In examples, grid is a registered sy-grid element. Docs contain code and result explanations rather than a running Grid; connect the examples in your app.

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. Read-only order list

Display product names and order quantities without allowing edits. Connect columns and rows first, then enable only sorting and searching.

javascript
grid.defaultColDef = { sortable: true, editable: false };
grid.quickFilter = true;
grid.pagination = true;
grid.pageSize = 20;

Verify the result: Limit how much users read on one page as row counts grow. Distinguish search and sorting, which change the view, from editing, which changes source values.

Example 2. An editing and saving workflow

Make quantity editable, then read actual changes from cellValueChanged for saving. Your app is responsible for server saving outside the Grid.

javascript
grid.addEventListener('cellValueChanged', ({ detail }) => {
  console.log(detail.rowId, detail.field, detail.oldValue, detail.newValue);
});

Verify the result: The event includes the row ID and before/after values. Display save success or failure according to the server response.

Example 3. Navigate from summaries to source rows

Choose grouping for totals by team and pivoting for comparisons across teams and regions. An individual order quantity and a summarized quantity have different meanings.

javascript
// Pro: group orders by team
grid.groupBy = 'team';
grid.pagination = false;

Verify the result: Expand team summaries to inspect individual orders. When switching to pivoting, clear regular groupBy and specify pivot row, column, and value dimensions.

Combining features and troubleshooting

Virtualization alone does not fix slow downloads. It reduces the number of screen elements, while remote row models reduce the scope of fetched data.

The Features order example is for trying functionality. App integrations such as collaboration servers, permissions, and file saving require the prerequisites described in their chapters.

Related reading