This is my complete code for better understanding the problem:
This is my PageIndex.razor:
@page "/"
@using System.Text.Json
@inherits ComponentBaseView<ViewModelIndex>
@using Syncfusion.Blazor.Grids
<div @attributes="Attributes">
<ControlScroller>
<ControlContent Heading="Dashboard">
<SfButton @onclick='(() => AddPanel(PanelName))' Content="AddPanel"></SfButton>
<SfButton @onclick='(() => AddPanel(PieName))' Content="Add Piechart"></SfButton>
<SfButton @onclick='(() => AddPanel(LineName))' Content="Add Linechart"></SfButton>
<SfDashboardLayout Columns="3" CellSpacing="@(new double[]{10 ,10 })" CellAspectRatio="2" @ref="dashboard" AllowResizing="true">
<DashboardLayoutPanels>
<DashboardLayoutPanel Column="0" Row="0" SizeX="2">
<HeaderTemplate>
<div>Chart</div>
</HeaderTemplate>
<ContentTemplate>
<SfChart Title="Beispielchart">
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis>
<ChartSeriesCollection>
<ChartSeries DataSource="@ChartData" XName="Category" YName="Value" Type="Syncfusion.Blazor.Charts.ChartSeriesType.Line"></ChartSeries>
</ChartSeriesCollection>
</SfChart>
</ContentTemplate>
</DashboardLayoutPanel>
</DashboardLayoutPanels>
</SfDashboardLayout>
<SfButton OnClick="DashboardSerialize">Serialize</SfButton>
<SfButton OnClick="DashboardDeserialize">Deserialize</SfButton>
<p>@panelSerialize</p>
</ControlContent>
</ControlScroller>
</div>
@code {
/// <summary>
/// Fügt ein neues Panel hinzu.
/// </summary>
/// <param name="name">Der Name des neuen Panels.</param>
public async Task AddPanel(string name)
{
string panelId = name + "_" + idCount;
await this.dashboard.AddPanelAsync(new PanelModel
{
Id = panelId,
Row = AmountRows - 1,
Column = amountColumns - 1,
MinSizeX = 1,
MaxSizeX = 2,
MinSizeY = 1,
MaxSizeY = 2,
Content = GetContent(name),
Header = GetHeader(panelId, name)
});
idCount++;
await this.dashboard.RefreshAsync();
}
protected RenderFragment GetContent(string name)
{
switch (name)
{
case PanelName:
return @<div class="full-size">@name</div>;
case LineName:
return @<div class="full-size">
<SfChart Title="Beispielchart">
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis>
<ChartSeriesCollection>
<ChartSeries DataSource="@ChartData" XName="Category" YName="Value" Type="Syncfusion.Blazor.Charts.ChartSeriesType.Line"></ChartSeries>
</ChartSeriesCollection>
</SfChart>
</div>;
case PieName:
return @<div class="full-size">
<SfAccumulationChart Title="Example Statistics">
<AccumulationChartSeriesCollection>
<AccumulationChartSeries DataSource="@ChartData" XName="Category" YName="Value" Name="Category" InnerRadius="40%"></AccumulationChartSeries>
</AccumulationChartSeriesCollection>
<AccumulationChartLegendSettings Visible="true"></AccumulationChartLegendSettings>
</SfAccumulationChart>
</div>
;
default:
return @<div class="full-size">@name</div>;
}
}
protected RenderFragment GetHeader(string id, string name)
{
return @<div>
<span>@name</span>
<button class="deleteBTN" @onclick="(() => RemovePanel(id))">Delete</button>
</div>;
}
/// <summary>
/// Deserialisiert das Dashboard.
/// </summary>
public async Task DashboardDeserialize()
{
await dashboard.RemoveAllAsync();
var panels = JsonSerializer.Deserialize<List<PanelModel>>(standardDashboard);
if (panels != null)
{
foreach (var panel in panels)
{
string name = panel.Id.Split('_').First();
string panelId = name + "_" + idCount;
await this.dashboard.AddPanelAsync(new PanelModel
{
Id = panelId,
Row = panel.Row,
Column = panel.Column,
SizeX = panel.SizeX,
SizeY = panel.SizeY,
Content = GetContent(name),
Header = GetHeader(panelId, name)
});
idCount++;
}
}
await this.dashboard.RefreshAsync();
}
}
This is my PageIndex.razor.cs:
protected List<ChartDataModel> ChartData { get; set; } = new List<ChartDataModel>();
/// <summary>
/// Datenmodell für Chart-Daten.
/// </summary>
protected class ChartDataModel
{
/// <summary>
/// Kategorie der Daten.
/// </summary>
public string Category { get; set; } = string.Empty;
/// <summary>
/// Wert der Daten.
/// </summary>
public double Value { get; set; }
}
/// <inheritdoc/>
protected override void OnInitialized()
{
ViewModel = new ViewModelIndex();
base.OnInitialized();
ChartData = new List<ChartDataModel>
{
new ChartDataModel { Category = "Jan", Value = 15 },
new ChartDataModel { Category = "Feb", Value = 20 },
new ChartDataModel { Category = "Mär", Value = 25 },
new ChartDataModel { Category = "Apr", Value = 30 },
new ChartDataModel { Category = "Mai", Value = 0 },
new ChartDataModel { Category = "Jun", Value = 24 },
new ChartDataModel { Category = "Jul", Value = 28 },
new ChartDataModel { Category = "Aug", Value = 60 },
new ChartDataModel { Category = "Sep", Value = 19 },
new ChartDataModel { Category = "Okt", Value = 14 },
new ChartDataModel { Category = "Nov", Value = 40 },
new ChartDataModel { Category = "Dez", Value = 10 }
};
}
private const string PanelName = "Panel";
private const string PieName = "Donutdiagramm";
private const string LineName = "Liniendiagramm";
private const int AmountRows = 2;
private const int amountColumns = 3;
SfDashboardLayout dashboard;
string panelSerialize;
private static int idCount = 0;
string standardDashboard = "[{\"AllowDragging\":true,\"Column\":2,\"CssClass\":null,\"Enabled\":true,\"Id\":\"panel_0\",\"MaxSizeX\":2,\"MaxSizeY\":2,\"MinSizeX\":1,\"MinSizeY\":1,\"Row\":0,\"SizeX\":1,\"SizeY\":1,\"ZIndex\":1000},{\"AllowDragging\":true,\"Column\":1,\"CssClass\":null,\"Enabled\":true,\"Id\":\"pie_1\",\"MaxSizeX\":2,\"MaxSizeY\":2,\"MinSizeX\":1,\"MinSizeY\":1,\"Row\":0,\"SizeX\":1,\"SizeY\":1,\"ZIndex\":1000},{\"AllowDragging\":true,\"Column\":0,\"CssClass\":null,\"Enabled\":true,\"Id\":\"line_2\",\"MaxSizeX\":2,\"MaxSizeY\":2,\"MinSizeX\":1,\"MinSizeY\":1,\"Row\":0,\"SizeX\":1,\"SizeY\":1,\"ZIndex\":1000}, {\"AllowDragging\":true,\"Column\":2,\"CssClass\":null,\"Enabled\":true,\"Id\":\"menu_0\",\"MaxSizeX\":2,\"MaxSizeY\":2,\"MinSizeX\":1,\"MinSizeY\":1,\"Row\":0,\"SizeX\":1,\"SizeY\":1,\"ZIndex\":1000}]";
/// <summary>
/// Serialisiert das Dashboard.
/// </summary>
protected async void DashboardSerialize()
{
panelSerialize = string.Empty;
panelSerialize = JsonSerializer.Serialize(await dashboard.Serialize());
}
/// <summary>
/// Entfernt ein Panel.
/// </summary>
/// <param name="panelId">Die ID des zu entfernenden Panels.</param>
protected async Task RemovePanel(string panelId)
{
await dashboard.RemovePanelAsync(panelId);
await this.dashboard.RefreshAsync();
}
Your solution does not seem to work for my code. Please update us if there is an posibility to solve this issue.
