> For the complete documentation index, see [llms.txt](https://community-test.logicnets.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://community-test.logicnets.com/release-9/platform-documentation/form-node-parts/jsgrid.md).

# jsgrid

## Description

The jsgrid part allows you to display data in a grid format.

## Use

You can use the jsgrid part to show data to the user in a grid format, and you can customize the grid to allow users to edit the data. Most of the functionality is executed on the client side, which makes the jsgrid faster than other grids.

## Tips & Tricks

### Keyboard Navigation

In the jsgrid, users can navigate through rows using the up and down arrow keys on the keyboard, and they can use the space bar button to edit the selected row. When in edit mode, users can click the tab and **tab+shift** buttons to switch focus between the columns. Clicking **Ctrl+Enter** saves the row and the **Esc** button cancels all changes.

If you press the down or up arrow keys while the row is still in edit mode, the system will open the row above or below in edit mode. If you have unsaved changes in the selected row, the system will show you a message asking you to save the row and continue, continue without saving, or cancel and go to the next/previous row.

### Edit Field Pop-Up

To be able to easily edit large texts, you can double-click on a field when in edit mode, or you can press the **Insert** key to trigger a pop-up with a text area. In this text area you can edit the text and press the ***Save*** or ***Cancel*** buttons. When typing text in the text-area field, you can also click ***Enter*** to save or ***Esc*** to cancel.

### Submit/Cancel Buttons

You can choose to show a submit and/or cancel button at the top of the grid. The ***Submit*** button submits all the changes a user made in the grid to the server. The ***Cancel*** button reverts all changes the user made to the grid since the last submit. The ***Submit*** and ***Cancel*** buttons are disabled at first. When you make a change, the system enables the buttons. After you click ***Submit*** the system disables the buttons because there are no pending changes to save or revert.

### Input Validation

The jsgrid supports field validation, which you configure in the part. You can choose if the validation should trigger on render and/or on blur, and it will always trigger when saving a row. If you choose to enable validation on render, the system will display in red the fields that contain validation errors. When you hover over the field the system displays validation the error message. If you choose to enable validation on blur, the system will display in red the field when you leave the edit field. When you save the row and it still contains validation errors, a pop-up message will be shown with the validation errors. These errors have to be resolved before the row can be saved.

### Unsaved Data Warning

If you choose to turn activate validation the system will display warning messages if the user leaves the page or row without saving their changes. When you leave a row you edited but did not save, the system displays a message saying there are unsaved changes and providing three options: save the row and continue, continue without saving, or cancel. If you try to leave with unsaved changes the system will prompt you to continue or cancel.

## Editor Fields

| Tab        | Field Name                                      | Description/Use                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | Type/Options | Optional/Mandatory |
| ---------- | ----------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ | ------------------ |
| Basic      | Collection                                      | This is the data object that contains the collection to show in the grid.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | Data Object  | Mandatory          |
| Basic      | Grid caption                                    | This is the caption the system will display at the top of the grid.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | Text         | Optional           |
| Basic      | Columns                                         | <p>These are the columns that will make up the grid. Each column can have one of the following types:<br>- Text - Simple text input<br>- Number - Text input with arrows to increase/decrease number<br>- Checkbox - A checkbox field<br>- Textarea - A text area field<br>- Control - The control column has the update/delete/add row buttons and is usually set last.</p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | Collection   | Mandatory          |
| Basic      | Add rows                                        | <p>- Yes: The user is able to add rows.<br>- No: The user is not able to add rows.</p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | Yes \| No    | Mandatory          |
| Basic      | Delete rows                                     | <p>- Yes: The user is able to delete rows.<br>- No: The user is not able to delete rows.</p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | Yes \| No    | Mandatory          |
| Basic      | Allow editing                                   | <p>- Yes: The user is able to edit rows.<br>- No: The user is not able to edit rows.</p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | Yes \| No    | Mandatory          |
| Basic      | Allow sorting                                   | <p>- Yes: The user is able to sort rows.<br>- No: The user is not able to sort rows.</p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | Yes \| No    | Mandatory          |
| Basic      | Submit on row save                              | <p>- Yes: The system submits the grid when saving an edited row.<br>- No: The system does not submit the grid when saving an edited row.</p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | Yes \| No    | Mandatory          |
| Basic      | Show submit button                              | <p>- Yes: The system displays a separate submit button for submitting the grid.<br>- No: The system does not display a submit button is shown.</p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | Yes \| No    | Mandatory          |
| Basic      | Submit button caption                           | If "Show submit button" is set to *Yes*, this is the caption of the submit button the system will display.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | Text         | Optional           |
| Basic      | Show cancel button                              | <p>- Yes: The system displays a separate cancel button that reverts all unsubmitted changes.<br>- No: The system does not display a cancel button.</p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |              | Mandatory          |
| Basic      | Cancel button caption                           | If "Show cancel button" is set to *Yes* this is the caption of the cancel button the system will display.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | Text         | Optional           |
| Basic      | Allow column resizing                           | <p>- Yes: This allows users to resize the columns.<br>- No: If this is selected the columns cannot be resized.</p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |              | Mandatory          |
| Basic      | Show pop-up to edit on double-click field       | <p>- Yes: If this is selected the system allows users to double-click on an edit field to get a popup with a text area for easily editing large texts.<br>- No: If this is selected nothing happens when double clicking on an edit field.</p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | Yes \| No    | Mandatory          |
| Basic      | Popup save button caption                       | This is the caption the system displays if "Show pop-up to edit on double click field" is set to *Yes*.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | Text         | Optional           |
| Basic      | Popup cancel button caption                     | This is the caption the system displays on the cancel button if "Show pop-up to edit on double click field" is set to *Yes*.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | Text         | Optional           |
| Basic      | Use paging                                      | <p>- Yes: If this is selected the system the system will separate the data into pages.<br>- No: If this is selected the system will display the data on one page.</p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | Yes \| No    | Mandatory          |
| Basic      | Page size                                       | This is the number of rows the system will display on one page. This only applies when "Use paging" is set to *Yes*.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | Number       | Optional           |
| Basic      | Show (un)select all button                      | <p>- Yes: If this is selected, the system will display all Select All and Unselect All buttons.<br>- No: If this is selected the system will not display Select All and Unselect All buttons.</p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | Yes \| No    | Mandatory          |
| Basic      | Column name                                     | This is the name of the column to be Selected/Unselected. This only applies when "Show (un)select all button" is set to *Yes*.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | Text         | Optional           |
| Basic      | Select all button caption                       | This is the caption of the Select All button. It only applies when "Show (un)select all button" is set to *Yes*.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | Text         | Optional           |
| Basic      | Unselect all button caption                     | This is the caption of the Unselect All button. It only applies when "Show (un)select all button" is set to *Yes*.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | Text         | Optional           |
| Warnings   | Show warning for unsaved data when leaving row  | <p>- Yes: If this is selected the system will display a message when a user is leaving a row they edited but didn't save.<br>- No: If this is selected the system will not show a warning when the user is leaving an edited but unsaved row.</p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | Yes \| No    | Optional           |
| Warnings   | Leaving row warning title                       | This is the title of the warning message box when "Show warning for unsaved data when leaving row" is set to *Yes*.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | Text         | Optional           |
| Warnings   | Leaving row warning message                     | This is the warning message the system displays when "Show warning for unsaved data when leaving row" is set to *Yes*.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | Text         | Optional           |
| Warnings   | Save row button text                            | This is the caption of the save row button. It only applies when "Show warning for unsaved data when leaving row" is set to *Yes*.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | Text         | Optional           |
| Warnings   | Continue button text                            | This is the caption of the Continue button. It only applies when "Show warning for unsaved data when leaving row" is set to *Yes*.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | Text         | Optional           |
| Warnings   | Cancel button text                              | This is the caption of the Cancel button. It only applies when "Show warning for unsaved data when leaving row" is set to *Yes*.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | Text         | Optional           |
| Warnings   | Show warning for unsaved data when leaving page | <p>- Yes: If this is selected the system will display a warning message when a user is leaving a page that has been edited but not saved yet.<br>- No: If this is selected the system will not display a warning when the user leaves an edited but unsaved page.</p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |              | Optional           |
| Warnings   | Leaving page warning title                      | The title of the warning message box. Only applies when "Show warning for unsaved data when leaving page" is set to *Yes*.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | Text         | Optional           |
| Warnings   | Leaving page warning message                    | This is the warning message the system displays when "Show warning for unsaved data when leaving page" is set to *Yes*.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | Text         | Optional           |
| Warnings   | Confirm button text                             | This is the caption of the confirm button. It only applies when "Show warning for unsaved data when leaving page" is set to *Yes*.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | Text         | Optional           |
| Warnings   | Cancel button text                              | This is the caption of the cancel button. It only applies when "Show warning for unsaved data when leaving page" is set to *Yes*.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | Text         | Optional           |
| Warnings   | On click selector for leaving page              | This is the JavaScript/jQuery on-click selector for detecting when users are leaving a page. For example, "input\[type='button']". When a user clicks a button the system displays the warning.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | Text         | Optional           |
| Validation | Validate on render                              | <p>- Yes: If this is selected the system will perform a validation when rendering the grid. The fields with validation errors will be red when opening the page.<br>- No: If this is selected the system will not perform validation when rendering the grid, only when saving a row.</p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | Yes \| No    | Mandatory          |
| Validation | Validate on blur                                | <p>- Yes: If this is selected the system will trigger the validation when the users leaves an edit field.<br>- No: If this is selected the system will not trigger a validation when a user leaves an edit field. Only when saving a row.</p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | Yes \| No    | Mandatory          |
| Validation | Validation error title message box              | This is the title of the message box for validation errors.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Text         | Optional           |
| Validation | Validation error header message                 | This is the header text of the message box for validation errors.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | Text         | Optional           |
| Validation | Columns validation                              | <p>This is a collection of column names with the specified validation rule. Possible validation rules include:<br>- Required - The field value is required.<br>- rangeLength - The length of the field value is limited by range. Provide the range as a JavaScript array in the Parameter field.<br>- minLength - The minimum length of the field value is limited. Provide the minimum value as a JavaScript array in the Parameter field.<br>- maxLength - The maximum length of the field value is limited. Provide the maximum value as a JavaScript array in the Parameter field.<br>- pattern - the field value should match the defined pattern. Provide the pattern as a string JavaScript regexp in the Parameter field.<br>- range - The value of the number field is limited by range. Provide the range as a JavaScript array in the Parameter field.<br>- min - The minimum value of the number field is limited. Provide the maximum in the Parameter field.<br>- max - The maximum value of the number field is limited. Provide the maximum in the Parameter field.</p> | Collection   | Optional           |
| Style      | Padding left (in px)                            | This field lets you set the padding in pixels on the left side of the grid.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Number       | Optional           |
| Style      | Padding right (in px)                           | This field lets you set the padding in pixels right side of the grid.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | Number       | Optional           |

## Example

Please download and import the [example](/release-9/example-gallery/example-projects-for-parts/jsgrid-form-part-example.md) project in your workspace.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://community-test.logicnets.com/release-9/platform-documentation/form-node-parts/jsgrid.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.