Page History

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

maxLevel	3
style	None

Requirements

This component is Portable. It runs both on Windows (WPF) and on Web Pages hosted in any platform.

Anchor
Configuring a DataGrid Window
Configuring a DataGrid Window

Configuration

Double-click any DataGrid window object in the display to configure it.

General

DataGrid General Settings

Field

Description

Data SourceIt defines

Defines the dataset table or query from which the data grid will get the data. It includes support for several data types, including JSON.

Expand

title	DataGrid displaying JSON

Image Added

Control Name

It defines 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.

BindingSets

Determines the binding mode for the

DataGrid. The options are

selected component. Options include:

TwoWay:

updates

Updates the data source and UI interchangeably;

OutputOnly:

allows

Allows data output without user input;

InputOnly:

accepts

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.

Info

title	Understanding SelectedValues Behavior in DataGrid

The SelectedValues property in the DataGrid assigns values differently based on the DataType of the configured parameter:

DataTemplate (IsTargetUserType = true): Matches column names in the DataTable and assigns values accordingly.
Array (IsArray = true): Receives DataRow.ItemArray, assigning values based on index order.
Default case: Takes the value from the first column of the DataTable.

Understanding this behavior helps ensure correct data handling in your configuration.

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: The None option configures Sets a column to disable sorting. Users cannot sort the data in this column, maintaining the original order of the data. Ascending: The Ascending option configures 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: The Descending option configures 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 of 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: The Text editor configures Sets a column to allow users to input and edit plain text. It is ideal Ideal for columns that require alphanumeric data, such as names or descriptions. Numeric: The Numeric editor configures Sets a column to accept only numerical input. This is useful Useful for columns that store integer or decimal values, such as quantities or prices. CheckBox: The CheckBox editor configures 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: The MaskedText editor configures Sets a column to enforce a specific input format. It is used Used for fields like phone numbers or social security numbers, ensuring the data adheres to a required pattern. DateTime: The DateTime editor configures Sets a column to allow users to select dates and times. This is useful Useful for columns that record scheduling information, such as appointment dates or timestamps. Interval: The Interval editor configures 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: The ComboBox editor configures Sets a column to present a dropdown list of predefined options. This is useful Useful for columns where users need to select from multiple values, such as categories or statuses. Color: The Color editor configures Sets a column to allow users to select colors. This is particularly 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: Align Aligns the data to the left side in the column. Right: Align Aligns the data to the right side in the column. Center: Align Aligns the data to the center in the column. Stretch: This will stretch Stretches the column horizontally.
Format	Defines the format for displaying the column's data (e.g., number format, date format).

Customizations

Columns

Configuring a DataGrid Window

DataGrid with Columns Configured to Display Values

with 2 Decimal Places

There are cases where, even after setting the tag format to display in the grid and

making data changes in

adjusting the property window to show only

2

two decimals, it does not work.

In this way, the grid somehow shows

The grid may still display more decimals than

what is shown

specified in the property window.

To resolve this

situation

issue,

you can

set the column

where you want

to

limit the decimal values to

numeric and enter ‘0.00’ in the format field

put "0.00" in

within the DataGrid settings menu

, this can make the data grid

. This will limit the number of decimal places displayed in the grid.

How to make the selected row be the first row 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 also supports the feature to freeze columns. That means they stay freezing columns, keeping them visible while you scroll horizontally through all columns. This feature is a useful feature to keep a referencing column like an ID or a name always visible to keep your orientation while scrollinguseful for keeping reference columns, like IDs or names, always visible for better orientation.

To freeze a numer number of columns just set the FrozenColumnCount property to the desired number of columns you want to freeze.

In the

The code below

for CodeBehind, it enables freezing/fixing

demonstrates how to freeze the left-most columns in a

DataGridWindow element

DataGridWindow element using CodeBehind.

The

'

FixedColumnCount

'

property

tallies

specifies the number of columns (from left to right)

that will

to be fixed.
The

'

ShowFixedColumnSplitter

'

property allows you to select

the

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;
}

Scrolling Controls for DataGrid

The following methods and properties were created to enable scrolling for the DataGrid object:

Methods

Code Block

language	c#

//Scrolls the content upward by the specified step size.
public void ScrollUp(double step)

Code Block

language	c#

//Scrolls the content upward by the default step size of 1.
public void ScrollUp()

Code Block

language	c#

//Scrolls the content downward by the specified step size.
public void ScrollDown(double step)

Code Block

language	c#

//Scrolls the content downward by the default step size of 1.
public void ScrollDown()

Properties

Code Block

language	c#

//Manages the visibility of the vertical scrollbar for the control.
public ScrollBarVisibility VerticalScrollBarVisibility

Code Block

language	c#

//Manages the visibility of the horizontal scrollbar for the control.
public ScrollBarVisibility HorizontalScrollBarVisibility

Note
The same methods and properties are available for AlarmViewer Control.

Customizing window appearance

The following properties enable window customization for the DataGrid control:

Properties

Code Block

language	c#

//Flag to toggle visibility of RowSelectorPane (WPF Only).
public bool ShowRowSelectorPane

Code Block

language	c#

//Set BorderThickness for Alarm window.
public Thickness GridBorderThickness

Note
The same methods and properties are available for AlarmViewer Control.

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.

Image Added

In this section:

Page Tree

root	@parent
spaces	V10

Space shortcuts

Page tree

Versions Compared

Old Version 14

New Version Current

Key

Requirements

Anchor
Configuring a DataGrid Window
Configuring a DataGrid Window

Configuration

General

Columns

Customizations

Columns

Configuring a DataGrid Window

with 2 Decimal Places

Set Selected Row as First

Frozen Columns

Scrolling Controls for DataGrid

Customizing window appearance

Runtime Execution

Space shortcuts

Page tree

Page History

Versions Compared

Old Version 14

New Version Current

Key

Requirements

AnchorConfiguring a DataGrid WindowConfiguring a DataGrid Window

Configuration

General

Columns

Customizations

Columns

Configuring a DataGrid Window

with 2 Decimal Places

Set Selected Row as First

Frozen Columns

Scrolling Controls for DataGrid

Customizing window appearance

Runtime Execution

Anchor
Configuring a DataGrid Window
Configuring a DataGrid Window