18.3.x version creates error when dynamic loading dashboard widgets

[Peter Esser]

Hi there,

After an NPM update where we updated from ej2-vue-layouts 18.2.58 to the 18.3.x version, we suddenly encountered an issue with our dynamic widget approach.
To load widgets in the dashboard component, we use an vue property with foreach

 <e-panels>
    <e-panel
        v-for="(item, index) in widgetSet"
        :key="index"
        :id="item.id"
        :row="item.row"
        :col="item.col"
        :sizeX="item.sizeX"
        :sizeY="item.sizeY"
        :minSizeX="item.minSizeX"
        :minSizeY="item.minSizeY"
        :cssClass="item.class"
        :header="'<div>' + item.name + '</div>'"
        :content="item.widgetTemplate"
    />
  </e-panels>
</ejs-dashboardlayout>

This worked without issue, but now, when we update the "widgetSet" property, the resetLayout cannot find the DOM element anymore, probably because this event is triggered before vue creates the new dom elements based on the updated property.

Console error:

dashboard.js:2 TypeError: Cannot read property 'id' of null

debugged in this part of your source, it calls "document.getElementById(this.panels[i].id)", but the DOM doesn't have this element yet. It fails on var rowValue = this.cloneObject[element_1.id].row;

DashboardLayout.prototype.resetLayout = function (model, element) {
    var collisions = this.collisions(model.row, model.col, model.sizeX, model.sizeY, this.mainElement);
    if (!this.mainElement || this.addPanelCalled || this.resizeCalled || this.movePanelCalled) {
        return collisions;
    }
    if (this.mainElement && this.oldRowCol !== this.cloneObject) {
        for (var i = 0; i < this.panels.length; i++) {
            var element_1 = document.getElementById(this.panels[i].id);
            if (element_1 === this.mainElement) {
                continue;
            }
            var rowValue = this.cloneObject[element_1.id].row;

Our solution for now is revert to the 18.2.x version, but we would like to be able to stay "in sync" with your latest versions. Looking at the changelog, it probably has something todo with the fixes for the panels created in the 18.3.x releases. 

[Sowmiya Padmanaban]

Hi Peter Esser,  

 

We are able replicate your reported issue in DashboardLayout component. We have consider it issue as a bug. Fix for this issue will be included in our next patch release which is expected to be rolled out by the mid of November 2020. 

 

Please, track the following feedback link to know the status of this issue fix. 

 

https://www.syncfusion.com/feedback/19487/script-error-occurs-when-dynamically-updating-the-panels-using-v-for-in 

 

We appreciate your patience. 

 

Regards,  

Sowmiya.P 

[Sowmiya Padmanaban]

Hi Peter Esser, 

 

Thanks for your patience. 

 

We are glad to announce that our patch release (V18.3.48) is rolled out successfully. In this release, we have included the fix for the issue(“Update the properties of DashboardLayout component using V-for”). To access this fix, we suggest you to update the package to the latest version (V18.3.48). 

 

Please, refer the below sample link for your requirement. 

 

https://www.syncfusion.com/downloads/support/forum/159413/ze/quickstart1448238568.zip 

 

Please get in touch with us if you would require any further assistance. 

 

Regards, 

Sowmiya.P