The DataGrid, in the context of the components, refers to the graphical element for visualization and handling structured data in your solutions displays. It allows users to view, edit, sort, filter, and manage data within a grid structure. Key functionalities include data binding, editing capabilities, sorting, filtering, and customizable columns. Applications include industrial monitoring systems, where real-time data needs visualization and interaction. Before usage, configure data sources, binding modes, and column properties. Usage involves setting up DataGrid in the display, defining columns, and enabling desired features like editing, sorting, and filtering through the configuration menu.
On this page:
| Table of Contents | ||||
|---|---|---|---|---|
|
Requirements
This component is Portable. It runs both on Windows (WPF) and on Web Pages hosted in any platform.
| Anchor | ||||
|---|---|---|---|---|
|
Configuration
Double-click any DataGrid window object in the display to configure it.
General
DataGrid General Settings | |
|---|---|
Field | Description |
Data Source | Defines the dataset table or query from which the data grid will get the data. |
Control Name | Defines a name for the control so it can be accessed in the code-behind script. See Display Code BehindCodeBehind. |
Selected Values | Captures the contents of the selected row using a string tag or array tag. |
Selected Index | Captures the number of the currently selected row, starting with 0, using a tag. |
Line Count | Receives the number of lines in the window using a selected tag. |
Pause Update | Determines whether the DataGrid updates when the data changes by setting an object. |
Grid Settings | Stores the DataGrid configuration using a retentive text tag, maintaining settings after a shutdown or restart. |
Filter | Limits the displayed data using an SQL statement. |
Binding | Determines the binding mode for the selected component. Options include: TwoWay: Updates the data source and UI interchangeably; OutputOnly: Allows data output without user input; InputOnly: Accepts user input without updating the data source |
Theme | Selects the visual style for the DataGrid. |
Allow Edit | Enables editing of the selected values. |
Allow Insert | Allows users to add rows. |
Allow Delete | Allows row deletion. |
Column Titles | Displays column titles. |
Allow Sort | Allows users to sort data. |
Transpose | Enables transposing of columns to rows. |
Auto Columns | This option automatically includes all table or query columns in the window. Select this option to have the system include all columns without manual configuration. |
OneClick Edit | Allows editing of cells on the first click. |
Multiple Selection | Enables selecting multiple rows or cells simultaneously. |
Header | Provides space for dragging column titles to group data. |
Columns
DataGrid Configuration | |
|---|---|
Field | Description |
Field | Specifies the name of the column in the DataGrid. |
Title | Sets the text displayed as the header for the column. |
Width | Defines the initial width of the column. |
Sort | Determines the initial sort order for the column. The options are: None: Sets a column to disable sorting. Users cannot sort the data in this column, maintaining the original order of the data. Ascending: Sets a column to sort data in ascending order. When applied, the data in this column will be arranged from the smallest to the largest value, or from A to Z for text entries. Descending: Sets a column to sort data in descending order. When applied, the data in this column will be arranged from the largest to the smallest value, or from Z to A for text entries. |
Visible | Shows or hides the column in the DataGrid. |
Editable | Allows or disallows editing the column's data. |
Show in Column Chooser | Includes the column in the column chooser, allowing users to select which columns to display. |
Auto Resize | Automatically adjusts the column width based on content. |
Editor | Sets the data type of the column (e.g., text, numeric). The options are: Text: Sets a column to allow users to input and edit plain text. Ideal for columns that require alphanumeric data, such as names or descriptions. Numeric: Sets a column to accept only numerical input. Useful for columns that store integer or decimal values, such as quantities or prices. CheckBox: Sets a column to display a checkbox for each cell. Users can toggle the checkbox to represent binary data, such as active/inactive status or true/false values. MaskedText: Sets a column to enforce a specific input format. Used for fields like phone numbers or social security numbers, ensuring the data adheres to a required pattern. DateTime: Sets a column to allow users to select dates and times. Useful for columns that record scheduling information, such as appointment dates or timestamps. Interval: Sets a column to accept time spans. Users can input periods or durations, making it suitable for columns that track intervals, like project durations or time logs. ComboBox: Sets a column to present a dropdown list of predefined options. Useful for columns where users need to select from multiple values, such as categories or statuses. Color: Sets a column to allow users to select colors. Particularly useful for columns that require color coding or selection, such as priority indicators or design elements. |
Alignment | Specifies the horizontal alignment of the column content (e.g., left, right, center). The options are: Left: Aligns the data to the left side in the column. Right: Aligns the data to the right side in the column. Center: Aligns the data to the center in the column. Stretch: Stretches the column horizontally. |
Format | Defines the format for displaying the column's data (e.g., number format, date format). |
Configuring a DataGrid Window
DataGrid Columns with 2 Decimal Places
There are cases where, even after setting the tag format to display in the grid and adjusting the property window to show only two decimals, it does not work. The grid may still display more decimals than specified in the property window.
To resolve this issue, set the column to numeric and enter ‘0.00’ in the format field within the DataGrid settings menu. This will limit the number of decimal places displayed in the grid.
Set Selected Row as First
| Code Block |
|---|
TDataGridWindow grid = CurrentDisplay.GetDataGrid("Grid");
Xceed.Wpf.DataGrid.DataGridControl dg = grid.GridControl.DataGridObj;
ScrollViewer myScrollViewer = (ScrollViewer)dg.Template.FindName("PART_ScrollViewer", dg);
if (myScrollViewer == null || dg.Items.Count == 0)
return;
string columnName = "Message";
int selIndex = -1;
for (int i = 0; i < dg.Items.Count; i++)
{
DataRowView rowView = dg.Items[i] as DataRowView;
if (TK.To<string>(rowView.Row[columnName]).StartsWith(@tag.txtfind))
{
dg.Items.MoveCurrentTo(rowView);
dg.SelectedItem = rowView;
selIndex = i;
break;
}
}
if (selIndex >= 0)
myScrollViewer.ScrollToVerticalOffset(selIndex); |
Frozen Columns
The data grid supports freezing columns, keeping them visible while you scroll horizontally. This feature is useful for keeping reference columns, like IDs or names, always visible for better orientation.
To freeze a number of columns just set the FrozenColumnCount property to the desired number of columns.
The code below demonstrates how to freeze the left-most columns in a DataGridWindow element using CodeBehind.
- The
FixedColumnCountproperty specifies the number of columns (from left to right) to be fixed. - The
ShowFixedColumnSplitterproperty allows you to select columns using the mouse (by clicking and dragging)."
| Code Block |
|---|
public void DisplayOpening()
{
TDataGridWindow gridWindow = CurrentDisplay.GetDataGrid("grid");
gridWindow.AfterInitilizationEvent += AfterInitilization;
}
public void DisplayIsOpen()
{
// Add your code here
}
public void DisplayClosing()
{
TDataGridWindow gridWindow = CurrentDisplay.GetDataGrid("grid");
gridWindow.AfterInitilizationEvent -= AfterInitilization;
}
private void AfterInitilization(object sender, EventArgs e)
{
TDataGridWindow gridWindow = CurrentDisplay.GetDataGrid("Grid");
Xceed.Wpf.DataGrid.Views.TableView tableView = gridWindow.GridControl.DataGridObj.View as Xceed.Wpf.DataGrid.Views.TableView;
tableView.FixedColumnCount = 1;
tableView.ShowFixedColumnSplitter = true;
} |
Runtime Execution
Before using the DataGrid during runtime execution, configure data sources, binding modes, and column properties. To use the DataGrid, set it up in the display, define columns, and enable desired features like editing, sorting, and filtering through the configuration menu.
In a production environment, the DataGrid can be used to monitor real-time data from various sensors. An operator can sort and filter this data to quickly identify and address any anomalies.
In this section:
| Page Tree | ||||
|---|---|---|---|---|
|