JavaScript errors on Dashboard layout

[Michael Aston]

I getting javascript errors on the dashboard layout. They then cause position and dragging issues.

syncfusion-blazor.min.js:1 Maximum call stack size exceeded

RangeError: Maximum call stack size exceeded

    at t.e.saveChanges (http://localhost:65226/_content/Syncfusion.Blazor/scripts/syncfusion-blazor.min.js:1:97341)

    at t.row (http://localhost:65226/_content/Syncfusion.Blazor/scripts/syncfusion-blazor.min.js:1:86335)

    at http://localhost:65226/_content/Syncfusion.Blazor/scripts/syncfusion-blazor.min.js:1:14392

    at Array.forEach (<anonymous>)

    at s (http://localhost:65226/_content/Syncfusion.Blazor/scripts/syncfusion-blazor.min.js:1:14072)

    at d (http://localhost:65226/_content/Syncfusion.Blazor/scripts/syncfusion-blazor.min.js:1:14423)

    at http://localhost:65226/_content/Syncfusion.Blazor/scripts/syncfusion-blazor.min.js:1:14319

    at Array.forEach (<anonymous>)

    at s (http://localhost:65226/_content/Syncfusion.Blazor/scripts/syncfusion-blazor.min.js:1:14072)

    at d (http://localhost:65226/_content/Syncfusion.Blazor/scripts/syncfusion-blazor.min.js:1:14423)

throwError @ syncfusion-blazor.min.js:1

(anonymous) @ syncfusion-blazor.min.js:1

u @ syncfusion-blazor.min.js:1

(anonymous) @ syncfusion-blazor.min.js:1

(anonymous) @ syncfusion-blazor.min.js:1

r @ syncfusion-blazor.min.js:1

s @ syncfusion-blazor.min.js:1

(anonymous) @ syncfusion-blazor.min.js:1

(anonymous) @ syncfusion-blazor.min.js:1

(anonymous) @ syncfusion-blazor.min.js:1

(anonymous) @ blazor.server.js:1

beginInvokeJSFromDotNet @ blazor.server.js:1

(anonymous) @ blazor.server.js:1

e.invokeClientMethod @ blazor.server.js:1

e.processIncomingData @ blazor.server.js:1

connection.onreceive @ blazor.server.js:1

i.onmessage @ blazor.server.js:1

[Michael Aston]

Seems error is dependent on number/position of tiles. Attached are two images of dashboard layouts. One generates the errors the other does not.

Attachment: 160258_ea2dfd1d.zip

[Sowmiya Padmanaban]

Hi Michael Aston,  

 

Greetings from Syncfusion support. 

 

We have checked your reported problem with DashboardLayout component. We suspect that your reported issue occurred because you have set the column for a panel which exceeds the default columns property in the DashboardLayout component. 

 

For example: when you set columns property as 5 ( it splits the panels into 5*5  => 5rows and 5 columns). But when you add a panel in 6^th  row, so it causes your reported problem. 

 

Could you please check the above case in your application. 

 

For your reference, we have prepared a sample for DashboardLayout based on your shared screenshot. 

 

https://www.syncfusion.com/downloads/support/forum/160258/ze/DashboardLayout-612482154.zip 

 

Please, refer the below links for DashboardLayout component. 

 

UG Documentation-  https://blazor.syncfusion.com/documentation/dashboard-layout/getting-started/ 

 

Demo link- https://blazor.syncfusion.com/demos/dashboard-layout/default?theme=bootstrap4 

 

API reference- https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.SfFileManager.html 

 

If the issue still persist, could you please share the below details. 

 

1.     Share the defining code snippet for DashboardLayout component. 

2.     Share the issue replicating video footage. 

3.     If possible, replicate the issue in attached sample. 

 

This information help us to find the cause of your reported problem and to provide you the prompt solution. 

 

Please let us know, if you need any further assistance. 

 

Regards,  

Sowmiya.P 

[Michael Aston]

I have Columns set to10 and the tiles are not being created beyond this.

I can now reproduce the issue. It occurs when a new 2x2 tile is created that overlaps an existing 2x2 tile by 1row.

[Sowmiya Padmanaban]

Hi Michael Aston,  

 

We have tried to replicate your reported issue in DashboardLayout component. But, we were unable to replicate it. 

 

Based on your update, we have tried to paste the new panel in already existing DashboardLayout panel by 1 row. 

 

Please, refer the below code snippet. 

 

<SfButton Content="Add Panel" OnClick="click"></SfButton> 

<SfDashboardLayout @ref="dashboard" CellSpacing="@(new double[]{10 ,10 })" Columns="10" AllowResizing="true" AllowFloating="false"> 

    <DashboardLayoutEvents OnResizeStop="ResizeStop" Created="created"></DashboardLayoutEvents> 

    <DashboardLayoutPanels> 

        <DashboardLayoutPanel Row="0" Col="0" SizeX="2" SizeY="2"> 

            <HeaderTemplate><div>Circular Gauge</div></HeaderTemplate> 

            <ContentTemplate> 

            </ContentTemplate> 

        </DashboardLayoutPanel> 

    </DashboardLayoutPanels> 

</SfDashboardLayout> 

public void click() 

            { 

                this.dashboard.AddPanel(new PanelModel 

                { 

                    SizeX = 2, 

                    SizeY = 2, 

                    Row = 0, 

                    Col = 1, 

                    Content =@<div style="height:100%; width:100%;"> 

                        <SfChart Width="100%" Height="100%"> 

                            <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category"> 

                            </ChartPrimaryXAxis> 

 

                            <ChartSeriesCollection> 

                                <ChartSeries DataSource="@SalesReports" XName="X" YName="Y" 

                                             Type="ChartSeriesType.Radar" DrawType="ChartDrawType.Line"> 

                                </ChartSeries> 

                            </ChartSeriesCollection> 

                        </SfChart> 

                    </div>, 

                      Header = @<div>Header Content</div>, 

                    }); 

 

} 

 

Please, refer the attached sample link: 

 

https://www.syncfusion.com/downloads/support/forum/160258/ze/DashboardLayout1773704926.zip 

 

Could you please share the below details to identify the exact issue from your application. 

 

1.     Share the definition code of DashboardLayout component and addPanel method. 

2.     If possible, replicate the issue in attached sample. 

3.     Share us the more details regarding your reported problem ( code you have rendered for new panel). 

4.     Share the Syncfusion.Blazor version you have used in your application. 

 

Please let us know, if you need any further assistance. 

 

Regards,  

Sowmiya.P