EasyUI Forum
March 28, 2024, 08:58:53 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: [SOLVED] subgrid columns not accepting width....  (Read 7235 times)
2plus2
Jr. Member
**
Posts: 75


View Profile
« 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.

Code:
           <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">&nbsp;</th>
                    </tr>  
                </thead>  
            </table>  
        </div>

Code:
           $('#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.
« Last Edit: August 17, 2017, 12:41:00 PM by 2plus2 » Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #1 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.
Logged
2plus2
Jr. Member
**
Posts: 75


View Profile
« Reply #2 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.
Logged
2plus2
Jr. Member
**
Posts: 75


View Profile
« Reply #3 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.
« Last Edit: August 16, 2017, 11:11:41 PM by 2plus2 » Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #4 on: August 17, 2017, 08:20:32 AM »

Please look at this example http://code.reloado.com/ozigaf3/edit
Logged
2plus2
Jr. Member
**
Posts: 75


View Profile
« Reply #5 on: August 17, 2017, 12:40:14 PM »

Perfect. Thanks.

Much appreciated.
Logged
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!