Multiple DataViews in same layout renders dataviews with same ID

Suite and Optimus Suite 5
#1

Hello!

I have four DataViews attached to the same layout, cell “a,b,c,d” (layout pattern 5 W, cell “e” is a Form and not part of the problem I think). I use multiple dataviews, because I then can drag-n-drop items between these dataviews, since the items have different status.

            var mainLayout;        
            var viewLog, viewOngoing, viewTesting, viewApproved; // Dataviews

    function doOnLoad() {
                mainLayout = new dhtmlXLayoutObject({
                    parent: "layoutObj", // div id
                    pattern: "5W"
                });      

                // Dataview Ongoing (all dataviews look the same)
                mainLayout.cells("b").setText("Ongoing");
                viewOngoing = mainLayout.cells("b").attachDataView({                
                    drag: true,
                    type: {
                        template: function(obj){ 
                            return ("<div style='border-left:" +                       
                            (obj.priority=="Medium" ? "5px solid orange" 
                            : obj.priority=="High" ? "5px solid crimson": "5px solid yellow") + 
                            "; width:100%; height:100%; padding:10px;'>" +                        
                            "<b>" + obj.subject +"</b><br/>" +                        
                            "Category: " + obj.ticketcategory + "<br/>" + 
                            "Due Date: " + getDateOnly(obj.duedate) + "<br/>" + 
                            "<br/> " + obj.assignedto + "</div>");                                              
                        },
                        padding:0
                    },
                    autowidth: 1
            });
}

When the page loads, the items will display in each dataviews depending on the status of the item, for example, all items with the status ‘Testing’ will show in the Testing-dataview.

// Calling function for loading items to DataView on item status
loadItemToDataviewByStatus(viewOngoing, "Ongoing");

The problem is that it doesn’t always work. Often when the page loads, one dataview fails to display its items and only show a blank view, and you can’t drag any items from the other (working) dataviews to the failing dataview. Moreover, the failing dataview’s items are displayed in the dataview next to it (the layout-cell before it), causing that dataview’s items to disappear from the view entirely.

In Chrome’s Devtool (in Elements-view), I see that whenever this error happens, the failing dataview and the overtaken dataview has the same div id, i.e. ‘DataViewObject_1578390814033’.

Please help, because I’ve been stuck with this problem for days!
I really like the DataView-component, but I can’t use it if it only works randomly. >_<

#2

In your code you have:

viewOngoing = mainLayout.cells("b").attachDataView({

where the viewOngoing is the name of your attached dataview that should be used for all the api usage.
Please, try to to use a unique name for each dataview.

#3

Thanks for taking time to answer.

My bad, I wasn’t clear enough. I do have different name for each dataview: viewLog, viewOngoing, viewTesting, viewApproved;

viewLog = mainLayout.cells("a").attachDataView({});
viewOngoing = mainLayout.cells("b").attachDataView({});
viewTesting = mainLayout.cells("c").attachDataView({});
viewApproved = mainLayout.cells("d").attachDataView({});
#4

I apologize for the delay.
I understand, but unfortunately the porblem still cannot be reproduced locally.
Could you please, provide a simplified complete demo or a demo link, where the problem can be reconstructed.

#5

It’s alright. I’ve chosen another solution, so it doesn’t matter anymore.
Thank you, anyway!