DashboardLayout will crash, when remove a panel

[wills]

Hi ,

https://stackblitz.com/edit/angular-pq4ebt?file=app.component.html

1.  click [Add Panel] to Add six panel

2. remove 4 and 6

3. Add 7 and 8

4. when remove 7 , the control will be crash

I view the code:

this.panelCollection 's control index is different from this.panels

[Shalini Maragathavel]

Hi Wills,  

Greetings from Syncfusion support.

We checked your reported issue in the shared sample and noticed that the reported issue occurs due to the customization handled with calcIndex method while adding panels with the below code, 

private calcIndex() { 

    if (this.dashboard.panels.length > 0) { 

      let SortCompare2 = function( 

        field1: string, 

        field2: string, 

        Ascending: boolean = true 

      ) { 

        return function(a, b) { 

          if (Ascending) { 

            if (a[field1] > b[field1]) { 

              return 1; 

            } else if (a[field1] < b[field1]) { 

              return -1; 

            } else { 

              if (a[field2] > b[field2]) { 

                return 1; 

              } else { 

                return -1; 

              } 

            } 

          }  

 
The default functionality of add or remove panels is working fine at our end and for reference you can check this in our below demo link,

Demo: https://ej2.syncfusion.com/angular/demos/#/material/dashboard-layout/default

We have commented the particular code which cause the issue in the provided sample for your reference. Please modify this condition based on your use case scenario to resolve the reported error.

Sample: https://stackblitz.com/edit/angular-pq4ebt-g9lakh?file=app.component.ts 

Please get back to us if you need further assistance.  

Regards,  

Shalini M. 

[wills]

Hi  Shalini,

What I want to fulfil is:

When the user clicks “New”, the new Panel will fill in spare space, therefore, it is required to calculate the position of the last record.

However, in case of some records were deleted, and then to add a new Panel and delete, it has the error encountered.

[wills]

Hi  Shalini,

The [Iwant.gif] is what I want.

The [wrong.gif] is the demo that you sent to me, which doesn't result the effects I need.

Attachment: Desktop_602ae382.zip

[Sharon Sanchez Selvaraj]

  

Hi Wills, 

 

We are currently validating the scenario with your provided details. We will update you further details within three business days on June 24^th  2021. 

 

Regards, 

 

Sharon Sanchez S. 

 

[Sharon Sanchez Selvaraj]

Hi Wills, 

 

Sorry for the inconvenience. 

 

On further analysis of your reported issue(“Console error is thrown when removing the panel”), we have considered it as a bug from our end. The fix for this issue will be included in our Volume 2 SP1 release, which is expected to be rolled out by the end of July, 2021. 

 

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

 

https://www.syncfusion.com/feedback/26446/remove-panel-method-throws-an-error-when-dynamically-customizing-the-panel 

 

We appreciate your patience. 

 

Regards, 

 

Sharon Sanchez S. 

[Sharon Sanchez Selvaraj]

Hi Wills, 

 

Sorry for the inconvenience. 

On further validation with the provided details, when directly sorting the dashboard panel, the reported issue occurs. In order to overcome this, we can serialize the dashboard panels using serialize method and assign it to a private variable and then sort it.  

  

  

this._pan = this.dashboard.serialize(); 

for (let panel of this._pan.sort(SortCompare2('row', 'col'))) { 

        if (rowIndex < panel.row) { 

 

  

Please find the updated sample below for reference: 

  

https://stackblitz.com/edit/angular-pq4ebt-dvdepj?file=app.component.ts 

 

Please get back to us if you need any further assistance. 

 

Regards, 

 

Sharon Sanchez S.