Subrows in jsgrid

Question

I try to create a table with some rows and columns with the help of jsgrid. On click on a row, it should expand and show some SubRows. I therefore created a row.click() function. But when clicking on the row it appends the new content at the end of the rows not under my current row.here is some code example

this is a working jsfiddle of it

rowRenderer: function(item) {
        var row = $("<tr>");

        var addressesGrid = $('<tr>').addClass('nested-grid').hide();
        addressesGrid.jsGrid({
            width: "100%",
            height: "auto",
            data: data,
            heading: false,
            fields: col
        })
        items= Object.keys(item)
       items.forEach(function(key){
           if(key!=items[items.length-1]) {
               var cell = $("<td>").addClass("jsgrid-cell").append(item[key])
               row.append(cell)
           }
        })
        row.click(function () {
            addressesGrid.toggle();
        })
        row.append(addressesGrid);


        return row
    }

Answer 1

Instead of appending to the first row you need to return both rows:

return row.add(addressesGrid);

Here is the corrected fiddle http://jsfiddle.net/9ftwLsmf/