Getting Started with Row Details FlexGrid for WinForms

The latest release of ComponentOne for WinForms brings another interesting and 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.

This blog walks through the details of the feature by creating a FlexGrid and extending it to display row details.

Overview of Row Details in .NET Data Grid Control

C1FlexGrid row details feature displays 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 APIs for Row Details Feature

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 the 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 assignment 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 for the use of any control in FlexGrid’s detail rows. This interface contains 3 methods:

  • Setup: Will 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: Will 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 for the use of any custom control as a detail control in FlexGrid. Let’s see them one by one.

Using built-in row detail controls

The row details feature supports two different implementations of row details – C1InputPanelRowDetail and C1FlexGridRowDetail control. These controls are derived from UserControl and contain C1InputPanel/C1FlexGrid in their Control 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, if you are only using these built-in controls, you will need to refer to the new row details assembly* in your project.

*Additionally, this assembly needs to be referred to the FlexGrid assembly ‘C1.Win.C1FlexGrid.4.5.2.dll’.

C1InputPanelRowDetail

The C1InputPanelRowDetail control can be used to achieve 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 C1InputPanelRow Deatil();

C1FlexGridRowDetail

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

The minimal code to use C1FlexGridRowDetail looks like:

// code above this line initializes DataSet with filled "Customer" 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;

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

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

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

Use Case

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 so they see the information for all the indicators. They can also identify how the individual countries stand over these indicators.

No single control can represent such data. However, with the new row details feature, FlexGrid can. To represent this data, FlexGrid shows the list of indicators, along with their information. The row detail exposes the ability to detect the trends. For the detail control, charts would be ideal because 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 to display 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 this tutorial, 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

Setting up data for FlexChart

To show how effortlessly you can use a FlexChart as a custom detail control to visualize 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 recorded for the last 15 years (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 uhj}
}

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 and then drag-drop C1FlexChart onto it. Also, drop a ComboBox to select the country for which the indicator values need to be analyzed.

The following image shows how the user control should look like.

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 the 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 customized 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.RowDetailVisibilityMode = RowDetailVisibilityMode.Collapsed;

We hope you like the new row details feature. We believe it is very useful and easy to use. It also adds runtime capabilities in the FlexGrid.

Resources

Download the c# application.