AddPanel method does not adhere to column or Row properties

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>

  1. Which method should be used?
  2. If it's the first method, how do i get the panels to show in the correct column and row?

1 Reply

SS Sharon Sanchez Selvaraj Syncfusion Team March 3, 2021 12:55 PM UTC

Hi HappyCamper, 

Thanks for contacting Syncfusion Support. 

We have already considered this as a bug from our end. The fix for this issue will be included in our first weekly patch release after Volume 1, 2021 release which is expected to be rolled out by the end of March 2021. 

Please track the below feedback link to know the status of this issue. 


Please get back to us if you need further assistance. 

Regards, 

Sharon Sanchez S. 
 


Loader.
Up arrow icon