Adding rows, rowGroup
Adding rows, rowGroup
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
Replies
Field type type: "numeric", above, is my own plug-in that ensures that the data is returned as a number, not a string.
figured it out
Good to hear you got it working.
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 (
===
) so1999
and"1999"
are not the same thing, even if they are eventually printed out as the same thing.Allan