Adding the Same View To A Carousel Dynamically

Webix JS
#1

Hello,

I’m adding a jetview that contains a datatable to a carousel using the addView function. The view is defined with all localId values. When I add the same jetview to the carousel (displaying different data in a datatable), the first one that I added does not have valid data anymore in the datatable. The items in the datatable come back as ‘undefined’ when using the getSelectedItem or getItem functions on the datatable
.
Is there a way to not have this happen?

Thank You,

#2

can you create a snippet with described behavior?

#3

This very simplified code gives you an idea of what I’m trying to do. I’ve replaced the carousel with a Multiview to see if that would work better but it still has the same problems.

var data1 = [{LineNo:1,Description:“Desc1”,id:1},
{LineNo:2,Description:“Desc2”,id:2}];
var data2 = [{LineNo:3,Description:“Desc3”,id:3},
{LineNo:4,Description:“Desc4”,id:4}];
var cols = [{id:“LineNo”,header:“Line No”},
{id:“Description”,header:“Description”}];

var view = {view:“form”, localId:‘tableform’, name:“tableform”, elements:[
{view:“datatable”, localId:‘mytable’, name:“mytable”, select:‘row’, columns:cols,
on:{“onItemDblClick”:function() {var item = this.getSelectedItem();
webix.message(item.id)}}
}
]};

webix.ui({rows:[
{
view:“multiview”,
id:“mymultiview”,
width:464, height:275,
cols:[{id:“dummy”}]
},
{
view:“toolbar”, id:“mytoolbar”, type:“MainBar”, elements:[ ]
},
]},
).show();

$$(“mymultiview”).removeView($$(“dummy”));

var zview = webix.copy(view);
$$(“mymultiview”).addView(zview,-1);
$$(“mymultiview”).getChildViews()[0].queryView({name:‘mytable’}).parse(data1);

var btn = {view:“button”,id:0,value:“table1”,click:buttonhandler};
$$(“mytoolbar”).addView(btn,-1);

var xview = webix.copy(view);
$$(“mymultiview”).addView(xview,-1);
$$(“mymultiview”).getChildViews()[1].queryView({name:‘mytable’}).parse(data2);

var btn2 = {view:“button”,id:1,value:“table2”,click:buttonhandler};
$$(“mytoolbar”).addView(btn2,-1);

function buttonhandler(id) {

var mviews = $$(“mymultiview”).getChildViews();
for (i = 0; i < mviews.length; i++) {
if (i == id) mviews[i].show();
}

}

In this code snippet I can’t get the button handler to work. I don’t realy want to use the tab object or the segmented button for this but generate my own buttons as the user adds views.

In my actual code the switching of views with the buttons works ok, but each time I add a view to the Multiview, the data in the previous views still displays but the code in the itemDblclick event returns a ‘undefined’ item.

Hope this helps to give you an idea of what I’m trying to do.

Thanks,

#4

not sure if I got you correctly, but your code is not wrong, except one mistake.
never set id to “falsy” value (0, false, null, undefined, empty string).
https://snippet.webix.com/m3qbcz8d
I’ve changed button ids and corrected iteration code