Data Grid Control
Introduction
Data Grid Control is a user interface component that displays data in a tabular format, similar to a spreadsheet. It is used to organize and present information such as sales transactions, inventory lists, or customer details in rows and columns.
1. Key Features and Uses
Some of the key features and uses of Data Grid Controls in a Point of Sale (POS) are listed below:
Data Organization:
They help organize large sets of data, making it easier for users to view and manage information.
Interactivity:
Users can interact with the data, such as sorting, filtering, and editing entries directly within the grid.
Commands Integration:
Specific commands can be linked to columns, allowing actions to be performed directly from the grid, such as updating quantities or processing returns.
Customization:
The appearance and behavior of the data grid can be customized to fit the specific needs of the POS interface.
2. Steps to create a Data Grid Control
The steps to create a Data Grid Control are explained below:
Step 1. Navigate to Home > Retail. Then under the POS Interface & Controls section click on the Data Grid Control shortcut.
This should take you to the Data Grid Control List View screen where all the Data Grid Controls are listed.
Step 2. Click on the Add Data Grid Control button in the top right corner. This will open the New Data Grid Control screen. All the settings pertaining to your Data Grid Control can be configured from this screen.
Fill in the details on the New Data Grid Control screen including the mandatory fields. Click the Save button to save the changes and exit the screen. The screenshot below depicts a Customer Search Data Grid Control.
The screenshot below shows a Customer Search screen .
3. Data Grid Control Screen Explained
The various fields in the Data Grid Control screen are explained below:
Control ID
Specify the Data Grid Control ID. Data Grid Control ID refers to the unique identifier assigned to a data grid control element within the POS interface. This ID is used to manage and reference the specific data grid control, which is a container for displaying data in a tabular format, such as lookups, journal grids, and other data tables.
Control Name
Specify the Data Grid Control Name. Data Grid Control Name refers to the label or identifier assigned to a specific data grid control within the POS interface. This name is used to reference and manage the data grid control, which is responsible for displaying data in a tabular format, such as lookups, journal grids, and other data tables.
Odd Row Back Color
Choose the Odd Row Background Color using the color pallet. Odd Row Background Color refers to the background color applied to the odd-numbered rows in a data grid control. This feature is used to enhance the readability of tabular data by visually distinguishing between consecutive rows. By alternating the background colors of odd and even rows, users can more easily track and differentiate data across the grid.
Even Row Back Color
Choose the Even Row Background Color using the color pallet. Even Row Background Color refers to the background color applied to the even-numbered rows in a data grid control. This feature, similar to the odd row background color, is used to improve the readability of tabular data by creating a visual distinction between consecutive rows.
Header Height
Specify the Header Height size in pixels. Header Height refers to the height of the header row in a data grid control. The header row contains the column titles or labels that describe the data in each column of the grid. The Header Height can be adjusted to improve the readability and appearance of the data grid, especially if the column titles are long or if a larger font size is used.
Row Height
Specify the Row Height size in pixels. Row Height refers to the height of each row within a data grid control. This measurement determines how much vertical space each row occupies in the grid. Adjusting the row height can help improve the readability and presentation of the data,
The Row Height can be adjusted to improve the readability and presentation of the data grid, especially if the content within the rows varies in size or if a specific visual layout is desired.
Header Padding
Specify the Header Padding size in pixels or percentage. Header Padding refers to the space between the content (such as text) within the header cell and the boundaries of the header cell itself in a data grid control. This padding helps to ensure that the header content is not too close to the edges, making it more readable and visually appealing.
Row Padding
Specify the Row Padding size in pixels or percentage. Row Padding refers to the space between the content within a row and the boundaries of that row in a data grid control. This padding helps to ensure that the content is not too close to the edges, making it more readable and visually appealing.
Show Vertical Grid Lines
The Show Vertical Grid Line function controls whether vertical lines are displayed between the columns in a data grid control. Enabling this feature helps to visually separate the columns, making it easier for users to distinguish and read the data in each column. This can be particularly useful in grids with many columns or densely packed data, as the vertical lines provide a clear visual guide that enhances the overall readability and organization of the data.
Show Horizontal Grid Lines
The Show Horizontal Grid Line function controls whether horizontal lines are displayed between the rows in a data grid control. Enabling this feature helps to visually separate the rows, making it easier for users to distinguish and read the data in each row. This can be particularly useful in grids with many rows or densely packed data, as the horizontal lines provide a clear visual guide that enhances the overall readability and organization of the data.
Grid Line Color
Choose the Grid Line Color using the color pallet. Grid Line Color is the color used for the lines that separate the rows and columns in a data grid control.
Table Border Color
Choose the Table Border Color using the color pallet. Table Border Color is the color used for the outer border of the entire data grid control. This setting allows you to customize the appearance of the border that surrounds the data grid, enhancing the visual clarity and overall aesthetics of the table.
Table Border Thickness
Specify the Table Border Thickness in pixels. Table Border Thickness refers to the width of the border surrounding the entire data grid control. This setting allows you to customize how thick or thin the outer border of the data grid appears.
Select Single/Multiselect
This refers to the selection modes available for interacting with rows or cells in a data grid control.
Select: Single:
This mode allows the user to select only one row or cell at a time. When a new row or cell is selected, the previous selection is automatically deselected. This is beneficial in scenarios where only one item needs to be focused on or acted upon at a time.
Select: Multiselect:
This mode allows the user to select multiple rows or cells simultaneously. Users can typically hold down the CTRL (or CMD on macOS) key to select multiple non-contiguous items, or the SHIFT key to select a range of items. This is beneficial in scenarios where batch operations are needed, such as deleting multiple records or applying the same action to several items at once.
Row Selectable
Row Selectable function controls whether individual rows in a data grid control can be selected by the user. This feature allows for greater control over user interactions with the data grid, enabling or disabling row selection based on a specific criteria or condition.
Reference DocType
Specify the DocType this Data Grid Control would be applied to. A DocType is a fundamental component that defines the structure and behavior of data within the system. It is a blueprint for creating and managing various documents and records, such as Sales Orders, Invoices, Work Orders, and more.
Properties (Template)
Use the Properties Template to edit the Data Grid Control table fields.
Click on the Pencil symbol corresponding to the row you want to edit. This should take you to the Edit Row screen.
Advance CSS
Use the stylesheet language (HTML or XML) to control the layout, colors, fonts, and overall appearance of the Data Grid Control.
Header Advance CSS Style
Header Advance CSS Style refers to the use of advanced CSS techniques to customize the appearance and behavior of the header row in a data grid control. This can include a variety of styling options to enhance the visual appeal and functionality of the header.
Some examples of advanced CSS styling are listed below:
Custom Fonts and Colors:
Applying specific fonts, colors, and text styles to the header to match the branding and design requirements of the POS.
Padding and Margins:
Adjusting the padding and margins around the header text to improve readability and layout.
Hover Effects:
Adding hover effects to the header cells to provide visual feedback when users interact with the header.
Alignment:
Customizing the alignment of the header text (left, right, center) to ensure it fits well within the header cells.
Borders and Backgrounds:
Setting custom borders and background colors for the header cells to make them stand out or blend in with the rest of the grid.
Responsive Design:
Ensuring the header adapts well to different screen sizes and devices, maintaining usability and aesthetics across various platforms.
These advanced CSS styles help create a more user-friendly and visually appealing data grid control, enhancing the overall user experience in the POS.
Row Advance CSS Style
Row Advance CSS Style refers to the use of sophisticated CSS techniques to customize the appearance and behavior of rows within a data grid control. This can include a variety of styling options to enhance the visual appeal and functionality of the rows. Some examples of advanced CSS styling are listed below:
Custom Fonts and Colors:
Applying specific fonts, colors, and text styles to the rows to match the branding and design requirements of the POS.
Padding and Margins:
Adjusting the padding and margins around the row content to improve readability and layout.
Hover Effects:
Adding hover effects to the rows to provide visual feedback when users interact with them.
Conditional Styling:
Using CSS classes or inline styles to apply different styles based on certain conditions, such as highlighting rows that meet specific criteria.
Responsive Design:
Ensuring the rows adapt well to different screen sizes and devices, maintaining usability and aesthetics across various platforms.
These advanced CSS styles help create a more user-friendly and visually appealing data grid control, enhancing the overall user experience in the POS system.