SYIDAX GRID

Keyboard and localization

Grid is a workspace for navigating many rows and columns with a keyboard. Cell navigation, editing, menus, and paths to app buttons outside the table must all be understandable.

Markdown source Features

How it works and when to use it

The locale changes Grid's built-in text. Translate column names, source data, and app guidance in the app, and format numbers and dates through valueFormatter.

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.

Installation and integration · Shared sample data

Example 1. Korean and keyboard navigation

Configure a basic environment with Korean messages and keyboard navigation.

javascript

grid.locale = 'ko';
grid.keyboardNavigation = true;

Verify the result: Built-in messages appear in Korean, and keyboard navigation is available. Test every button and editor with Tab, arrow keys, Enter, and Escape.

Example 2. Switch supported languages

Pass the app's selected language to Grid.

javascript

grid.locale = 'ja';

Verify the result: Grid's built-in messages switch to Japanese. Source values such as order statuses are not translated automatically.

Example 3. Accessible business cells

Give renderer buttons names that identify their row, and show text beside status colors. Outside the table, provide a readable status area for result counts and save outcomes.

Verify the result: Screen-reader and keyboard users should understand their location and next action. Avoid announcing every cell through a live region on each large data update.

Combining features and troubleshooting

Intercepting every keydown in the app can break Grid editing and navigation. Limit shortcut targets and the scope of preventDefault.

Row virtualization keeps only some DOM nodes. Do not assume off-DOM rows are inaccessible; verify navigation and announcements with assistive technology.