Versions Compared

Old Version 9

changes.mady.by.user Paulo Tsuchiya

Saved on

compared with

New Version 10

changes.mady.by.user Paulo Tsuchiya

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

This section discusses how to configure the DataGrid component.

On this page:

Table of Contents
maxLevel3
styleNone

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

Configuring a DataGrid Window

Configuration

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

General

DataGrid

Configuration

General Settings

Field

Description

Data Source

It defines the dataset table or query from which the data grid will get the data.

Control Name

It defines a name for the control so it can be accessed in the code-behind script. See Display Code Behind.

Data Source

It defines the dataset table or query from which the data grid will get the data.

Selected Values

Captures the contents of the selected row using

SelectedValues

Enter

a string tag or array tag

to receive the contents of the selected row

.

SelectedIndex

Selected Index

Captures

Enter a tag to receive

the number of the currently selected row

. Row numbering starts

, starting with 0, using a tag.

LinesCount

Line Count

Receives

Select a tag to receive

the number of lines in the window using a selected tag.

Pause Update

Set an object to define if

Determines whether the DataGrid

will be updated or not

updates when the data changes by setting an object.

GridSettings

Tag

Grid Settings

lets you store the data grid

Stores the DataGrid configuration using a retentive text tag,

allowing the grid to maintain its layout, sorting, filtering, and other

maintaining settings after a shutdown or restart

. For example, a user can customize the grid to show specific columns in a specific order, apply filters, set column widths, and save that setting. Later, they can load this saved configuration to restore the grid to their preferred configuration

.

Filter

Enter

Limits the displayed data using an SQL statement

to limit the data displayed

.

Binding

Select

Sets the binding mode

. See

for the DataGrid. The options are:

  1. TwoWay updates the data source and UI interchangeably;

  2. OutputOnly allows data output without user input;

  3. 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

BindingMode Enum by Microsoft. 

Theme

Select the theme for the window.

Binding

Select the binding mode. See BindingMode Enum by Microsoft. 

AllowInsert

Select to allow users to add rows

.

Column Titles

Select to display

Displays column titles.

Transpose

Select to transpose columns to rows.

OneClick Edit

Select to edit cells on first click.

Allow Delete

Select to allow the data to be deleted from a grid

AllowSort

Select to allow users to sort the data by column.

Auto Column

Allow Sort

Allows users to sort data.

Transpose

Enables transposing of columns to rows.

Auto Columns

This option automatically includes

Select to have the system automatically include

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:

  1. None: The None option configures a column to disable sorting. Users cannot sort the data in this column, maintaining the original order of the data.

  2. Ascending: The Ascending option configures 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.

  3. Descending: The Descending option configures 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

If selected, you do not have to configure the columns below. To customize specific columns, add the column to the column list and configure the settings to the right (described below).

  • Deselect to manually configure each column that you want to include using the Columns list and settings to the right (described below).

    • Multiple Selection

    Check to make multiple selection possible.

    Edit SelectedValues

    Check to make it possible to edit multiple selected values.

    Show Header

    Check to show headers on grid.

    Filter

    Enter SQL statement to limit the data displayed.

    Columns

    For each column you want to customize or include manually, add the column and configure the settings to the right of the list (described below).

    Visible

    Select to allow the column to display in the data grid window.

    Editable

    Select to let users edit the column

    .

    Show in Column Chooser

    Select to include

    Includes the column in the column chooser,

    which lets

    allowing users to select

    the

    which columns to display.

    FieldName

    Auto Resize

    Automatically adjusts

    Enter a name for

    the column width based on content.

    Editor

    Select

    Sets the

    column

    data type of the column (e.

    Title

    Enter the text for the column header.

    Width

    Enter the initial column width, in WPF units (device-independent pixels; one WPF = 1/96 inch).

    Sort

    Select how to initially sort the column.

    Alignment

    Select to set the horizontal alignment.

    g., text, numeric). The options are:

    1. Text: The Text editor configures a column to allow users to input and edit plain text. It is ideal for columns that require alphanumeric data, such as names or descriptions.

    2. Numeric: The Numeric editor configures a column to accept only numerical input. This is useful for columns that store integer or decimal values, such as quantities or prices.

    3. CheckBox: The CheckBox editor configures 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.

    4. MaskedText: The MaskedText editor configures a column to enforce a specific input format. It is used for fields like phone numbers or social security numbers, ensuring the data adheres to a required pattern.

    5. DateTime: The DateTime editor configures a column to allow users to select dates and times. This is useful for columns that record scheduling information, such as appointment dates or timestamps.

    6. Interval: The Interval editor configures 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.

    7. ComboBox: The ComboBox editor configures a column to present a dropdown list of predefined options. This is useful for columns where users need to select from multiple values, such as categories or statuses.

    8. Color: The Color editor configures a column to allow users to select colors. This is 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:

    1. Left:

    Left -

    1. Align the data to the left side in the column.

    2. Right

    -

    1. : Align the data to the right side in the column.

    2. Center

    -

    1. : Align the data to the center in the column.

    2. Stretch

    -

    1. : This will stretch the column horizontally.

    Format

    Defines the format for displaying the column's data (e.g.

    , number format, date format).


    Configuring a DataGrid Window

    DataGrid with Columns Configured to Display Values with

    Example of a DataGrid with

    2 Decimal Places

    There are cases where even after setting the tag format to display in the grid and making data changes in the property window to show only 2 decimals, it does not work. In this way, the grid somehow shows more decimals than what is shown in the property window.

    To resolve this situation, you can set the column where you want to limit the decimal values to numeric and in the format field put "0.00" in the datagrid DataGrid settings menu, this can make the data grid limit the number of decimal places.

    Image RemovedImage Added

    How to make the selected row be the first row in the grid

    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 visible while you scroll horizontally through all columns. This is a useful feature to keep a referencing column like an ID or a name always visible to keep your orientation while scrolling.

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


    In the code below for CodeBehind, it enables freezing/fixing the left-most columns in a DataGridWindow element.

    The 'FixedColumnCount' property tallies the number of columns (from left to right) that will be fixed. The 'ShowFixedColumnSplitter' 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;
}


    In this section:

    Page Tree
    root@parent
    spacesV10