0

jsgrid

  • updated 5 mths 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. 

Reply Oldest first
  • Oldest first
  • Newest first
  • Active threads
  • Popular
Like Follow
  • 3 yrs agoLast active
  • 136Views
  • 2 Following

Home