Tabbar attach issue

Suite and Optimus Suite 7
#1

When a tab change event occurs first, it works normally.

If you move to another tab and then return to the original tab, a null error occurs.

domvm.micro.js:1224 Uncaught TypeError: Cannot set property ‘_node’ of null
//scipt

 tabbar = new dhx.Tabbar("tabbar", {
    mode: "top",
    css: "dhx_widget--bordered",
views: [
               { tab: "tab1",id:"ta1"},
               { tab: "tab2",id:"ta2"},
             ]
       });
grid = new dhx.Grid("tbl1", {
            columns: [
                { /* width: 100 ,*/ align :"center",id: "SN", header: [{ text: "sn", colspan :1, rowspan: 3}] },
                { /* width: 80 ,*/ align :"center",id: "NM", header: [{ text: "t1" , rowspan: 3,colspan:1, align :"center"}] },
                ],keyNavigation: true,resizable: true, selection: "row"
        });
        grid2 = new dhx.Grid("tbl2", {
            columns: [
                { /* width: 100 ,*/ align :"center",id: "SN", header: [{ text: "sm", colspan :1, rowspan: 3}] },
                { /* width: 80 ,*/ align :"center",id: "NM", header: [{ text: "t2" , rowspan: 3,colspan:1, align :"center"}] },
                ],keyNavigation: true,resizable: true, selection: "row"
        });
      
        
tabbar.getCell("ta1").attach(grid);
tabbar.getCell("ta2").attach(grid2);

//HTML

<!-- component container -->
<div id="tabbar" style="height: 800px; width: 800px; margin: 0 auto; padding-top: 20px;"></div>
#2

Here has a similar issue. If tabA, tabB, tabC… are successively opened, everything looks good. But if return back to tabB or tabA after tabC is opend, they become a blank page now. This issue appears when upgrade to V7.1.9 and I puzzled over this for a few days but I can’t give a code snippet because I can’t catch it unless I give all my codes :frowning:

#3

Please, note that in case of attaching the component to a cell (layout/tabbar) you don’t need to define a parent container to that component.
So it should be like:

 tabbar = new dhx.Tabbar("tabbar", {
    mode: "top",
    css: "dhx_widget--bordered",
views: [
               { tab: "tab1",id:"ta1"},
               { tab: "tab2",id:"ta2"},
             ]
       });
grid = new dhx.Grid(null, { // refer to the null here
            columns: [
                { /* width: 100 ,*/ align :"center",id: "SN", header: [{ text: "sn", colspan :1, rowspan: 3}] },
                { /* width: 80 ,*/ align :"center",id: "NM", header: [{ text: "t1" , rowspan: 3,colspan:1, align :"center"}] },
                ],keyNavigation: true,resizable: true, selection: "row"
        });
        grid2 = new dhx.Grid(null, { //here we also have null, as the parent container of the component is a dhx. container.
            columns: [
                { /* width: 100 ,*/ align :"center",id: "SN", header: [{ text: "sm", colspan :1, rowspan: 3}] },
                { /* width: 80 ,*/ align :"center",id: "NM", header: [{ text: "t2" , rowspan: 3,colspan:1, align :"center"}] },
                ],keyNavigation: true,resizable: true, selection: "row"
        });
      
        
tabbar.getCell("ta1").attach(grid);
tabbar.getCell("ta2").attach(grid2);
1 Like
#4

In my case 2 grids are attached to the layout which attached to the tabbar. No parent container is defined.And all works fine till V7.1.9. I can only provide the error message.

suite.min_V7.1.9.js:21 Uncaught TypeError: Cannot set property ‘_node’ of null
at Bt (suite.min_V7.1.9.js:21)
at qt.Jt [as _redraw] (suite.min_V7.1.9.js:21)
at Ot (suite.min_V7.1.9.js:21)
at Pt (suite.min_V7.1.9.js:21)
at Ot (suite.min_V7.1.9.js:21)
at Pt (suite.min_V7.1.9.js:21)
at Ot (suite.min_V7.1.9.js:21)
at Pt (suite.min_V7.1.9.js:21)
at qt.Jt [as _redraw] (suite.min_V7.1.9.js:21)
at Ot (suite.min_V7.1.9.js:21)

#5

Unfortunately, I was not able to reconstruct your problem locally.
Here is a working snippet:
https://snippet.dhtmlx.com/9hba9anc
If the problem still occurs for you please, provide a similar snippet, where the problem can be reproduced.

#6

Thanks, it works fine.