jsgrid

updated 1 yr ago

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 Escape 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 press Enter to save or press Escape 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 be disabled at first. When you make a change, the buttons are enabled. After you press Submit the system disables the buttons because there are no pending changes to save or revert.

Input Validation

The jsgrid supports field validation, which can be configured 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	These are the columns that will make up the grid. Each column can have one of the following types: Text - Simple text input Number - Text input with arrows to increase/decrease number Checkbox - A checkbox field Textarea - A text area field Control - The control column has the update/delete/add row buttons and is usually set last.	Collection	Mandatory
Basic	Add rows	Yes: The user is able to add rows. No: The user is not able to add rows.	Yes \| No	Mandatory
Basic	Delete rows	Yes: The user is able to delete rows. No: The user is not able to delete rows.	Yes \| No	Mandatory
Basic	Allow editing	Yes: The user is able to edit rows. No: The user is not able to edit rows.	Yes \| No	Mandatory
Basic	Allow sorting	Yes: The user is able to sort rows. No: The user is not able to sort rows.	Yes \| No	Mandatory
Basic	Submit on row save	Yes: The system submits the grid when saving an edited row. No: The system does not submit the grid when saving an edited row.	Yes \| No	Mandatory
Basic	Show submit button	Yes: The system displays a separate submit button for submitting the grid. No: The system does not display a submit button is shown.	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	Yes: The system displays a separate cancel button that reverts all unsubmitted changes. No: The system does not display a cancel button.		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	Yes: This allows users to resize the columns. No: If this is selected the columns cannot be resized.		Mandatory
Basic	Show pop-up to edit on double click field	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. No: If this is selected nothing happens when double clicking on an edit field.	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	Yes: If this is selected the system the system will separate the data into pages. No: If this is selected the system will display the data on one page.	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	Yes: If this is selected, the system will display all Select All and Unselect All buttons. No: If this is selected the system will not display Select All and Unselect All buttons.	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	Yes: If this is selected the system will display a message when a user is leaving a row they edited but didn't save. No: If this is selected the system will not show a warning when the user is leaving an edited but unsaved row.	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	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. No: If this is selected the system will not display a warning when the user leaves an edited but unsaved page.		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	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. No: If this is selected the system will not perform validation when rendering the grid, only when saving a row.	Yes \| No	Mandatory
Validation	Validate on blur	Yes: If this is selected the system will trigger the validation when the users leaves an edit field. No: If this is selected the system will not trigger a validation when a user leaves an edit field. Only when saving a row.	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	This is a collection of column names with the specified validation rule. Possible validation rules include: Required - The field value is required. rangeLength - The length of the field value is limited by range. Provide the range as a JavaScript array in the Parameter field. minLength - The minimum length of the field value is limited. Provide the minimum value as a JavaScript array in the Parameter field. maxLength - The maximum length of the field value is limited. Provide the maximum value as a JavaScript array in the Parameter field. pattern - the field value should match the defined pattern. Provide the pattern as a string JavaScript regexp in the Parameter field. range - The value of the number field is limited by range. Provide the range as a JavaScript array in the Parameter field. min - The minimum value of the number field is limited. Provide the maximum in the Parameter field. max - The maximum value of the number field is limited. Provide the maximum in the Parameter field.	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 project in your workspace.

Like Follow

4 yrs agoLast active
165Views
2 Following

cancel

Mention someone by typing their name

No matching users