Title: [SOLVED] subgrid columns not accepting width....
Post by: 2plus2 on August 15, 2017, 05:13:56 PM
Howdy... We have a datagrid with a subgrid and a sub-subgrid. The columns of the both the subgrid and sub-subgrid are getting messed up and don't respect the width attribute. <table id="styleDesignLoadGrid">
<thead>
<tr>
<th field="style name" width="120" sortable="true">style name</th>
<th field="Body Type" width="120" sortable="true">body type</th>
<th field="DesignsTotal" width="90" sortable="true"># of designs</th>
<th field="DesignsSuccessTotal" width="90" sortable="true"># imported</th>
<th field="Status" width="90" sortable="true">import status</th>
<th field="Message" width="200" sortable="true">message</th>
<th field="Niente" width="500"> </th>
</tr>
</thead>
</table>
</div>
$('#styleDesignLoadGrid').datagrid({
title: 'Bulk Import Review',
rownumbers: false,
singleSelect: true,
striped: true,
remoteSort: false,
sortName: 'Status',
view: detailview,
detailFormatter: function (index, row) {
return '<div style="padding:2px"><table class="ddv"></table></div>';
},
onExpandRow: function (index, row) {
var ddv = $(this).datagrid('getRowDetail', index).find('table.ddv');
ddv.datagrid({
view: detailview,
detailFormatter: function (dvvIndex, dvvRow) {
return '<div style="padding:2px"><table class="ddvSub"></table></div>';
},
fitColumns: false,
singleSelect: true,
rownumbers: false,
loadMsg: '',
height: 'auto',
columns: [[
{ field: 'Factory', title: 'factory', width: '100' },
{ field: 'CGP Design #', title: 'cgp #', width: '150' },
{ field: 'size', title: 'size', width: '100' },
{ field: 'color', title: 'color', width: '100' },
{ field: 'PDQ/Pivate Label Minimum Order Quantity', title: ' min order qty', width: 120 },
{ field: 'New Item Lead Time (Days)', title: 'new item lt', width: 120 },
{ field: 'Low Season Lead Time (Days)', title: 'low season lt', width: 100 },
{ field: 'High Season Lead Time (Days)', title: 'high season lt', width: 100 },
{ field: 'Division', title: 'division', width: 100 },
{ field: 'Category', title: 'category', width: 100 },
{ field: 'Type', title: 'type', width: 100 },
{ field: 'Group', title: 'group', width: 100 },
{ field: 'Saucer Yes/No', title: 'saucer', width: 100 },
{ field: 'Drain Hole Yes/No', title: 'drain hole', width: 100 },
{ field: 'Base Pads Yes/No', title: 'base pads', width: 100 },
{ field: 'Material', title: 'material', width: 100 },
{ field: 'Production Technique', title: 'prod techn', width: 100 },
{ field: 'Tariff Group', title: 'tariff group', width: 100 },
{ field: 'Tariff Code', title: 'tariff code', width: 100 },
{ field: 'Opening Diamter (ODM) Outside to Outside Opening MM', title: 'opening dia (mm)', width: 100 },
{ field: 'Outside to Outside Opening Inches', title: 'opening dia (in)', width: 100 },
{ field: 'Inside Diameter (IDM) Inside to Inside MM', title: 'inside dia (mm)', width: 100 },
{ field: 'Inside to Inside Inches', title: 'inside dia (in)', width: 100 },
{ field: 'Widest / Length (WDM) MM', title: 'w/l (mm)', width: 100 },
{ field: 'Widest / Length Inches', title: 'w/l (in)', width: 100 },
{ field: 'Height (HT) MM', title: 'h (mm)', width: 100 },
{ field: 'Height (HT) Inches', title: 'h (in)', width: 100 },
{ field: 'Window Box / Oval Width (WI) MM', title: 'win box (mm)', width: 100 },
{ field: 'Window Box / Oval Width Inches', title: 'win box (in)', width: 100 },
{ field: 'Weight (WT) KG', title: 'w (kg)', width: 100 },
{ field: 'Weight (WT) LBS', title: 'w (lbs)', width: 100 },
{ field: 'Round / Square CBM', title: 'r/s (cbm)', width: 100 },
{ field: 'Round / Square CFT', title: 'r/s (cf)', width: 100 },
{ field: 'Rectangle / Oval CBM', title: 'r/o (cbm)', width: 100 },
{ field: 'Rectangle / Oval CFT', title: 'r/o (cf)', width: 100 },
{ field: 'LoadabilityTotal', title: '# of loads', width: 100 },
{ field: 'LoadabilitySuccessTotal', title: '# imported', width: 100 },
{ field: 'Status', title: 'import status', width: 100 },
{ field: 'Message', title: 'message', width: 100 }
]],
data: row.Designs,
onResize: function () {
$('#styleDesignLoadGrid').datagrid('fixDetailRowHeight', index);
},
onLoadSuccess: function () {
setTimeout(function () {
$('#styleDesignLoadGrid').datagrid('fixDetailRowHeight', index);
}, 0);
},
onExpandRow: function (indexSub, rowSub) {
var ddvSub = $(this).datagrid('getRowDetail', indexSub).find('table.ddvSub');
ddvSub.datagrid({
fitColumns: false,
singleSelect: true,
rownumbers: false,
loadMsg: '',
height: 'auto',
columns: [[
{ field: 'Factory', title: 'factory', width: 100 },
{ field: 'Port of Origin', title: 'port of origin', width: 100 },
{ field: 'Cost Region', title: 'cost region', width: 100 },
{ field: 'Container Type', title: 'container type', width: 100 },
{ field: 'Packaging Type', title: 'packaging type', width: 100 },
{ field: 'stackable', title: 'stackable', width: 100 },
{ field: 'load method', title: 'load method', width: 100 },
{ field: 'Units Per Pallet / Shipping Carton', title: 'unit per pallet', width: 100 },
{ field: 'Pallets / Shipping Cartons Per Container', title: 'pallets per cont', width: 100 },
{ field: 'Total Units Per Container', title: 'total units per cont', width: 100 },
{ field: 'Container Weight KG', title: 'cont wt (kg)', width: 100 },
{ field: 'Container Weight LBS', title: 'cont wt (lbs)', width: 100 },
{ field: 'Length MM', title: 'length (mm)', width: 100 },
{ field: 'Length Inches', title: 'length (in)', width: 100 },
{ field: 'Width MM', title: 'width (mm)', width: 100 },
{ field: 'Width Inches', title: 'width (in)', width: 100 },
{ field: 'Height MM', title: 'height (mm)', width: 100 },
{ field: 'Height Inches', title: 'height (in)', width: 100 },
{ field: 'Weight KG', title: 'weight (kg)', width: 100 },
{ field: 'Weight Pounds', title: 'weight (lbs)', width: 100 },
{ field: 'Volume CBM', title: 'vol (cbm)', width: 100 },
{ field: 'Volume CF', title: 'vol cf)', width: 100 },
{ field: 'Product Unit 1st Cost', title: 'first cost', width: 100 },
{ field: 'Packaging Cost', title: 'packaging cost', width: 100 },
{ field: 'Label Cost', title: 'label cost', width: 100 },
{ field: 'Other Cost, Manual Entry Explain To Factory', title: 'explain', width: 100 },
{ field: 'Other Cost', title: 'other cost', width: 100 },
{ field: 'Total Cost', title: 'total cost', width: 100 },
{ field: 'Status', title: 'status', width: 100 },
{ field: 'Message', title: 'message', width: 100 }
]],
data: rowSub.Loadability,
onResize: function () {
$('#styleDesignLoadGrid').datagrid('fixDetailRowHeight', indexSub);
},
onLoadSuccess: function () {
setTimeout(function () {
$('#styleDesignLoadGrid').datagrid('fixDetailRowHeight', indexSub);
}, 0);
}
});
$('#styleDesignLoadGrid').datagrid('fixDetailRowHeight', indexSub);
}
});
$('#styleDesignLoadGrid').datagrid('fixDetailRowHeight', index);
}
});
Everything else is working great.
Title: Re: subgrid columns not accepting width....
Post by: stworthy on August 15, 2017, 11:45:26 PM
The field name does not accept white space and other special chars such as 'Pallets / Shipping Cartons Per Container'. Please replace it with 'Pallets_Shipping_Cartons_Per_Container' or other regular name.
Title: Re: subgrid columns not accepting width....
Post by: 2plus2 on August 15, 2017, 11:50:25 PM
Thanks for the quick response. That's a bummer, now I have to rebuild my JSON object too. Strange that everything else works "correctly" - even the data load in primary and the two subgrids.
I'll try it out shortly and let you know.
Title: Re: subgrid columns not accepting width....
Post by: 2plus2 on August 16, 2017, 11:07:15 PM
P.S. It wasn't the spaces, I did have other "cr4p" in the key fields that was causing the issue. :-P
One more fix needed, since the full code is posted here. When drilling down, the spacing gets messed up between the rows. I'm pretty sure it's because of when and how I'm calling the fixDetailRowHeight method.
Any ideas on how to clean that up? I was trying to follow the Tutorial example.
Title: Re: subgrid columns not accepting width....
Post by: stworthy on August 17, 2017, 08:20:32 AM
Please look at this example http://code.reloado.com/ozigaf3/edit
Title: Re: subgrid columns not accepting width....
Post by: 2plus2 on August 17, 2017, 12:40:14 PM
Perfect. Thanks.
Much appreciated.
|