Unwire pivotgrid from chartcontrol | WinForms | PivotGridControl

Travis Chambers · 2018-06-01T18:44:07.7270000+00:00

Hi,After wiring a pivot grid to a chart (helper.WireGrid(this.pivotGridControl1, this.chartControl1), is it then possible to unwire the chart and keep its current data intact?Thanks.

DK Dineshraj Kumar Syncfusion Team June 4, 2018 01:14 PM UTC

Hi Travis,

Currently we have provided the support only to wire the PivotGrid control to a chart based on the selected ranges in PivotGrid. Once the cell values are selected in PivotGrid control, they will be rendered in a chart control at runtime. As cell selection is changed dynamically, it is not feasible to unwire the chart from the PivotGrid control.

Regards,

Dineshraj K.

TC Travis Chambers June 5, 2018 01:56 PM UTC

Thank you for your feedback! That is a bit disappointing to hear but I have come up with sort of a workaround. That being said, each time you select a range and it is wired to a chart the chart reverts back to the default styling. Is there any way to persist the chart's visual styles so that the wiring of the grid does not change them?

Thanks!

TC Travis Chambers June 5, 2018 05:10 PM UTC

Also, is it possible to wire the pivotGridControl to a regular gridControl as well? If not, is there a recommended way to get the selected range PLUS the corresponding headers into a datatable (or other method) to then load a gridControl?

Thanks!

SR Sabaridass Ramamoorthy Syncfusion Team June 6, 2018 01:04 PM UTC

Hi Travis,

Please find our response below.

Query

Response

That being said, each time you select a range and it is wired to a chart the chart reverts back to the default styling. Is there any way to persist the chart's visual styles so that the wiring of the grid does not change them?

We have provided the workaround to achieve your requirement – “Prevent updating the chart values once the grid was unwired” in application level. We have maintained the chart values based on the old selected ranges if the grid was unwired.

Please refer to the code example below.

#Form1.cs

public partial class Form1 : MetroForm

{

GridRangeInfo currentRange = new GridRangeInfo();

PivotGridChartHelper helper;

bool unWireGrid = false;

#region Constructor

public Form1()

{

InitializeComponent();

GridSetting();

}

#endregion

#region Pivot Grid Settings

private void GridSetting()

{

// Adding ItemSource to the Control

this.pivotGridControl1.ItemSource = ProductSales.GetSalesData();

// Adding PivotRows to the Control

this.pivotGridControl1.PivotRows.Add(new PivotItem { FieldMappingName = "Product", TotalHeader = "Total" });

this.pivotGridControl1.PivotRows.Add(new PivotItem { FieldMappingName = "Date", TotalHeader = "Total" });

// Adding PivotColumns to the Control

this.pivotGridControl1.PivotColumns.Add(new PivotItem { FieldMappingName = "Country", TotalHeader = "Total" });

this.pivotGridControl1.PivotColumns.Add(new PivotItem { FieldMappingName = "State", TotalHeader = "Total" });

// Adding PivotCalculations to the Control

this.pivotGridControl1.PivotCalculations.Add(new PivotComputationInfo { FieldName = "Quantity", Format = "#,##0" });

this.pivotGridControl1.TableModel.Options.AllowSelection = GridSelectionFlags.Any;

this.chartControl1.Text = "ProductSales";

//PivotChartHelper class acts as an interface to bind the datafrom grid to chart.

helper = new PivotGridChartHelper();

helper.WireGrid(this.pivotGridControl1, this.chartControl1);

this.pivotGridControl1.TableModel.SelectionChanged += TableModel_SelectionChanged;

//Appearance of the Chart Control.

ChartAppearance.ApplyChartStyles(this.chartControl1);

this.chartControl1.Series[0].PrepareStyle += new ChartPrepareStyleInfoHandler(Form1_PrepareStyle);

//PivotGrid control selection customization

GridRangeInfo selRange = GridRangeInfo.Cells(4, 4, 5, 5);

this.pivotGridControl1.TableModel.Selections.Add(selRange);

GridSelectionChangedEventArgs e = new GridSelectionChangedEventArgs(selRange, null, GridSelectionReason.MouseUp);

this.pivotGridControl1.TableModel.RaiseSelectionChanged(e);

}

#endregion

#region Event Handlers

private void CheckBox1_Click(object sender, System.EventArgs e)

{

unWireGrid = checkBox1.Checked;

if (unWireGrid)

currentRange = this.pivotGridControl1.TableModel.SelectedRanges.ActiveRange;

}

private void TableModel_SelectionChanged(object sender, GridSelectionChangedEventArgs e)

{

if (e.Reason == GridSelectionReason.MouseUp && this.pivotGridControl1.TableModel.SelectedRanges != null && currentRange != null && !currentRange.IsEmpty && unWireGrid)

{

helper.BindSelectedRange(currentRange);

}

if (!unWireGrid && e.Reason == GridSelectionReason.MouseUp)

this.sfDataGrid1.DataSource = GetItemsSource();

}

private object GetItemsSource()

{

List<object> itemsSource = new List<object>();

var range = this.pivotGridControl1.TableModel.SelectedRanges.ActiveRange;

if (range == null || range.IsEmpty)

return null;

for (int i = range.Top; i <= range.Bottom; i++)

{

for(int j = range.Left; j <= range.Right; j++)

{

this.pivotGridControl1.PivotEngine.GetRawItemsForEach(i, j).ForEach(x => itemsSource.Add(x));

}

return itemsSource;

}

Also, is it possible to wire the pivotGridControl to a regular gridControl as well? If not, is there a recommended way to get the selected range PLUS the corresponding headers into a datatable (or other method) to then load a gridControl?

Currently we don’t have any existing way to wire the PivotGrid control into basic grid control. Hence we have provided the work around to wire the PivotGrid control into SfDataGrid control. In this solution we have found the raw items from the selected ranges and then provided them to the ItemsSource of SfDataGrid.

Please refer to the code example below.

#Form1.cs

public partial class Form1 : MetroForm

{

GridRangeInfo currentRange = new GridRangeInfo();

PivotGridChartHelper helper;

bool unWireGrid = false;

#region Constructor

public Form1()

{

InitializeComponent();

GridSetting();

}

#endregion

#region Pivot Grid Settings

private void GridSetting()

{

// Adding ItemSource to the Control

this.pivotGridControl1.ItemSource = ProductSales.GetSalesData();

// Adding PivotRows to the Control

this.pivotGridControl1.PivotRows.Add(new PivotItem { FieldMappingName = "Product", TotalHeader = "Total" });

this.pivotGridControl1.PivotRows.Add(new PivotItem { FieldMappingName = "Date", TotalHeader = "Total" });

// Adding PivotColumns to the Control

this.pivotGridControl1.PivotColumns.Add(new PivotItem { FieldMappingName = "Country", TotalHeader = "Total" });

this.pivotGridControl1.PivotColumns.Add(new PivotItem { FieldMappingName = "State", TotalHeader = "Total" });

// Adding PivotCalculations to the Control

this.pivotGridControl1.PivotCalculations.Add(new PivotComputationInfo { FieldName = "Quantity", Format = "#,##0" });

this.pivotGridControl1.TableModel.Options.AllowSelection = GridSelectionFlags.Any;

this.chartControl1.Text = "ProductSales";

//PivotChartHelper class acts as an interface to bind the datafrom grid to chart.

helper = new PivotGridChartHelper();

helper.WireGrid(this.pivotGridControl1, this.chartControl1);

this.pivotGridControl1.TableModel.SelectionChanged += TableModel_SelectionChanged;

//Appearance of the Chart Control.

ChartAppearance.ApplyChartStyles(this.chartControl1);

this.chartControl1.Series[0].PrepareStyle += new ChartPrepareStyleInfoHandler(Form1_PrepareStyle);

//PivotGrid control selection customization

GridRangeInfo selRange = GridRangeInfo.Cells(4, 4, 5, 5);

this.pivotGridControl1.TableModel.Selections.Add(selRange);

GridSelectionChangedEventArgs e = new GridSelectionChangedEventArgs(selRange, null, GridSelectionReason.MouseUp);

this.pivotGridControl1.TableModel.RaiseSelectionChanged(e);

}

#endregion

#region Event Handlers

private void CheckBox1_Click(object sender, System.EventArgs e)

{

unWireGrid = checkBox1.Checked;

if (unWireGrid)

currentRange = this.pivotGridControl1.TableModel.SelectedRanges.ActiveRange;

}

private void TableModel_SelectionChanged(object sender, GridSelectionChangedEventArgs e)

{

if (e.Reason == GridSelectionReason.MouseUp && this.pivotGridControl1.TableModel.SelectedRanges != null && currentRange != null && !currentRange.IsEmpty && unWireGrid)

{

helper.BindSelectedRange(currentRange);

}

if (!unWireGrid && e.Reason == GridSelectionReason.MouseUp)

this.sfDataGrid1.DataSource = GetItemsSource();

}

private object GetItemsSource()

{

List<object> itemsSource = new List<object>();

var range = this.pivotGridControl1.TableModel.SelectedRanges.ActiveRange;

if (range == null || range.IsEmpty)

return null;

for (int i = range.Top; i <= range.Bottom; i++)

{

for(int j = range.Left; j <= range.Right; j++)

{

this.pivotGridControl1.PivotEngine.GetRawItemsForEach(i, j).ForEach(x => itemsSource.Add(x));

}

return itemsSource;

}

#Form1.Designer.cs

private void InitializeComponent()

{

//

// chartControl1

//

this.chartControl1.Anchor = ((System.Windows.Forms.AnchorStyles)((((System.Windows.Forms.AnchorStyles.Top | System.Windows.Forms.AnchorStyles.Bottom)

| System.Windows.Forms.AnchorStyles.Left)

| System.Windows.Forms.AnchorStyles.Right)));

this.chartControl1.ChartArea.BorderColor = System.Drawing.Color.Transparent;

this.chartControl1.ChartArea.CursorLocation = new System.Drawing.Point(0, 0);

this.chartControl1.ChartArea.CursorReDraw = false;

this.chartControl1.ChartInterior = new Syncfusion.Drawing.BrushInfo(Syncfusion.Drawing.GradientStyle.Vertical, System.Drawing.Color.White, System.Drawing.Color.White);

this.chartControl1.Font = new System.Drawing.Font("Microsoft Sans Serif", 8.25F);

this.chartControl1.IsWindowLess = false;

//

this.chartControl1.Legend.Location = new System.Drawing.Point(299, 81);

this.chartControl1.Legend.Margin = new System.Windows.Forms.Padding(0);

this.chartControl1.Localize = null;

this.chartControl1.Location = new System.Drawing.Point(2, 0);

this.chartControl1.Margin = new System.Windows.Forms.Padding(0);

this.chartControl1.Name = "chartControl1";

this.chartControl1.Palette = Syncfusion.Windows.Forms.Chart.ChartColorPalette.Metro;

this.chartControl1.PrimaryXAxis.GridLineType.ForeColor = System.Drawing.Color.LightGray;

this.chartControl1.PrimaryXAxis.LogLabelsDisplayMode = Syncfusion.Windows.Forms.Chart.LogLabelsDisplayMode.Default;

this.chartControl1.PrimaryXAxis.Margin = true;

this.chartControl1.PrimaryXAxis.TitleFont = new System.Drawing.Font("Segoe UI", 14F);

this.chartControl1.PrimaryYAxis.GridLineType.ForeColor = System.Drawing.Color.LightGray;

this.chartControl1.PrimaryYAxis.LogLabelsDisplayMode = Syncfusion.Windows.Forms.Chart.LogLabelsDisplayMode.Default;

this.chartControl1.PrimaryYAxis.Margin = true;

this.chartControl1.PrimaryYAxis.TitleFont = new System.Drawing.Font("Segoe UI", 14F);

this.chartControl1.Size = new System.Drawing.Size(408, 300);

this.chartControl1.Skins = Syncfusion.Windows.Forms.Chart.Skins.Metro;

this.chartControl1.Style3D = true;

this.chartControl1.TabIndex = 1;

this.chartControl1.Text = "chartControl1";

//

this.chartControl1.Title.Font = new System.Drawing.Font("Segoe UI", 16F);

this.chartControl1.Title.Name = "Default";

this.chartControl1.Titles.Add(this.chartControl1.Title);

//

// splitContainer1

//

this.splitContainer1.Anchor = ((System.Windows.Forms.AnchorStyles)((((System.Windows.Forms.AnchorStyles.Top | System.Windows.Forms.AnchorStyles.Bottom)

| System.Windows.Forms.AnchorStyles.Left)

| System.Windows.Forms.AnchorStyles.Right)));

this.splitContainer1.BackColor = System.Drawing.Color.White;

this.splitContainer1.Location = new System.Drawing.Point(0, 0);

this.splitContainer1.Margin = new System.Windows.Forms.Padding(0);

this.splitContainer1.Name = "splitContainer1";

//

// splitContainer1.Panel1

//

this.splitContainer1.Panel1.Controls.Add(this.pivotGridControl1);

//

// splitContainer1.Panel2

//

this.splitContainer1.Panel2.Controls.Add(this.chartControl1);

this.splitContainer1.Size = new System.Drawing.Size(1000, 300);

this.splitContainer1.SplitterDistance = 500;

this.splitContainer1.SplitterWidth = 3;

this.splitContainer1.TabIndex = 2;

//

// panel1

//

this.panel1.Anchor = ((System.Windows.Forms.AnchorStyles)((((System.Windows.Forms.AnchorStyles.Top | System.Windows.Forms.AnchorStyles.Bottom)

| System.Windows.Forms.AnchorStyles.Left)

| System.Windows.Forms.AnchorStyles.Right)));

this.panel1.BackColor = System.Drawing.Color.White;

this.panel1.Controls.Add(this.splitContainer1);

this.panel1.Location = new System.Drawing.Point(0, 5);

this.panel1.Margin = new System.Windows.Forms.Padding(0);

this.panel1.Name = "panel1";

this.panel1.Size = new System.Drawing.Size(997, 309);

this.panel1.TabIndex = 3;

//

// panel3

//

this.panel3.Controls.Add(this.checkBox1);

this.panel3.Controls.Add(this.sfDataGrid1);

this.panel3.Dock = System.Windows.Forms.DockStyle.Bottom;

this.panel3.Location = new System.Drawing.Point(0, 317);

this.panel3.Name = "panel3";

this.panel3.Size = new System.Drawing.Size(912, 198);

this.panel3.TabIndex = 5;

//

// checkBox1

//

this.checkBox1.AutoSize = true;

this.checkBox1.Dock = System.Windows.Forms.DockStyle.Right;

this.checkBox1.Location = new System.Drawing.Point(804, 0);

this.checkBox1.Name = "checkBox1";

this.checkBox1.Size = new System.Drawing.Size(108, 198);

this.checkBox1.TabIndex = 1;

this.checkBox1.Text = "Unwire Pivot Grid";

this.checkBox1.UseVisualStyleBackColor = true;

this.checkBox1.Click += CheckBox1_Click;

//

// sfDataGrid1

//

this.sfDataGrid1.AccessibleName = "Table";

this.sfDataGrid1.Anchor = ((System.Windows.Forms.AnchorStyles)((((System.Windows.Forms.AnchorStyles.Top | System.Windows.Forms.AnchorStyles.Bottom)

| System.Windows.Forms.AnchorStyles.Left)

| System.Windows.Forms.AnchorStyles.Right)));

this.sfDataGrid1.Location = new System.Drawing.Point(0, 0);

this.sfDataGrid1.Name = "sfDataGrid1";

this.sfDataGrid1.Size = new System.Drawing.Size(790, 198);

this.sfDataGrid1.TabIndex = 0;

this.sfDataGrid1.Text = "sfDataGrid1";

//

// Form1

//

this.AutoScaleDimensions = new System.Drawing.SizeF(6F, 13F);

this.AutoScaleMode = System.Windows.Forms.AutoScaleMode.Font;

this.BorderColor = System.Drawing.Color.FromArgb(((int)(((byte)(27)))), ((int)(((byte)(161)))), ((int)(((byte)(226)))));

this.CaptionAlign = System.Windows.Forms.HorizontalAlignment.Left;

this.CaptionBarColor = System.Drawing.Color.FromArgb(((int)(((byte)(27)))), ((int)(((byte)(161)))), ((int)(((byte)(226)))));

this.CaptionBarHeight = 50;

this.CaptionButtonColor = System.Drawing.Color.White;

this.CaptionButtonHoverColor = System.Drawing.Color.White;

this.CaptionFont = new System.Drawing.Font("Segoe UI Semibold", 20F, System.Drawing.FontStyle.Bold, System.Drawing.GraphicsUnit.Point, ((byte)(0)));

this.CaptionForeColor = System.Drawing.Color.White;

this.ClientSize = new System.Drawing.Size(912, 515);

this.Controls.Add(this.panel3);

this.Controls.Add(this.panel1);

this.Icon = ((System.Drawing.Icon)(resources.GetObject("$this.Icon")));

this.Margin = new System.Windows.Forms.Padding(0);

this.MetroColor = System.Drawing.Color.Transparent;

this.MinimumSize = new System.Drawing.Size(915, 486);

this.Name = "Form1";

this.StartPosition = System.Windows.Forms.FormStartPosition.CenterScreen;

this.Text = "Pivotal Chart";

this.splitContainer1.Panel1.ResumeLayout(false);

this.splitContainer1.Panel2.ResumeLayout(false);

((System.ComponentModel.ISupportInitialize)(this.splitContainer1)).EndInit();

this.splitContainer1.ResumeLayout(false);

this.panel1.ResumeLayout(false);

this.panel3.ResumeLayout(false);

this.panel3.PerformLayout();

((System.ComponentModel.ISupportInitialize)(this.sfDataGrid1)).EndInit();

this.ResumeLayout(false);

}

Please find our working sample from the following location:

http://www.syncfusion.com/downloads/support/forum/137905/ze/CS-645107734

Regards,

Sabaridass R

TC Travis Chambers June 7, 2018 05:28 PM UTC

Thank you for your response. I haven't yet tried the response for the 2nd query, however the first response doesn't match the first query. I don't need a work around to unwiring the charts from the grid as I already came up with a work around for that.

The issue is with visual styles. While certain visual styles (i.e. default skins and color pallets) will persist fine when the chart is wired, others (namely the individual series colors and types) do not persist.

For example, if I wire a chart to a pivot grid and I right click on the first series colored symbol in the legend and use the context menu to change the color and then also change it to the type of Scatter so that I have a combo chart with two series (scatter and column) the next time I drag a new range the scatter reverts back to column and the series colors revert back to purple and green. Even deserializing the chart when saved as a combo chart does not change the series chart types like it should as if wiring the chart is only compatible with columns.

Ultimately, I need the wiring of the chart to not reset any visual styles / properties of the chart.

TC Travis Chambers June 8, 2018 08:24 PM UTC

I think it may be simplest to load the selected range directly to the chart via a button click, so that visual styles are not impacted, only the data. What is the best way to bind the chartcontrol with the selected range in code?

I tried to convert the selected range to a datatable and then attach the datatable to the chart but I've run into several problems, especially with the column and row indexes of the selected range being dynamic numbers which throws off the loops.

Thanks.

JB John Bowlin Bosco Kasiraman Syncfusion Team June 14, 2018 11:57 AM UTC

Hi Travis,

We have validated your query, and we are considering this as an improvement “Support to persist the chart types and chart series while selecting the cells in pivotgrid” in our control. Meanwhile a support incident has been created under your account and we request you to login into our Direct Trac system for further updates on this improvement. Our Direct Trac support system can be accessed from the following link:

https://www.syncfusion.com/account/login?ReturnUrl=%2fsupport%2fdirecttrac%2fincidents

Regards,

Pauline Bosco K