Adding rows, rowGroup

Bindrid2

I am using rowGroup grouped by fiscal year (4 digit string);
When I add a new row via Editor, I am expecting the row to be added to the appropriate group.
What it does do is add a duplicate group and adds the row to the duplicate group at the bottom of the table.

I do not save data back to the server during the add row process. Changes to the table are all saved at once triggered by user action.

Suggestions? Is there a way during the row create process to tell the DataTable to do a full table draw instead of just the row?

(rowGroup is missing from the list of extensions in the Category dropdown for these forums)

 this.editorDef = {
        table: "#" + this.tableId,
        template: "#EquityTemplate",
        display: 'bootstrap',
        fields: [
            {
                name: "FiscalYear", label: "Fiscal Year", type: "display"
            },
            {
                data: "one",
                id:"ddlEditorEquity",
                name: "one",
                label: "One",
                type: "select2",
                message:"<span style='color:red'>Required Field</span>",
                options: JSON.parse(sessionStorage.getItem("Equity_DllList")),
                optionsPair: { label: 'Text', value: 'Value' }
             
            },

            // direct cite
            {
                name: "two", label: "Percent", type: "numeric", def:"0.0", attr: {
                    tabIndex: 2, 
                    class: "form-control-sm text-right"
                }
            },
            { name: "three", label: "Work Years", type: "numeric", def: "0.0", attr: { tabIndex: 3, class: "form-control-sm text-right" } },
            // reimbursable
           { name: "four", label: " In-House %", type: "numeric", def: "0.4", attr: { tabIndex: 3, class: "form-control-sm text-right" } },
           { name: "five", label: " In-House Work Years", type: "numeric", def: "0.3", attr: { tabIndex: 4, class: "form-control-sm text-right" } },
           { name: "six", label: "Outsource %", type: "numeric", def: "0.2", attr: { tabIndex: 3, class: "form-control-sm text-right" } },
           { name: "seven", label: "Outsource Work Years", type: "numeric", def: "0.1", attr: { tabIndex: 5, class: "form-control-sm text-right" } }
        ],
        formOptions: {
            inline: {
                onBlur: 'submit',
            },
            bubble: {
                buttons: false,
                onBlur: "submit"
            }

        }
    };

    this.tableDef = {
        data: tableData,
        rowGroup: {
            dataSrc: "FiscalYear",
            startClassName: "start-table-group",
            endClassName: "end-table-group",
            className: "class-name",
        },
        keys: true,

        columns: [
            {
                data: "one",

            },
            {
                data: "two", render: $.fn.dataTable.render.number(",", ".", 1, "", "%"),
                createdCell: function (node) { $(node).attr("title", "two") }
            },
            { data: "three", createdCell: function (node) { $(node).attr("title", "three") } },
            { data: "four", createdCell: function (node) { $(node).attr("title", "four") } },
            { data: "five", createdCell: function (node) { $(node).attr("title", "five") } },
            { data: "six", createdCell: function (node) { $(node).attr("title", "six") } },
            { data: "seven", createdCell: function (node) { $(node).attr("title", "seven") } },
            {
                data: null,
                className: "action",
                render: function (data, type, row, meta) {
                    return '<i  class="far fa-copy"></i>'
                }
            }
        ],
        createdRow: function (node) { $(node).find(".action").attr("title", "Click to copy this row to the next row."); },
        select: false,
     //   ordering: false,
        orderFixed: [0, 'asc'],
        paging: false,
        search: false,
        dom: "tB",
        buttons: [
        // editor is set before table is created 
        // in my common code area.
        { text: "Add", extend: "create", editor: null }
        ]
    };

Scott

Bindrid2

Field type type: "numeric", above, is my own plug-in that ensures that the data is returned as a number, not a string.

Bindrid2

figured it out

        ...
        rowGroup: {
            dataSrc: "FiscalYear",
            startClassName: "start-table-group",
            endClassName: "end-table-group",
            className: "class-name",
        },
        ordering:true,
        "orderFixed": [[0, 'asc'], [1, 'asc']],
        columnDefs: [
            {targets:"_all", orderable: false}],

         // I added the rowGroup column to the list of columns but hid it
  columns: [
        {data:"FiscalYear", visible:false},
        {data: "one" },
        {data: "two"},
        { data: "three"},
        { data: "four },
        { data: "five" },
        { data: "six},
      ],
   ...

allan

Good to hear you got it working.

4 digit string

I suspect what is happening is that the data from the server is a string, but your plug-in is returning a number. RowGroup uses a string equivalence operator (===) so 1999 and "1999" are not the same thing, even if they are eventually printed out as the same thing.

Allan