Versions Compared

Key

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

Overview

The integration of interactive buttons within DataGrid rows is a valuable aspect of the FactoryStudioplatform, enhancing user interface design and functionality. This process allows for a dynamic and intuitive navigation system within an application, with each button serving acting as a gateway to different displays.


On this page:

Table of Contents
maxLevel3


Integrating Buttons to a DataGrid

This process involves integrating buttons within a DataGrid, an effective tool for displaying, editing, and sorting tabular data. A custom column is created for these buttons, with each row housing a unique button.

In our

specific

example, we illustrate a DataGridWindow with a column dedicated to buttons.

The concept here is to enable

This setup enables each row of the DataGrid to have a button that, when clicked, redirects the user to a different display.

The steps include creating a Button-type column, instantiating Button objects, assigning click events to these buttons, and adding text to the buttons. Finally, the instantiated buttons are assigned to the

record's

record’s Button-type column.

One crucial aspect of this setup is

to ensure

ensuring that any click events associated with the buttons are appropriately removed when the display is closed. This action ensures resources are efficiently managed, preventing potential memory leaks.

Tutorial


Step-by-Step

To create buttons in DataGrids that direct

Creation of Buttons in DataGrids with direction

to other displays

Image Removed

In summary, you should create

, follow these steps:

  1. Create Button Column: Add a column of type Button to the DataGrid (
line
  1. Line 12)
, instantiate objects of type Button (lines
  1. .
  2. Instantiate Buttons: Create button objects (Lines 2 and 3)
, add the
  1. .
  2. Add Click Events: Assign click event handlers to the
button
  1. buttons (
lines
  1. Lines 14 and 24)
, add text to the button (lines
  1. .
  2. Set Button Text: Define the text for each button (Lines 15 and 25)
, and finally, assign the instantiated button
  1. .
  2. Assign Buttons to Column: Add the buttons to the Button-type column
of
  1. in the
record
  1. DataGrid (
lines 21 and 31).
  1. Lines 21 and 31).

Image Added

Expand
titleTranscripted Code


Code Block
linenumberstrue
DataTable dt;
Button btn1 = new Button();
Button btn2 = new Button();

public void DisplayOpening()
{
    dt = new DataTable("Products");
    dt.Columns.Add("ProductID", typeof(int));
    dt.Columns.Add("Name", typeof(string));
    dt.Columns.Add("QuantityPerUnit", typeof(string));
    dt.Columns.Add("UnitPrice", typeof(double));
    dt.Columns.Add("GoDisplay", typeof(Button));

    btn1.Click += new RoutedEventHandler(GoDisplay1);
    btn1.Content = "Display 1";
    DataRow row1 = dt.NewRow();
    row1["ProductID"] = 1;
    row1["Name"] = "Apple";
    row1["QuantityPerUnit"] = 1;
    row1["UnitPrice"] = 5.50;
    row1["GoDisplay"] = btn1;
    dt.Rows.Add(row1);

    btn2.Click += new RoutedEventHandler(GoDisplay2);
    btn2.Content = "Display 2";
    DataRow row2 = dt.NewRow();
    row2["ProductID"] = 2;
    row2["Name"] = "Banana";
    row2["QuantityPerUnit"] = 1;
    row2["UnitPrice"] = 4.50;
    row2["GoDisplay"] = btn2;
    dt.Rows.Add(row2);

    @Dataset.Table.DataTable_Grid.LocalContents.Initialize(dt);
} 




6. The click events are defined in the methods below:

Image Modified

Expand
titleTranscripted Code


Code Block
private void GoDisplay1(object sender, EventArgs e)
{
    Display.Open();
}

private void GoDisplay2(object sender, EventArgs e)
{
    @Display.Display2.Open();
}



7. You should also define the removal of the click events added to the buttons when closing the display, as in the following code:

Image Modified

Expand
titleTranscripted Code


Code Block
public void DisplayClosing()
{
    dt.Rows.Clear();
    dt = null;

    btn1.Click -= GoDisplay1;
    btn2.Click -= GoDisplay2;
}



The generated table contains the last column with buttons that direct to different displays, as shown in the image:

Image Modified



In this section...

Page Tree
root@parent
spacesV10