addPanel sometimes creates Panels with wrong dimensions (width, height) and position

[christiana]

We create a dashboard and dynamically add panels with addPanel function. In our system this works perfectly. In systems of one of our customers, we are facing a strange effect. This can be observed in all browsers we checked.

The effect is, that the panels are created all with extension 1 x 1 on the grid although we provide other dimesions. If one resizes the panels, syncfusion shows the panels in grey in the correct dimensions. Additionally, the panels are not at the right position. Rather, a lot of white space is in between.

The following code is used to add the panels:

    var createPanel = function(cssClass, content, header, row, col, sizeX, sizeY, id, extraOptions){

        let panel = {};

        let svgDelete = '<svg data-target-id="' + id + '" class="' + id + ' panel-ribbon-icon panel-delete" width="20px" height="20px" viewBox="0 0 20 20">' + pathDelete + '</svg>';

        let svgHelp = '<svg class="' + id + ' panel-ribbon-icon panel-help" width="20px" height="20px" viewBox="0 0 20 20">' + pathHelp + '</svg>';

        let svgNavigate = '<svg class="' + id + ' panel-ribbon-icon panel-navigate" style="visibility: hidden;" width="20px" height="20px" viewBox="0 0 20 20">' + pathNavigate + '</svg>';

        panel.cssClass = cssClass;

        panel.header = '<div class="panel-header"><div class="panel-title">' + header + '</div><div class="panel-menu"> '+ svgNavigate + svgHelp + svgDelete + '</div></div>';

        panel.row = row;

        panel.col = col;

        panel.resizeStop = function(){

            relocatePanels();

        };

        panel.content = '<div class="panel-content" id="panel-content-' + id +'">' + content + '</div>';

        panel.sizeY = sizeY;

        panel.sizeX = sizeX;

        panel.id = id;

        panel.locale = 'de-DE';

        if(extraOptions !== undef && extraOptions !== false) {

            panel.minSizeX = minX;

            panel.minSizeY = minY;

            panel.maxSizeX = maxX;

            panel.maxSizeY = maxY;

        }

        return panel;

    };

    var localPanels = $dashboard.data('panels');

    $.each(localPanels, function(k,v){

        let cargoPanel = createPanel('dashboard-temp-panel', '<div class="material-loader"><span class="outer-loader uk-spinner uk-icon" uk-spinner="ration:1"></span></div>', v.name, v.y, v.x, v.size_x, v.size_y, v.panel);

        dashboard.addPanel(cargoPanel);

    });

An example for a localPanels-JSON:

<div id="dashboard-layout" data-dashboard-action="entity_home_audit_management.pl" data-panels="[{&quot;load_time&quot;:&quot;0.18916988372802701&quot;,&quot;drill_down_script&quot;:null,&quot;x&quot;:0,&quot;size_y&quot;:2,&quot;panel&quot;:&quot;DC6F7711-6C21-1014-A73F-DBD97EE56816&quot;,&quot;load_order&quot;:4,&quot;y&quot;:0,&quot;name&quot;:&quot;State by Department&quot;,&quot;size_x&quot;:1},{&quot;drill_down_script&quot;:null,&quot;load_time&quot;:&quot;0.314428091049194&quot;,&quot;panel&quot;:&quot;8C9B23AC-6C20-1014-BF1D-A395A8D2408C&quot;,&quot;size_x&quot;:3,&quot;name&quot;:&quot;Ongoing Audits (Dep.)&quot;,&quot;y&quot;:2,&quot;load_order&quot;:6,&quot;x&quot;:0,&quot;size_y&quot;:4},{&quot;drill_down_script&quot;:null,&quot;load_time&quot;:&quot;0.199487924575806&quot;,&quot;name&quot;:&quot;Results (Current Year)&quot;,&quot;size_x&quot;:1,&quot;load_order&quot;:5,&quot;y&quot;:0,&quot;panel&quot;:&quot;062EB03C-6C2B-1014-B5EF-A151CEEAF411&quot;,&quot;size_y&quot;:2,&quot;x&quot;:1},{&quot;size_y&quot;:2,&quot;x&quot;:2,&quot;panel&quot;:&quot;A59DE3A7-6C2A-1014-BF1D-A395A8D2408C&quot;,&quot;size_x&quot;:1,&quot;name&quot;:&quot;Current Plan Year&quot;,&quot;load_order&quot;:1,&quot;y&quot;:0,&quot;drill_down_script&quot;:null,&quot;load_time&quot;:&quot;0.105355024337769&quot;},{&quot;load_time&quot;:&quot;0.135188817977905&quot;,&quot;drill_down_script&quot;:null,&quot;size_y&quot;:2,&quot;x&quot;:3,&quot;panel&quot;:&quot;375909A0-6BFB-1014-A9E8-AD508957B796&quot;,&quot;y&quot;:0,&quot;load_order&quot;:2,&quot;name&quot;:&quot;Hanging Audits&quot;,&quot;size_x&quot;:3},{&quot;load_order&quot;:3,&quot;y&quot;:2,&quot;size_x&quot;:3,&quot;name&quot;:&quot;Overdue Milestones&quot;,&quot;panel&quot;:&quot;A5D6EACC-6BFB-1014-A9E8-AD508957B796&quot;,&quot;size_y&quot;:2,&quot;x&quot;:3,&quot;load_time&quot;:&quot;0.15862107276916501&quot;,&quot;drill_down_script&quot;:null},{&quot;drill_down_script&quot;:null,&quot;load_time&quot;:&quot;4.5481920242309598E-2&quot;,&quot;panel&quot;:&quot;C1FD01A2-6BFD-1014-9163-EC389CD9BCBE&quot;,&quot;size_x&quot;:2,&quot;name&quot;:&quot;Milestone Compliance&quot;,&quot;y&quot;:4,&quot;load_order&quot;:7,&quot;x&quot;:3,&quot;size_y&quot;:2}]">

Or more readable:

<div id="dashboard-layout" data-dashboard-action="entity_home_audit_management.pl" data-panels="[{„load_time“:“0.18916988372802701“,“drill_down_script“:null,“x“:0,“size_y“:2,“panel“:“DC6F7711-6C21-1014-A73F-DBD97EE56816“,“load_order“:4,“y“:0,“name“:“State by Department“,“size_x“:1},{„drill_down_script“:null,“load_time“:“0.314428091049194“,“panel“:“8C9B23AC-6C20-1014-BF1D-A395A8D2408C“,“size_x“:3,“name“:“Ongoing Audits (Dep.)“,“y“:2,“load_order“:6,“x“:0,“size_y“:4},{„drill_down_script“:null,“load_time“:“0.199487924575806“,“name“:“Results (Current Year)“,“size_x“:1,“load_order“:5,“y“:0,“panel“:“062EB03C-6C2B-1014-B5EF-A151CEEAF411“,“size_y“:2,“x“:1},{„size_y“:2,“x“:2,“panel“:“A59DE3A7-6C2A-1014-BF1D-A395A8D2408C“,“size_x“:1,“name“:“Current Plan Year“,“load_order“:1,“y“:0,“drill_down_script“:null,“load_time“:“0.105355024337769“},{„load_time“:“0.135188817977905“,“drill_down_script“:null,“size_y“:2,“x“:3,“panel“:“375909A0-6BFB-1014-A9E8-AD508957B796“,“y“:0,“load_order“:2,“name“:“Hanging Audits“,“size_x“:3},{„load_order“:3,“y“:2,“size_x“:3,“name“:“Overdue Milestones“,“panel“:“A5D6EACC-6BFB-1014-A9E8-AD508957B796“,“size_y“:2,“x“:3,“load_time“:“0.15862107276916501“,“drill_down_script“:null},{„drill_down_script“:null,“load_time“:“4.5481920242309598E-2“,“panel“:“C1FD01A2-6BFD-1014-9163-EC389CD9BCBE“,“size_x“:2,“name“:“Milestone Compliance“,“y“:4,“load_order“:7,“x“:3,“size_y“:2}]">

[Sowmiya Padmanaban]

Hi Christiana,  

 

Greetings from Syncfusion support. 

 

We have checked your reported issue with DashboardLayout component. When adding the panel with 1*1 (sizex*sizeY), panels are adding properly to the DashboardLayout component. 

 

For your reference, we have adding the panel(1*1) to the DashboardLayout component. Refer the sample link below. 

 

https://stackblitz.com/edit/xkfqrt?file=index.ts 

 

Unfortunately, we were unable to understand your reported problem with your shared information. 

 

If the issue still persist, could you please share the below details. It will help us to resolve your issue at the earliest. 

 

·        If possible, reproduce the issue in attached sample. 

·        Exact case of your reported issue. 

·        Video footage of your reported issue. 

 

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

 

Regards,  

Sowmiya.P