FlexGrid 行明细功能入门（Row Details）

登录

ComponentOne 在2019V3版本后引入了FlexGrid for WinForms的新功能“行明细信息”。

通过此功能，在要显示的信息比可用屏幕空间大的情况下（或当开发人员希望详细显示有关几个字段的信息时），可以在行明细信息容器中显示信息。该行容器可自定义以包括任何布局中的任何控件。

该功能使开发人员可以分层显示信息。可以通过行详细信息控件显示详细信息。

行明细信息功能为开发人员提供了高度可定制的模板，可用于显示其他信息。通过此扩展，FlexGrid中的每一行现在都能够呈现最终用户可以与之交互的另一层信息。

FlexGrid WinForms行明细信息概述

C1FlexGrid行详细信息功能允许显示太大而无法容纳任何FlexGrid列的内容。此外，该功能可用于提供额外的编辑支持，在FlexGrid展开的明细区域中的进行编辑。最终用户可以使用明细信息扩展/折叠行，以显示/隐藏明细信息控件。

新的API

以下是为此功能新添加的API元素：

RowDetailProvider：该属性获取/设置委托方法，该方法创建要显示的明细信息控件。其默认值为null。
RowDetailsVisibilityMode：获取/设置一个值，该值指定何时应显示详细信息控件。属性的类型是RowDetailsVisibilityMode枚举，并由以下值表示：
- VisibleWhenSelected：仅对选定的行显示详细信息控件。
- Collapsed：不显示详细信息控件。
AreRowDetailsFrozen：获取/设置一个布尔值，该值指示是否应将行明细信息与C1FlexGrid控件内容一起水平滚动。默认值是true。
RowDetailsApplying事件：在分配RowDetailProvider属性期间，将为C1FlexGrid数据源中的每个数据对象触发。事件参数包含DataObject属性，该属性表示相应数据源中的数据对象，例如，如果C1FlexGrid.DataSource由DataTable类的实例表示，则为DataRow对象。
IC1FlexGridRowDetail接口：此接口允许在FlexGrid的明细行中使用任何控件。该接口包含3种方法：
- Setup：将用于设置数据绑定或明细信息控件的其他属性。
- UpdateSize：明细信息控件应使用此方法更新其大小。
- Removing：在删除明细信息控件之前，应用于释放资源。如果Setup方法没有初始化任何资源，则此方法的主体可以为空。

行明细信息功能提供了两个内置控件，同时也允许将任何自定义控件用作FlexGrid中的详细信息控件。

使用内置行明细信息控件

行明细信息功能支持行明细信息的两种不同实现– C1InputPanelRowDetail和C1FlexGridRowDetail控件。这些控件派生自UserControl，并在其控件集合中包含了C1InputPanel / C1FlexGrid。

内置控件通过ComponentOne for WinForms软件包中提供的新程序集“ C1.Win.C1FlexGrid.RowDetails.4.5.2.dll”公开。因此，仅当您使用这些内置控件时，才需要在项目中引用这个dll。

该程序集需要额外引用FlexGrid程序集“ C1.Win.C1FlexGrid.4.5.2.dll”。

C1InputPanelRowDetail

C1InputPanelRowDetail控件可用于实现C1FlexGrid数据的内联编辑。

使用C1InputPanelRowDetail控件的最少代码如下所示：

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

复制代码

C1FlexGridRowDetail

C1FlexGridRowDetail控件可用于支持C1FlexGrid控件的“主-从”方案。

使用C1FlexGridRowDetail的最少代码如下所示：

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

复制代码

进一步自定义行明细：使用FlexChart作为详细信息控件

行明细信息功能不仅支持将内置控件C1InputPanelRowDetail和C1FlexGridRowDetail用作网格中的详细信息控件，而且还允许使用自定义控件。要显示自定义控件，您只需要确保它实现了IC1FlexGridRowDetail接口即可。例如，如果要使用C1Label，则可以从C1Label控件继承该控件并实现所需的接口成员。

为了更好地理解如何将任何自定义控件用作网格中的明细控件，让我们借助一个用户场景说明。

让我们考虑一个非政府组织（NGO）定期对各种全球指标进行全球调查，并积累了一个数据存储库。现在，该非政府组织希望展示这样一个界面向受众展示此数据。既可以查看所有指标信息，又可以使他们能够识别各个国家在这些指标上的具体情况。

没有单个控件可以表示这样的数据，但是具有行明细信息功能的FlexGrid可以。为了表示此数据，FlexGrid可以显示指标列表及其信息，而行明细信息中的图表可以显示数据趋势。当您在图表中显示信息时，更容易理解和解释信息。

因此，我们将尝试创建一个包含用于显示数据的FlexChart的自定义控件，并将该控件用作FlexGrid的明细行控件。

我们将功能实现分为以下几部分：

设置FlexGrid
设置FlexChart的数据
使用FlexChart创建自定义明细行控件
在FlexGrid中将FlexChart用作明细信息控件

设置FlexGrid

在项目中使用FlexGrid非常容易。只需将C1FlexGrid从VS工具箱拖放到Windows窗体上，这将添加对C1.Win.C1FlexGrid.RowDetails.4.5.2 dll的引用并创建FlexGrid的实例。

要显示指标信息列表，我们可以将任何数据源用于FlexGrid。为了演示，我们使用最常见的数据源DataTable，创建代码如下。

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

复制代码

现在，使用DataSource属性将网格绑定到DataTable

flexGrid.DataSource = dataTable;

复制代码

下图显示了完成此步骤后加载到网格中的数据：

设置FlexChart的数据

为了显示您可以多么轻松地将FlexChart用作自定义明细信息控件来可视化展示趋势，我们将使用世界银行发布的一些特色指标（例如“人口增长”，“甲烷排放”）等数据。对于这些指标，数据取自过去15年，即2003年至2018年。

为了在FlexChart中反映此数据，我们需要可将图表和数据进行绑定。为此创建以下几个类：

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; } }使用FlexChart创建自定义明细行控件

要创建包含FlexChart的自定义控件，您应该实现IC1FlexGridRowDetail接口。为此，创建一个UserControl，将C1FlexChart拖放到其上。另外，拖动一个下拉组合框以选择需要分析指标值的国家/地区。

下图显示了用户控件的外观：

现在，您需要设置FlexChart：可以通过重写界面中存在的方法“ Setup”来完成，该方法公开了需要显示的明细信息控件所对应的行索引。

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

复制代码

一旦知道需要显示其详细信息的指标，就可以开始如下所示来绑定图表：

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

复制代码

在FlexGrid中将FlexChart用作明细控件

要在FlexGrid中使用自定义创建的明细信息控件，只需定义委托方法并将其分配给RowDetailProvider属性，如下所示

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

复制代码

行明细控件可以帮助呈现较大的数据，以便在有限的空间中显示。此外，它允许将复杂的视图放置在行明细信息中，从而有助于降低视图的复杂性。我们相信这对你的项目是非常有帮助的。且易于使用。

欢迎大家尝试新功能。

		自动登录	找回密码
密码			立即注册

[WinForms] FlexGrid 行明细功能入门（Row Details）

本帖子中包含更多资源

0 个回复

SpreadJS 认证

SpreadJS 高级认证

讲师达人

悬赏达人