syidaxgrid
Home Pricing Settings

GRID FEATURE · PRO

Tool panel

Tool panels collect cross-column tasks such as visibility and filter settings. They separate data space from settings space and open only when needed.

Markdown source Features

How it works and when to use it

Set sideBar to true for panel tabs, or to columns or filters to open that panel initially. The app can also open and close panels through public methods.

Using this feature in a product requires the Pro package and a valid license. Matching setting names do not enable Pro features in Community.

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. Start with column management

Useful for reports where column visibility changes frequently.

javascript
grid.sideBar = 'columns';

Verify the result: Users can review the full column list and choose which columns to show.

Example 2. Open filter tools

Open the panel from the app's search-settings button.

javascript
grid.sideBar = true;
const opened = await grid.openToolPanel('filters');
console.log(opened, await grid.getOpenedToolPanel());

Verify the result: Check the return value to confirm it opened. Passing an unknown panel ID does not create a panel.

Example 3. Recover space on narrow screens

Close the panel after configuration to return space to the table.

javascript
await grid.closeToolPanel();

Verify the result: Closing a panel does not clear its filters. Indicate active filters separately.

Combining features and troubleshooting

Synchronize through state-change events so external app settings and Grid panels do not overwrite each other.

Check that mobile users can see how to close the panel and return to the table.

Related reading