Positioning controls on child datatable in an editor form with custom template
Positioning controls on child datatable in an editor form with custom template
I am attempting to put multiple child datatables in an editor with a custom form layout. Ive used the Parent Child Editing example to get the three tables working, my scenario is slightly different than the example but I was able to get everything working correctly.
I wanted to do the same but with a custom form template. The problem is that the buttons are off to the side instead of above the table forcing it to be narrow.
What I want is something like this...is there a way to force layout formatting on the datatable field?
Ive been playing with the layout but it doesnt seem to move anything to tables in the database field. Is there a way to manipulate control locations when using datatables as the input?
var cuEditor = new DataTable.Editor({
ajax: "./SS/ECTS/ConstUnit.php",
table: "#cuTable",
template: '#customForm',
fields: [
{ label: "ID:", name: "ID", visible: false, searchable: false },
{ label: "Unit:", name: "Unit" },
{ label: "Description:", name: "Description" },
{ label: "Type:", name: "Type", type: "radio",
options: [
{ label: "OH", value: 'OH' },
{ label: "UG", value: 'UG' }
],
def: 0 },
{ label: "Avg Cost:", name: "average_cost" },
{ label: "Install Time:", name: "install_time" },
{ label: "Remove Time:", name: "remove_time" },
{ label: "Active:", name: "Active", type: "checkbox", separator: "|", options: [{ label: '', value: 1 }] },
{ label: "Revision Date:", name: "RevisedDate", type: "datetime" },
{
//label: 'Warehouse Stock:',
name: 'whseTable',
type: 'datatable',
editor: whseEditor,
submit: false,
optionsPair: {
value: 'dcms_mat_items.ID'
},
config: {
ajax: {
url: './SS/ECTS/AssocMat.php',
type: 'POST',
data: function (d) {
if (cuTable) {
let selected = cuTable.row({ selected: true });
if (selected.any()) {
d.UnitID = selected.data().ID;
}
}
}
},
columns: [
{ data: 'dcms_whse_inv.StockNo', title: 'StockNo', className: 'dt-body-center', width: '55px'},
{ data: 'dcms_mat_items.Quantity', title: 'Quantity', className: 'dt-body-center', width: '55px'},
{ data: 'dcms_whse_inv.AvgCost', title: 'AvgCost', render: DataTable.render.number(',', '.', 2, '$'), className: 'dt-body-center', width: '65px'},
{ data: 'dcms_whse_inv.Description', title: 'Description'},
],
select: true,
layout: {
top2Start: {
buttons: [
{ extend: 'create', editor: whseEditor },
{ extend: 'edit', editor: whseEditor },
{ extend: 'remove', editor: whseEditor }
]
},
topEnd: 'paging',
bottomStart: null,
bottomEnd: null
}
}
},
{
label: 'UG Install:',
name: 'ugliTable',
type: 'datatable',
editor: ugliEditor,
submit: false,
optionsPair: {
value: 'dcms_mat_items.ID'
},
config: {
ajax: {
url: './SS/ECTS/AssocLab.php',
type: 'POST',
data: function (d) {
if (cuTable) {
let selected = cuTable.row({ selected: true });
if (selected.any()) {
d.UGUnitID = selected.data().ID;
d.ActionID = 1;
}
}
}
},
pageLength: 5,
columns: [
{ data: "dcms_uglab_items.Quantity", title: 'Quantity', className: 'dt-body-center', width: '55px' },
{ data: "dcms_uglab_costs.Cost", title: 'Cost', render: DataTable.render.number(',', '.', 2, '$'), className: 'dt-body-center', width: '65px' },
{ data: "dcms_uglab_costs.Unit", title: 'Unit' },
],
select: true,
layout: {
top2Start: {
buttons: [
{ extend: 'create', editor: ugliEditor },
{ extend: 'edit', editor: ugliEditor },
{ extend: 'remove', editor: ugliEditor }
]
},
topEnd: 'paging',
bottomStart: null,
bottomEnd: null
}
}
},
{
label: 'UG Remove:',
name: 'uglrTable',
type: 'datatable',
editor: uglrEditor,
submit: false,
optionsPair: {
value: 'dcms_mat_items.ID'
},
config: {
ajax: {
url: './SS/ECTS/AssocLab.php',
type: 'POST',
data: function (d) {
if (cuTable) {
let selected = cuTable.row({ selected: true });
if (selected.any()) {
d.UGUnitID = selected.data().ID;
d.ActionID = 2;
}
}
}
},
pageLength: 5,
columns: [
{ data: "dcms_uglab_items.Quantity", title: 'Quantity', className: 'dt-body-center', width: '55px' },
{ data: "dcms_uglab_costs.Cost", title: 'Cost', render: DataTable.render.number(',', '.', 2, '$'), className: 'dt-body-center', width: '65px' },
{ data: "dcms_uglab_costs.Unit", title: 'Unit' },
],
select: true,
layout: {
top2Start: {
buttons: [
{ extend: 'create', editor: uglrEditor },
{ extend: 'edit', editor: uglrEditor },
{ extend: 'remove', editor: uglrEditor }
]
},
topEnd: 'paging',
bottomStart: null,
bottomEnd: null
}
}
}
]
});
<div style="float:left;width:100%">
<div id="customForm" class="container">
<fieldset class="CU region-1">
<legend>Construction Unit Details</legend>
<editor-field name="Unit"></editor-field>
<editor-field name="Description"></editor-field>
<editor-field name="Type"></editor-field>
<editor-field name="average_cost"></editor-field>
<editor-field name="install_time"></editor-field>
<editor-field name="remove_time"></editor-field>
<editor-field name="Active"></editor-field>
<editor-field name="DateRevised"></editor-field>
</fieldset>
<fieldset class="whse region-2">
<legend>Warehouse Material Stock</legend>
<div data-editor-template="whseTable"/>
</fieldset>
<fieldset class="ugli region-3">
<legend>UG Labor Units (Install)</legend>
<div data-editor-template="ugliTable"/>
</fieldset>
<fieldset class="uglr region-4">
<legend>UG Labor Units (Remove)</legend>
<div data-editor-template="uglrTable"/>
</fieldset>
</div>
<table id="cuTable" class="display nowrap" style="width: 100%">
<thead>
<tr>
<th>ID</th>
<th style="text-align:center">Unit</th>
<th>Description</th>
<th style="text-align:center">Type</th>
<th style="text-align:center">Avg Cost</th>
<th>Install Time</th>
<th>Remove Time</th>
<th>Active</th>
<th style="text-align:center">Revised Date</th>
</tr>
</thead>
</table>
</div>
Answers
Editor will create a
div.DTE_Field_Type_datatable_infoelement as a child of thelabeland insert the controls into there. We need to use some styling to modify the display to get what you want.First step is to add
className: 'block'to your field configuration object. See this example.That will cause the
labeland container to stack:Then you'll need CSS something like:
You may wish to then alter the display options for the buttons / search as well:
A bit of tweaking of the CSS and hopefully you'll get the layout you want
Allan
Thanks Allan, you've definitely pointed me in the right direction.
Using the block and some minor tweaks in the CSS, I managed to position the buttons above the tables and align them in a row, rather than stacked. However, I think I'm seeing something either not quite right or I'm missing something.
Take a look at the live here
Although I have the buttons setup in the topStart and paging in the topEnd (no search needed on the subtables)...the buttons are not lining up with the paging for the subtables. In looking at the html, it appears that the buttons are not in the topStart layout row at all.
If you look at the Warehouse Material subtable, I actually pasted the buttons into the layout-row using devtools just to satisfy myself that I was looking at the right thing.
Would the layout work differently for datatable fields like my subtables are? Or is it the more likely answer...:)... where I'm just missing something?
Are you able to give me a link to the page showing the issue so I can use it to formulate some CSS for it? Editor messes around with the DOM structure a bit, so it isn't as trivial as using
layoutlike in a normal DataTable. It will be possible, it just needs the right CSS incantation.Allan
Unfortunately, no...this is an internal site. The live.datatables link I provided was the best I could do in that regard.
I'll work through it on my side and see what I can come up with. Thanks