Advanced Grid

The Advanced Grid is a versatile grid element designed for inline editing and is available exclusively in Joget's Enterprise Edition. It mimics the target field types for accurate and enhanced data entry, ensuring a seamless and intuitive user experience. This functionality allows users to edit data directly within the grid, providing a more dynamic and efficient way to manage form data.

How does it work?

To see how the Advanced Grid works, you can use the built-in App Expenses Claims and create a new form to mimic an existing form in the app. Follow these steps:

1. Start the Joget Server and open the App Center.
2. Log in as admin and click the pencil icon on the Expenses Claim to open the App Composer.
   
3. Click Create New Form and fill in the Form Details as follows:
   • Form ID: advGrdTest
   • Form Name: Advanced Grid Test
   • Table Name: test
     
     
     
4. Click the Save button to be directed to the Form Builder.
5. Drag and drop the Advanced Grid element onto the canvas.
6. Click the Advanced Grid element on the canvas and open the Configure Advanced Grid properties.
7. Fill in the Edit Advanced Grid properties as follows:
   • ID: entries
   • Form: Expense Claim Entry
   • Columns:
     

     Field ID*	Label	Format Type
     date	Date	Date
     category	Category
     purpose	Purpose
     amount	Amount	Decimal

8. Remember to click Apply Change and Save it.
   
   
9. Click Preview. Try clicking on each column in the Advanced Grid and note each column's behavior.
   
10. Open the Expense Claim Entry form and note that the Field IDs are the same as those listed in step 7. This is how the Advanced Grid mimics the targeted fields from the parent form.
    
    
    

Configure advanced grid

Configuring the Advanced Grid allows you to tailor the grid to match your specific data entry needs.

Setting up properties like labels, IDs, and column configurations ensures the grid works seamlessly with your form elements for optimal data management:

• Label: The element label to be displayed to the end-user.
• ID: Element ID. A corresponding database table column called c_entries will be created by declaring them as entries. See Form Element for more information about defining the ID and list of reserved IDs.
• Form: Target form for record editing.
• Columns: The columns defined here must correspond to the Form chosen above.
  • Field ID: ID of the target form.
    
    Example
    In the Expense Claim Entry form, there are Form Elements with the ID date, category, purpose, and formattedAmount
  • Label: Column label.
  • Format Type: Format the returned value (e.g., Date, Decimal).
  • Width (px): Column width in characters. (e.g., 200px)
  • Readonly: Determines if the column is editable.

UI

The Advanced Grid's UI settings allow you to configure the user interface, such as enabling search, setting default sorting, and managing row addition and deletion capabilities.

Grid

The Grid settings control various features of the grid element, such as search functionality, editability, row management, sorting, and row numbering.

These settings help you customize how the grid operates and interacts with users.

• Search: Enable search capability within the grid data itself.
• Readonly: Determines if the element is editable.
• Disable Add Feature: Determines if a new row can be added.
• Disable Delete Feature: Determines if a row can be removed.
• Default Sorting Column Number (Start from 1): Defines the column index to sort by default. This field accepts integers starting from 1 onwards only.
  Example:
  If the grid has 5 columns, inputting a "4" will sort the 4th column from the left in ascending order.
• Delete Confirmation Message: Confirmation message when deleting a row.
• Show Row Numbering?: Shows numbering on the grid.

Editing

The Editing section allows you to configure how users interact with the grid, including key bindings for saving cells and providing hints for editing.

• Key to Save Cell: Keyboard key to determine when to save and move on to the next cell.
• Edit Hint: Edit hint message.

Paging

The Paging settings allow you to manage how records are displayed within the grid, including the number of records per page and paging options.

Configure the following fields:

• Record Per Page: Paging parameter - records to show per page.
• Paging Options: Paging parameter - paging options.

Data & validation

This section allows you to set up data handling and validation rules to ensure the integrity and accuracy of the data entered into the grid.

Validation

Validation settings help ensure the data entered into the grid meets specific criteria.

You can attach validators to validate input values, set unique columns, and define minimum and maximum row validations.

• Validator: Attach a Validator plugin to validate the input value. For more information, see Form Validator.
  
  When will validation take place?
  Validation will occur whenever a form is submitted except when submitted as Save as Draft.
• Unique Column: Column/Field ID to identify record ID.
• Min Number of Row Validation (Integer): Minimum number of rows required.
• Max Number of Row Validation (Integer): Maximum number of rows allowed.
• Error Message: An error message will be shown when row requirements are unmet.

Data store

The Data Store settings allow you to customize how data is loaded into and saved from the Advanced Grid, ensuring seamless integration with your form's data management strategy.

Configure the following fields:

• Load Data From allows you to customize the data retrieval method used to populate the Advanced Grid in the form.
• Save Data To: Allows you to customize the method of saving the Advanced Grid row records.
  This option is empty by default. An empty data store means the Advanced Grid records will be saved/loaded in JSON format in the parent form and database table. See the list of available Form Data Stores.
  The recommended data store is the Multiple Form Row, which saves each record into a child database table via a subform definition. The data store will update the foreign key parent ID in each child record to point to the parent database table.

Related documentation

These additional resources provide further insights and tutorials on effectively using and configuring the Advanced Grid in Joget.

• Calculating Time Between Two Dates using Advanced Grid
• How to Disable Sorting in Advanced Grid
• How to populate Advanced Grid using JQuery