Inline Create Add Dynamic Data
Inline Create Add Dynamic Data
Pierre-Louis
Posts: 10Questions: 3Answers: 0
in Editor
Hi, i'm trying to add dynamic data after the user clicks an inline create button, but i can't figure out how.
The only data i found in editor is def, but the data isn't dynamic. Is there a way to do it ?
articlePrixRefsTable = $('#articlePrixRefsTable').DataTable({
columns: [
{
data: 'Annee',
name: 'Annee'
},
{
data: 'PrixReference',
name: 'PrixReference',
render: function (data, type, row) {
if (type == "display")
return `<div>${parseFloat(data).toFixed(2)}</<div>`;
return data;
}
},
{
data: 'TempsGameRetenuCalc',
name: 'TempsGameRetenuCalc',
render: function (data, type, row) {
if (type == "display")
return `<div>${parseFloat(data).toFixed(2)}</<div>`;
return data;
}
},
{
data: 'CoefTemps',
name: 'CoefTemps'
},
{
data: 'TempsGammeStdCalc',
name: 'TempsGammeStdCalc'
},
{
data: 'PctRebut',
name: 'PctRebut'
},
{
data: 'IsAchete',
name: 'IsAchete',
render: (data, type, row) =>
type === "display" ?
'<input type="checkbox" disabled class="editor-active">' : data,
className: 'dt-body-center'
},
{
data: 'CodeSourceListe2',
name: 'CodeSourceListe2',
render: (data, type, row) => {
if (type === "display") return listCodeSource.find(o => o.value == data)?.label
return data;
}
},
{
data: 'DateCreation',
name: 'DateCreation',
render: function (data, type, row) {
if (type === "display")
return new Date(data).toLocaleDateString() ?? data;
return data;
}
},
{
data: 'IdArticlePrixRef',
name: 'IdArticlePrixRef',
visible: false
}
]
});
}
articlePrixRefsTableEditor = new DataTable.Editor({
table: $('#articlePrixRefsTable'),
idSrc: 'IdArticlePrixRef',
fields: [
{
name: 'Annee',
def: new Date().getFullYear(),
type: 'readonly'
},
{
name: 'PrixReference',
def: 0.00,
type: 'readonly'
},
{
name: 'IsAchete',
type: 'readonly',
/*type: 'checkbox',
separator: "|",
options: [
{ label: '', value: 1 }
]*/
},
{
name: 'CodeSourceListe2',
type: 'select',
options: listCodeSource
},
{
name: 'DateCreation',
type: 'readonly',
def: new Date().toLocaleString()
},
{
name: 'CoefTemps',
def: ''
}
]
})
articlePrixRefsTable.on('click', 'tbody td:first-child,td:nth-child(2),td:nth-child(8)', function (e) {
articlePrixRefsTableEditor.inline(this);
})
articlePrixRefsTableEditor.on('submitSuccess', () => {
enableSaveButton();
})
$('#btnAddRowPrixRefsTable').on('click', function () {
// ajax call here to add dynamic data to row
articlePrixRefsTableEditor.inlineCreate(({
onBlur: 'submit'
}))
})
Replies
Hi, I am doing this too.
I use a simple editor and on "New" button click it inserts a preset row into the data table. (So it is not an inline button, but a "regular" data tables button. But apart from that it is the same use case.)
Here is the Editor:
And the custom button that inserts the new row:
With the "set" method you can preset all of your fields as you like. In my use case I set the parentId of the record and leave the user editable field empty. So the user can inline edit the newly created record right afterwards.