Form Edit Example

This example demonstrates how to implement form-based row editing using RevoGrid’s row expand functionality. Instead of editing cells directly in the grid, users can click on a row to expand it and edit the data in a form format.

Implementation Details

The form edit functionality is implemented using the RowExpandPlugin. When a row is expanded, a custom template renders a form with the row’s data. The form is split into two columns for better organization.

Key implementation points:

1. Row Expansion: Uses RevoGrid’s RowExpandPlugin to show/hide the form
2. Form Layout: Implements a two-column grid layout using Tailwind/UnoCSS
3. Data Handling: Updates the grid’s source data when the form is saved
4. Validation: Can be extended to add form validation (not implemented in this basic example)

Features

• Form layout
• Save and Cancel buttons
• Responsive form design
• Custom form fields for different data types
• Automatic grid update on save

Usage

To implement this in your own project:

1. Import required plugins
2. Configure the grid columns
3. Set up the row expand template with your form fields
4. Handle form submission and data updates

grid.additionalData = {
  rowExpand: {
    expandedRowHeight: 300,
    template(h, props) {
      // Form template implementation
    }
  }
};

Customization

You can customize the form by:

• Adding more form fields
• Implementing validation
• Changing the layout
• Adding custom styling
• Implementing different field types