Issue with RowGroup and Ajax custom rendering

spectreDa

Hi,
I have issues with RowGroup. When I start grouping hard-coded html table everything works great.
Issue occurs when I tries grouping rows which I received from API(Ajax custom rendering) . Every row have single
group instead of group with a few rows. Should I wait for building table before grouping rows or am I doing something wrong?

spectreDa

json.keys = true;

json.order= [[2, 'asc']],
json.rowGroup= {
// Uses the 'row group' plugin
dataSrc: 1,
startRender: function (rows, group) {
var collapsed = !!collapsedGroups[group.group_display];
console.log(collapsed)
rows.nodes().each( (r) => {
console.log(r)
r.style.display = collapsed ? 'none' : '';
});
console.log(rows, "rows")
// Add category name to the <tr>. NOTE: Hardcoded colspan
return $('<tr/>')
.append(<td colspan="1" style="background-color: #0000">${group.group_display} </td>)
.append( '<td style="background-color: #0000">'+group.quantity+'</td>' )
.append( '<td style="background-color: #0000"></td>' )
.append( <td style="background-color: #0000">${group.single_quantity}</td> )
.append( '<td style="background-color: #0000"></td>' )

        .attr('data-name', group.group_display)
        .toggleClass('collapsed', collapsed);
}

}
json.data = datatable.data;
json.myColumnFormats = datatable.columns;
json.colReorder = true;
json.rowReorder= true;
json.lengthMenu = [20];

json.select = true;
json.reorder = {
dataSrc: "Part_Reference"
};

json.createdRow = (row, data) => {
console.log(row);

if (data[1].display === "+") {
  console.log(data[1]);
}

};
json.columnDefs = [

  { "visible": false, "targets": 2 }

];
json. order= [[2, 'asc']],

json.columns = cols;

json.columnDefs = columnDefs;

json.dom = "<f<t>ip>";

his.mainTable = $("#littleplace" + this.name + "_" + this._uid).DataTable(
json
);

this.mainTable.columns.adjust().draw();

kthorngren

Unfortunately there isn't enough information to understand how you are handling the Ajax sourced data. Please post a link to your page or a test case showing the issue. This way we can help debug your code.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

spectreDa

I made mistake clicked by answered button. Question is not resolved.

Ok there is a jsbin example https://jsbin.com/tulixakive/edit?html,css,js,output

kthorngren

Wow, thats a lot of code for just 4 rows

Took a bit to figure out your code but found one way to make it work. The data for the option rowGroup.dataSrc column is an object which you are using columns.render to render the orthogonal data. Using dataSrc: 1 will actually return the object for that cell. I changed it to use a function as suggested in the rowGroup.dataSrc comments.

The other change I made was to the line:
.append(<td colspan="1" style="background-color: #0000">${group} </td>)

Changed it from group.group_display to just group. Looks like you need to fix the rest of the return statement.

Here is the updated example:
https://jsbin.com/hetiyaqufi/1/edit?js,output

Kevin

spectreDa

Thanks kthorngren it's a
prefect solution of my problem ;-)