ComponentOne v3 introduces a new feature, "Row detail" in FlexGrid for WinForms. Through this feature, in cases where either the information to be displayed is large as compared to screen space available (or when the developer wants to show information about few fields in detail) information can be shown in a detail row container. This row container is customizable to include any control(s) in any layout.

The feature will allow developers to show information layer-wise. Layer-wise means that some basic information can be shown through normal/regular rows, while the detailed information can be shown through row detail control.

The latest release of ComponentOne for WinForms brings another convenient feature – Row Details in the flagship control C1FlexGrid. The row details feature provides the developer with a highly customizable template that can be used to present additional information. With this extension, each row in FlexGrid is now capable of presenting another layer of information with which the end-users can interact.

Read the full ComponentOne 2019 v3 release

Image 1.png

FlexGrid WinForms Row Detail Overview

C1FlexGrid row details feature allows showing content that is too big to fit into any FlexGrid column. Additionally, the feature can be used to offer extra editing support like Inline editing in the expandable area of the FlexGrid. The end users can expand/collapse the row with detail, to show/hide detail control.

New API

Following are the newly added API elements for this feature:

  • RowDetailProvider: The property gets/sets the delegate method which creates the detail control for displaying. Its default value is null.

  • RowDetailsVisibilityMode: Gets/sets the value that specifies when the detail control should display. The type of property is RowDetailsVisibilityMode enumeration and is represented by the next values:

    • VisibleWhenSelected: The detail control is displayed only for selected rows.
    • Collapsed: The detail control is not displayed.
  • AreRowDetailsFrozen: Gets/sets the Boolean value specifying whether row details should horizontally scroll along with the C1FlexGrid control content. The default value is true.

  • RowDetailsApplying event: Fires for each data object in the C1FlexGrid’s data source during assigning of the RowDetailProvider property. The event arguments contain DataObject property representing the data object in the corresponding data source, e.g. DataRow object if the C1FlexGrid.DataSource is represented by an instance of the DataTable class.

  • IC1FlexGridRowDetail interface: This interface allows using any control in the FlexGrid’s detail rows. This interface contains 3 methods:

    • Setup: Shall be used to set up data binding or other properties of the detail control.
    • UpdateSize: The detail control should update its size in this method.
    • Removing: Shall be used to release resources before removing the detail control. If Setup method did not initialize any resources, the body of this method can be empty.

In addition to these API elements, the row detail feature provides two built-in controls and also allows using any custom control as detail control in FlexGrid. Let’s see them one by one.

Using Built-in Row Detail Controls

Row details feature supports two different implementations of row details – C1InputPanelRowDetail and C1FlexGridRowDetail controls. These controls are derived from UserControl and contain C1InputPanel/C1FlexGrid in their Controls collections.

The built-in controls are exposed through a new assembly ‘C1.Win.C1FlexGrid.RowDetails.4.5.2.dll’ available in the ComponentOne for WinForms package. So, only if you are using these built-in controls, you need to refer the new row details assembly in your project.

This assembly needs to be referred additionally to the FlexGrid assembly ‘C1.Win.C1FlexGrid.4.5.2.dll’.

C1InputPanelRowDetail

The C1InputPanelRowDetail control can be used to achieve the inline editing of the C1FlexGrid data.

The minimal code to use C1InputPanelRowDetail control looks like:

// code above this line initializes DataSet with filled "Customers" DataTable
flexGrid.DataSource = dataSet;
flexGrid.DataMember = "Customers";
flexGrid.RowDetailProvider = (g, r) => new C1InputPanelRowDetail();

C1FlexGridRowDetail

The C1FlexGridRowDetail control can be used to support the Master-Detail scenario for the C1FlexGrid control.

The minimal code to use C1FlexGridRowDetail will look like:

// code above this line initializes DataSet with filled "Customers" and "Orders" DataTables
dataSet.Relations.Add("Customers_Orders",
dataSet.Tables["Customers"].Columns["CustomerID"],
dataSet.Tables["Orders"].Columns["CustomerID"]);

flexGrid.DataSource = dataSet;
flexGrid.DataMember = "Customers";

flexGrid.InitRowDetailProvider = (g, r) => new C1FlexGridRowDetail();
flexGrid.AreRowDetailsFrozen = false;

Image 3.png

Taking row detail a step further: Using FlexChart as the detail control

The row detail feature not only supports using built-in controls C1InputPanelRowDetail and C1FlexGridRowDetail as detail control in the grid, but it also allows using custom controls. To show custom control you just need to make sure that it implements IC1FlexGridRowDetail interface. For example, if you want to use C1Label, you can inherit the control from the C1Label control and implement required interface members.

To get a better understanding of how to use any custom control as detail control in the grid, let’s take the help of a use-case.

Row Detail - Use Case

Let’s consider a non-government organization (NGO) regularly conducts world-wide surveys on various global indicators and has accumulated a repository of data. Now, the NGO wants to showcase this data to their audiences in a way that they see the information for all the indicators and also additionally, give them the ability to identify how the countries stand individually over these indicators.

No single control can represent such a data, however, FlexGrid with the new row details feature can. To represent this data, FlexGrid can show the list of indicators along with their information and the row detail can expose the ability to detect the trends. For the detail control, Charts would be ideal as displaying the data visually can help demonstrate important patterns between data points. When you present information in charts, it is easier to understand and interpret the information.

Therefore, we will try to create a custom control that contains FlexChart for displaying the data and use this control as FlexGrid’s detail row control.

We’ll be dividing this implementation in the following parts:

  • Setting up FlexGrid
  • Setting up data for FlexChart
  • Creating custom detail row control using FlexChart
  • Using FlexChart as detail control in FlexGrid

Setting up FlexGrid

Using FlexGrid in your project is super easy. Just drag-drop C1FlexGrid from VS toolbox onto your Windows Form, this will add a reference to C1.Win.C1FlexGrid.RowDetails.4.5.2 dll and create an instance of FlexGrid.

To show the list of indicators and their information, you can use any data source for FlexGrid. For demonstration, we will be using the most common data source: DataTable with the following simple structure.

DataTable dataTable = new DataTable();
dataTable.Columns.Add("Indicator Code", typeof(string));
dataTable.Columns.Add("Indicator Type", typeof(string));
dataTable.Columns.Add("Indicator Name", typeof(string));

Now, using the DataSource property bind the grid to the DataTable

flexGrid.DataSource = dataTable;

The following image shows data loaded in the grid after completion of this step:

Image 4.png

Setting up Data for FlexChart

To show how effortlessly you can use a FlexChart as a custom detail control to visualize the trends, we will be using data for a few featured indicators like ‘Population Growth’, ‘Methane Emission’ etc published on the WorldBank. For these indicators, the data has been taken for the last 15 years that is, from 2003 to 2018, as a sample.

To reflect this data in FlexChart, we need a blueprint of the data that we can bind our chart to. We will create the following few classes for this:

public class Country
{
     public string CountryName { get; set; }
     public string CountryCode { get; set; }
     public List<DataItem> ListOfValues { get; set; }
     public Country()
     {
          CountryName = "";
          CountryCode = "";
          ListOfValues = new List<DataItem>();
     }
}
public class DataItem
{
     public string Year { get; set; }
     public double Value { get; set; } 
}

Creating Custom Detail Row Control using FlexChart

To create a custom control that contains FlexChart you should implement the IC1FlexGridRowDetail interface.
For this, create a UserControl, drag-drop C1FlexChart onto it. Also, drop a ComboBox for selecting the country for which the indicator values need to be analyzed.

The following image shows how the user control should look:

Image 5.png

Now, you need to setup FlexChart: This can be done by overriding the method ‘Setup’ present in the interface, which exposes the index of the row whose detail control needs to be displayed.

public void Setup(C1FlexGrid parentGrid, int rowIndex)
{
      var bs = new BindingSource();
      bs.DataSource = parentGrid.DataSource as DataTable;
      bs.Position = parentGrid.Rows[rowIndex].DataIndex;
      indicatorName = parentGrid[rowIndex, 3].ToString();

      cmbCountry.SelectedValueChanged += new EventHandler(CmbCountry_SelectedValueChanged);

Once the indicator whose details needs to be displayed is known, you can start binding chart as shown below:

private void CmbCountry_SelectedValueChanged(object sender, EventArgs e)
{
       var selectedCountryData = DataLoader.Import(indicatorName, cmbCountry.SelectedItem as string);
       flexChart1.ChartType = ChartType.LineSymbols;
       flexChart1.DataSource = selectedCountryData.ListOfValues;
       flexChart1.Binding = "Value";
       flexChart1.BindingX = "Year";
       flexChart1.Series.Add(new Series());
}

Using FlexChart as Detail Control in FlexGrid

To use the custom created detail control in FlexGrid, you just need to define the delegate method and assign it to the RowDetailProvider property, as shown below

flexGrid.RowDetailProvider = (g, r) => new DetailRowContainer();
flexGrid.RowDetailsVisibilityMode = RowDetailsVisibilityMode.Collapsed;

Image 6.png

Detail row control can help present data that is large to be shown in a limited space. Also, it helps reducing the complexity of the view by allowing placing the complex parts in detail row. We hope you like this new feature. We believe it is useful and easy to use. It also adds runtime capabilities in the FlexGrid.

Download the C# application

Try ComponentOne Studio

Download the latest version of ComponentOne Studio Enterprise

Download Now!