panel id is not consistent

[RakhiS]

Hi, sharing screen shot.

1. When I am adding panel through "Add Panel" button , and after that I called dashboard.serialize method on the "save state" button, in that case I am getting integer id which I am saving in save method and store in db, here is my save method:

this._DashboardService.getComponentDescription("select ISNULL(MAX(PanelId),0) as panelid from DashboardDetails") //servicecall in which i am retriving the max id of the data let say I am getting 36. so next panel which I am saving will be saved with id = 37

      .subscribe(

        data => {

          let x1 = data + 1; // id = 37

          let panel: PanelModel[] = [{

            'id': x1.toString(), 'sizeX': 1, 'sizeY': 1, 'row': 0, 'col': 0,

            content:

              '<div style="text-align: right;" id="myDiv"><a class="classAdd"><img src="./assets/flex-images/outline_settings_black_24dp.png" alt=' + x1.toString() + ' title="Update Component"></a><a class="classDel"><img src="./assets/flex-images/Delete_1.png" alt=' + x1.toString() +' title="Delete Component"></a></div>'

          }]; //I have created the panel model with id appended

          this.dashboard.addPanel(panel[0]);  //panel is getting added into layout from front end.

          this.dashboarddetails.id = data+1

         this.PostPanelInfo(this.dashboardDetails) //this is my method which is saving details in db

});

now when I do dashboard.serialize, i am getting int id 

but now when i refresh page, and do dashboard.serialize 

I am getting id as string value.

I want the integer id only. 

please help, my work got stucked because of this. 

[Sharon Sanchez Selvaraj]

Hi RakhiS, 

 

Greetings from Syncfusion Support. 

 

We have checked with your reported issue. And we have created a sample over here with required id values similar to your code. Even on refreshing the page, the given id remains the same in our end.  

 

Refer to the sample below. 

 

https://stackblitz.com/edit/angular-dashboard-layout-add-panel-rcpflm?file=app.component.ts 

 

Refer to the screenshot: 

 

 

 

It would be really helpful, if you could share the returned panel json from your database while refreshing the page. Precisely the format in which the data is returned. And if possible, please modify the above sample so as to replicate your issue. 

 

Please get back to us if you need further assistance. 

 

Regards, 

 

Sharon Sanchez S. 

[RakhiS]

Hi RakhiS, 

 

Greetings from Syncfusion Support. 

 

We have checked with your reported issue. And we have created a sample over here with required id values similar to your code. Even on refreshing the page, the given id remains the same in our end.  

 

Refer to the sample below. 

 

https://stackblitz.com/edit/angular-dashboard-layout-add-panel-rcpflm?file=app.component.ts 

 

Refer to the screenshot: 

 

 

 

It would be really helpful, if you could share the returned panel json from your database while refreshing the page. Precisely the format in which the data is returned. And if possible, please modify the above sample so as to replicate your issue. 

 

Please get back to us if you need further assistance. 

 

Regards, 

 

Sharon Sanchez S. 

Hi,

I am sharing the json format which we have prepared from backend(sql server)

[{"panelId":4,"CalculatedData":"Null","Label":"T","id":4,"sizeX":1,"sizeY":1,"row":0,"col":0,"header":"<div style=\"text-align: right;\" id=\"myDiv\"><a class=\"classAdd\"><img src=\".\/assets\/flex-images\/outline_settings_black_24dp.png\" alt=4 title=\"Update Component\"><\/a><a class=\"classDel\"><img src=\".\/assets\/flex-images\/Delete_1.png\" alt=4 title=\"Delete Component\"><\/a><\/div>","ComponentName":"BarChart"},{"panelId":51,"CalculatedData":"0","Label":"2","id":51,"sizeX":1,"sizeY":1,"row":0,"col":0,"header":"<div style=\"text-align: right;\" id=\"myDiv\"><a class=\"classAdd\"><img src=\".\/assets\/flex-images\/outline_settings_black_24dp.png\" alt=51 title=\"Update Component\"><\/a><a class=\"classDel\"><img src=\".\/assets\/flex-images\/Delete_1.png\" alt=51 title=\"Delete Component\"><\/a><\/div>","ComponentName":"Card"}]

and in front end handling in the following way:

 <ejs-dashboardlayout id='default_dashboard' columns="5" #default_dashboard [cellSpacing]='cellSpacing' [allowResizing]='true'

                      (change)="onChange($this)" (created)="created($event)" (resizeStop)="onResizeStop($event)"  >

    <e-panels>

      <div *ngFor="let panel of panels">

        <e-panel  [sizeX]="panel.sizeX" [sizeY]="panel.sizeY" [row]="panel.row" [col]="panel.col" [content]="panel.header">

          <div [ngSwitch]="panel.ComponentName">

            <div *ngSwitchCase="'Card'">

              <ng-template #content>

                <p>{{panel.ComponentName}}</p>

                <app-card [passcounts]="panel.CalculatedData" [cardLabel]="panel.Label"></app-card>

              </ng-template>

            </div>

            <div *ngSwitchCase="'BarChart'">

              <ng-template #content>

                <p>{{panel.ComponentName}}</p>

                <!--<app-chart></app-chart>-->

                <app-dummy_pivot></app-dummy_pivot>

              </ng-template>

            </div>        

          </div>

        </e-panel>

      </div>

    </e-panels>

  </ejs-dashboardlayout>

[Sharon Sanchez Selvaraj]

Hi RakhiS, 

 

Thanks for sharing the details. 

 

We have checked with the provided JSON data obtained from the backend and also with the frontend code provided in your end. On analyzing your code, we had noticed that the id for the panels weren’t mapped. We would like to mention that the default values of id would be generated if you haven’t mapped the required id attribute. So we would suggest you to store the id value in string format in the database while serializing. 

 

Please refer to the sample created in our end, where we have mapped the id values with your sample JSON. 

 

Refer to the code snippet where panel id is mapped. 

 

  <e-panel [id]="panel.value.id" [sizeX]="panel.value.sizeX" [sizeY]="panel.value.sizeY" [row]="panel.value.row" 

            [col]="panel.value.col"> 

            <ng-template #content> 

              <p> 

                {{panel.value.ComponentName}} 

              </p> 

            </ng-template> 

          </e-panel> 

 

 

Refer to the sample. 

 

https://stackblitz.com/edit/angular-ng-template-sample-vfsejs?file=app.component.ts 

 

Please get back to us if you need further assistance. 

 

Regards, 

 

Sharon Sanchez S. 

[RakhiS]

Hi RakhiS, 

 

Thanks for sharing the details. 

 

We have checked with the provided JSON data obtained from the backend and also with the frontend code provided in your end. On analyzing your code, we had noticed that the id for the panels weren’t mapped. We would like to mention that the default values of id would be generated if you haven’t mapped the required id attribute. So we would suggest you to store the id value in string format in the database while serializing. 

 

Please refer to the sample created in our end, where we have mapped the id values with your sample JSON. 

 

Refer to the code snippet where panel id is mapped. 

 

  <e-panel [id]="panel.value.id" [sizeX]="panel.value.sizeX" [sizeY]="panel.value.sizeY" [row]="panel.value.row" 

            [col]="panel.value.col"> 

            <ng-template #content> 

              <p> 

                {{panel.value.ComponentName}} 

              </p> 

            </ng-template> 

          </e-panel> 

 

 

Refer to the sample. 

 

https://stackblitz.com/edit/angular-ng-template-sample-vfsejs?file=app.component.ts 

 

Please get back to us if you need further assistance. 

 

Regards, 

 

Sharon Sanchez S. 

 addPanel(): void {

    let panel: PanelModel[] = [{

      'sizeX': 1, 'sizeY': 1, 'row': 0, 'col': 0     

    }];

    this.dashboard.addPanel(panel[0]); //this is used to add panel and in dashboard space.

let jsonInfo = JSON.Stringify(this.dashboard.serialize())     -- [{"id":"layout_0","row":0,"col":0,"sizeX":1,"sizeY":1}]

since in panel model i have not given any id so it is taking id as "layout_0", even I tried with providing custom id but it also not working for my issue

In jsonInfo, I am  getting all the adding panels information which are present in dashboard space. Now in database I am accessing this panelJson and fetching id and its postion parameter and storing in table.

Above senerio works fine till remain on that page and keeps adding panel.

Now when again I refresh page, I call store procedure in which I fetch the panelid with position and it renders well on right positions.

getting data :

[{"id":"layout_1","row":0,"col":1,"sizeX":1,"sizeY":1}]

[{"id":"layout_0","row":0,"col":0,"sizeX":1,"sizeY":1}]

now when I add panel it is adding panel again with the defaultid as "layout_0" and now the panelJson is forming for all the panels in the following way which is wrong.

[{"id":"layout_0","row":0,"col":1,"sizeX":1,"sizeY":1,"minSizeX":1,"minSizeY":1,"maxSizeX":null,"maxSizeY":null},{"id":"layout_1","row":1,"col":0,"sizeX":1,"sizeY":1,"minSizeX":1,"minSizeY":1,"maxSizeX":null,"maxSizeY":null},{"id":"layout_2","row":0,"col":1,"sizeX":1,"sizeY":1,"minSizeX":1,"minSizeY":1,"maxSizeX":null,"maxSizeY":null},{"id":"layout_0","row":0,"col":0,"sizeX":1,"sizeY":1,"minSizeX":1,"minSizeY":1,"maxSizeX":null,"maxSizeY":null}]

please help me out, if possible please arrange a call if you are not getting my exact issue

[Keerthana Rajendran]

Hi Rakhis, 

Sorry for the inconvenience.  

We have created an incident under your Direct-Trac account and we request you to follow up with that incident for further technical assistance on this issue with Dashboard Layout component.  

Regards, 

Keerthana.