Data Grid Field

Displays a Field Instance or Table Cell Instance.

Remarks

The DataGridField control presents a single data field or table cell for review, editing, and validation within the Data Grid.
It is used to display and interact with individual values extracted from a document, such as invoice numbers, dates, or line item quantities.

Purpose and Functionality

• Renders the value of a Field Instance or Table Cell Instance, supporting direct editing, validation, and error highlighting.
• Adapts its appearance and behavior based on field configuration, such as read-only status, required fields, autocomplete, and choice lists.
• Integrates with context menu commands, keyboard shortcuts, and visual indicators for efficient review and correction.

Interactive Components

• Field Value Input:
  Displays the field's value in a text box, dropdown, or other input type depending on its configuration.
  • Supports direct editing, autocomplete, and choice selection.
  • Visual cues highlight errors, required fields, and confirmation status.
• Tooltips and Descriptions:
  Hovering over the field displays tooltips with additional information, such as validation messages, field descriptions, and lookup results.
• Context Menu Commands:
  Right-clicking the field provides access to commands for rubberbanding, confirming values, and saving autocomplete entries.
  • Commands adapt to the field's state and workflow context.

Styling and CSS Class Names

This control and its child elements are assigned specific CSS class names to enable custom styling. These class names can be used from the CSS property of the Data Model, Data Field, or Data Table to apply custom styles to a Data Grid Field:

• The main input uses DataValue.
• Table cells add the cell class.
• Confirmed fields add the confirmed class.
• Invalid fields add the invalid class.
• Additional classes may be applied based on field configuration, such as custom CSS classes set on the Data Field or Data Column.
• Data attributes such as data-control="DataGridField", data-error, and data-location are also available for styling and scripting.

These class names allow you to style field inputs, table cells, and validation states with high precision. For example: .DataValue { font-size: 1em; } .DataValue.cell { background: #f8f8f8; } .DataValue.confirmed { border: 2px solid #007700; } .DataValue.invalid { background: #ffe6e6; }

For more information on CSS scoping and best practices, see CSS Builder.

Keyboard Shortcuts

• F3: Set highlight region for the current field.
• F4: Rubberband OCR region for the current field.
• F6: Toggle confirmation for the current field.
• Shift + F6: Toggle confirmation for all instances of the current field.
• Ctrl + S: Save the current value to the autocomplete list.

Error Handling and Validation

• Highlights invalid or missing values, displaying error messages and validation indicators.
• Integrates with change tracking and validation workflows, supporting error navigation and correction.
• Provides commands for confirming values and toggling validation status.

Accessibility & Usability

• Keyboard navigation and shortcuts are fully supported for efficient review and editing.
• Context menus and tooltips provide quick access to common actions and additional information.
• Visual cues guide users to errors, required fields, and workflow status.

Example Workflow

1. Open a document in the Data Grid.
2. The DataGridField displays each extracted field or table cell for review.
3. Edit values, confirm entries, or use context menu commands as needed.
4. Save changes and resolve any errors or validation issues.

Related Concepts

• Data Grid: Hosts the DataGridField for each field or cell in a document.
• Field Instance, Table Cell Instance: The runtime data objects displayed by the control.
• Data Field, Data Column: Define the structure and extraction logic for each field or cell.
• Context Menu: Provides field-level commands and workflow actions.

For more information, see the documentation for Data Grid, Field Instance, Data Field.

Context Menu Commands

Command	Shortcut	Description
content_copy Copy Field JSON		Copies JSON data for the current field to the clipboard.
backup_table Copy JSON		Copies JSON data for the current container to the clipboard.

Used By

Virtual TableData Grid ContainerData Grid Table