Issue with RowGroup and Ajax custom rendering

Issue with RowGroup and Ajax custom rendering

spectreDaspectreDa Posts: 7Questions: 2Answers: 0
edited March 2020 in Free community support

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?

This question has accepted answers - jump to:

Answers

  • spectreDaspectreDa Posts: 7Questions: 2Answers: 0
    edited March 2020

    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();

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736
    Answer ✓

    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

  • spectreDaspectreDa Posts: 7Questions: 2Answers: 0
    edited March 2020

    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

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736
    Answer ✓

    Wow, thats a lot of code for just 4 rows :smiley:

    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

  • spectreDaspectreDa Posts: 7Questions: 2Answers: 0
    edited March 2020

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

This discussion has been closed.