Autodesk forge viewer table row click to isolate elements

Question

I am trying to create a dynamic table inside the viewer's page. each row of the table represents an object from the model and has a couple of different parameters ( name, level, etc..) I want to make a click event on each row, that isolates the element in the viewer's model.

I have created the table programmatically using js. (the table is created after pressing an external command button )

how can I add an event listener to a row click, that would isolate the element?

this is my code for creating the table after pressing the command button:

var myTable = $('.my-table');
var myArr = rows; //matrix of object values

for (var i = 0; i < myArr.length; i++)
    myTable.append("<tr id=" + i + ">" +
        " <td>" + myArr[i][0] + "</td>" +
        "<td>" + myArr[i][1] + "</td>" +
        "<td>" + myArr[i][2] + "</td>" +
        "<td>" + myArr[i][3] + "</td>" +
        "<td>" + myArr[i][4] + "</td>" +
        "<td>" + myArr[i][5] + "</td>" +
        "<td>" + myArr[i][6] + "</td>" +
        "<td id=" + "tt" + ">" + myArr[i][7] + "</td>" +
        "</tr>");
const row = document.getElementById(`${i}`);
row.addEventListener('onClick', function(evt, item) { /// we are using a viewer api property to  isolate the 
    _this.viewer.isolate(_this.modelData.getIds(myArrNames[i][1], item[0]._model.label));

});

Answer 1

First, it's not a Forge issue but a JavaScript syntax and indent issue.

After re-indenting your code, you can see the codes for adding the click event is out of the for-loop, so you need to add the bracket pair to include the codes for adding the click event into the for-loop.

When defining for-loop in JavsScirpt without bracket { and } , it only takes the first line in the count.

In addition, there is no onClick event. When using addEventListener , the event name is click , not onClick .

var myTable = $('.my-table');
var myArr = [[1,2,3,4,5,6,7], [1,2,3,4,5,6,7]]; //matrix of object values

for (var i = 0; i < myArr.length; i++) {
    myTable.append("<tr id=" + i + ">" +
        " <td>" + myArr[i][0] + "</td>" +
        "<td>" + myArr[i][1] + "</td>" +
        "<td>" + myArr[i][2] + "</td>" +
        "<td>" + myArr[i][3] + "</td>" +
        "<td>" + myArr[i][4] + "</td>" +
        "<td>" + myArr[i][5] + "</td>" +
        "<td>" + myArr[i][6] + "</td>" +
        "<td id=" + "tt" + ">" + myArr[i][7] + "</td>" +
        "</tr>");

        const row = document.getElementById(`${i}`);
        row.addEventListener('click', function(evt) { /// we are using a viewer api property to  isolate the 
            _this.viewer.isolate(_this.modelData.getIds(myArrNames[i][1], item[0]._model.label));
        
        });
}

To use onClick , it will become:

const row = document.getElementById(`${i}`);
row.onClick = function(evt) { /// we are using a viewer api property to  isolate the 
    _this.viewer.isolate(_this.modelData.getIds(myArrNames[i][1], item[0]._model.label));

});

Lastly, why not just use jQuery only? The jquey.on can help bind events to dynamically created items, so that the click event will be delegated to any tr element in the table, even if it's added after you bound the event handler.

var myTable = $('.my-table');
var myArr = [[1,2,3,4,5,6,7], [1,2,3,4,5,6,7]]; //matrix of object values

myTable.on('click', 'tr', function() {
    _this.viewer.isolate(_this.modelData.getIds(myArrNames[i][1], item[0]._model.label));
});

for (var i = 0; i < myArr.length; i++) {
    myTable.append("<tr id=" + i + ">" +
        " <td>" + myArr[i][0] + "</td>" +
        "<td>" + myArr[i][1] + "</td>" +
        "<td>" + myArr[i][2] + "</td>" +
        "<td>" + myArr[i][3] + "</td>" +
        "<td>" + myArr[i][4] + "</td>" +
        "<td>" + myArr[i][5] + "</td>" +
        "<td>" + myArr[i][6] + "</td>" +
        "<td id=" + "tt" + ">" + myArr[i][7] + "</td>" +
        "</tr>");
}

ref: https://stackoverflow.com/a/15420578