I am dynamically adding panels to a dashboard based on a configurable layout that the user wants for a dashboard layout. When the page loads, the panels are added so that the dashboard is rendered. I've tried 2 approaches, loading the panels with AddPanel in code behind, and looping through a foreach in the markup to add the panels on render.
When using code behind, the panel content renders correctly, however all the panels are added in column 0 row 0, and does not take into account the row and column that is specified:
<SfDashboardLayout ID="default_dashboard"
@ref="dashboardObject"
AllowFloating="true"
Columns="10"
CellSpacing="@(new double[]{10 ,10})"
AllowResizing="@EditMode"
AllowDragging="@EditMode">
<DashboardLayoutEvents Changed="layoutChanged" Created="layoutChanged"/>
<DashboardLayoutPanels>
<DashboardLayoutPanel/>
</DashboardLayoutPanels>
</SfDashboardLayout>
@{
private async Task LoadDashboard(Guid? Id)
{
try
{
try
{
if (IsdbSelectorOpen)
{
dbSelector.Toggle();
}
}
catch (Exception)
{ }
if (DashboardId.HasValue)
{
var Dashboard = Data.Where(x => x.Id == Id.Value.ToString()).FirstOrDefault();
if (Dashboard != null)
{
DashboardName = Dashboard.Name;
DashboardCategory = Dashboard.Type;
}
currentDashboard = Dashboard;
if (dashboardObject != null)
{
List<PanelModel> panels = await this.dashboardObject.Serialize();
if (panels.Count > 0)
{
await dashboardObject.RemoveAllAsync();
}
}
if (Dashboard.Widgets != null)
{
foreach (var d in Dashboard.Widgets.OrderBy(x => x.Row).ThenBy(x => x.Column))
{
await AddPanel(d);
}
}
StateHasChanged();
}
}
catch (Exception ex)
{
}
}
private async Task AddPanel(Models.DashboardWidget dashboardWidget)
{
PanelModel panel = new PanelModel();
panel.Id = Guid.NewGuid().ToString() + "_layout";
panel.SizeX = dashboardWidget.SizeX;
panel.SizeY = dashboardWidget.SizeY;
panel.Column = dashboardWidget.Column;
panel.Row = dashboardWidget.Row;
switch (dashboardWidget.WidgetName)
{
case "DWG_ActiveCustomers":
panel.Content =@<DWG_ActiveCustomers DateFilterCode="@selectedDateRangeCode" CompanyId="CompanyId" />;
break;
case "DWG_GRF_Cashflow":
panel.Content =@<DWG_GRF_Cashflow DateFilterCode="@selectedDateRangeCode" CompanyId="CompanyId" />;
break;
default:
break;
}
await dashboardObject.AddPanel(panel);
}
}
When using a foreach loop, the panels are in the correct column and row, but the content isn't loaded (which is in its on razor components). Also, can't do my switch within the contenttemplate because of the bug identified in a previous post, this would be changed once you release support in your april release:
<SfDashboardLayout ID="default_dashboard"
@ref="dashboardObject"
AllowFloating="true"
Columns="10"
CellSpacing="@(new double[]{10 ,10})"
AllowResizing="@EditMode"
AllowDragging="@EditMode">
<DashboardLayoutEvents Changed="layoutChanged" Created="layoutChanged"/>
<DashboardLayoutPanels>
@if (currentDashboard != null && currentDashboard.Widgets != null)
{
foreach (var widget in currentDashboard.Widgets.OrderBy(x => x.Row).ThenBy(x => x.Column))
{
switch (widget.WidgetName)
{
case "DWG_ActiveCustomers":
<DashboardLayoutPanel Id="@Guid.NewGuid().ToString()" Column="@widget.Column" Row="@widget.Row" SizeX="@widget.SizeX" SizeY="@widget.SizeY">
<ContentTemplate>
<DWG_ActiveCustomers DateFilterCode="@selectedDateRangeCode" CompanyId="@CompanyId" />
</ContentTemplate>
</DashboardLayoutPanel>
break;
case "DWG_GRF_Cashflow":
<DashboardLayoutPanel Id="@Guid.NewGuid().ToString()" Column="@widget.Column" Row="@widget.Row" SizeX="@widget.SizeX" SizeY="@widget.SizeY">
<ContentTemplate>
<DWG_GRF_Cashflow DateFilterCode="@selectedDateRangeCode" CompanyId="@CompanyId" />
</ContentTemplate>
</DashboardLayoutPanel>
break;
default:
break;
}
}
}
<DashboardLayoutPanel/>
</DashboardLayoutPanels>
</SfDashboardLayout>
- Which method should be used?
- If it's the first method, how do i get the panels to show in the correct column and row?