This article explores how to set up and customize the Data Grid Control effectively.
Step 1:
Go to Home > Retail. Under the POS Interface & Controls section, click Data Grid Control.
→ This opens the Data Grid Control List View, displaying all existing controls.
Step 2:
Click Add Data Grid Control at the top right.
→ This opens the New Data Grid Control screen where configuration details can be entered.
→ Fill in mandatory fields and click Save to apply changes.
Example: A Customer Search Data Grid Control configuration.
Control ID
Unique identifier used to reference a control displaying tabular data (lookups, journal grids, etc.).
Control Name
Descriptive label used for managing controls within the POS interface.
Odd Row Back Color / Even Row Back Color
Alternating row background colors improve readability.
Grid Line Color
Defines vertical/horizontal line color between columns and rows.
Table Border Color
Sets the outer border color of the entire table.
Table Border Thickness
Customizes border width in pixels.
Header Height
Pixel value defining header row height.
Row Height
Pixel value determines space for each data row.
Header Padding / Row Padding
Defines space between content and cell boundaries for enhanced readability.
Show Vertical Grid Lines
Enables column separation for clarity.
Show Horizontal Grid Lines
Enables row separation for clarity.
Select: Single
Allows selecting one item at a time—deselects previous selections.
Select: Multiselect
Allows batch selection using CTRL/CMD or SHIFT keys.
Row Selectable
Enables or disables row interaction based on conditions.
Reference DocType
Identifies the target document type (e.g., Sales Orders, Invoices).
Properties (Template)
Allows field-level editing via the pencil icon, accessed from each row.
Custom Fonts and Colors
Aligns header aesthetics with branding.
Padding and Margins
Improves text layout and spacing.
Hover Effects
Adds interactivity and feedback.
Alignment / Borders / Backgrounds
Refines visual hierarchy and distinction.
Responsive Design
Ensures usability across devices and screen sizes.
Custom Fonts and Colors
Tailors row aesthetics to match branding.
Padding and Margins
Creates breathable, legible content zones.
Hover Effects
Improves UX through interaction cues.
Conditional Styling
Highlights rows based on specific criteria.
Responsive Design
Maintains consistency across form factors.