How do I change two multiviews simultaneously?

Question

Ok let me first start off by explaining what I have.

I have a Segmented control that acts as my Tab-bar control. This changes the content of the page depending on which segment(tab) is selected. The page content is divided into a left and right column. Each column has its own Multiview.

Now the problem comes in where I can only make one of the Multiviews change when the segment(tab) is changed.

 _______________
|  ___ ___ ___  |
| (_1_|_2_|_3_) |  /* segments or tabs */
|   ____ _____  |
|  |left|right| |  /* two columns that must change */
|  |~~~ |~~~  | |
|  |~~~ |~~~  | |
|  |~~~ |     | |
|  |____|_____| |
|_______________|

This is some of my code, and I'm using dhtmlx touch

{
container:"content",
type:"clean",
css:"page",
rows:[
    {
        view:"toolbar",
        elements:[
            {view:"segmented", width:320, inputWidth: 280, multiview: true, selected:"cos_301", align:"center", options: [   
                { label: 'COS 301', value: "cos_301"},
                { label: 'COS 333', value: "cos_333"},
                { label: 'COS 364', value: "cos_364"}
            ]}
        ]
    },
    {cols:[
        {view:"label", label:"Announcements"},
        {view:"label", label:"Pracs"}
    ]},
    {cols:[
        {view:"multiview", width:200, height: 290, 
            cells:[    
                { template:"some info", scrol: true, id:"cos_301" },
                { template:"some info", scrol: true, id:"cos_333" },
                { template:"some info", scroll: true, id:"cos_364" }
            ]
        },
        {view:"multiview", width:100, height: 290, 
            cells:[    
                { template:"some info", scrol: true, id:"cos_301p" },
                    { template:"some info", scrol: true, id:"cos_333p" },
                    { template:"some info", scrol: true, id:"cos_364p" }
                ]}
    ]}
    ]
}

/this displays correctly, it just doesn't want to change/

Answer 1

You can try to set onBeforeTabClick handler to show more then one view on tab click (and you can remove "multiview:  true" from configuration in this case):

dhx.ui({
...
{view:"segmented", id: "tabs", ...}
...
});

$$("tabs").attachEvent("onBeforeTabClick", function(button, id) {
   // show the view in the first column
   $$(id).show();
   // and the second column
   $$(id+"p").show();
   return true;
});