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.
$('#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.