Build border layout into expanded row on edatagrid

[Punkerr]

Hi sworthy, I tried to use border layout working just like the demo: http://www.jeasyui.com/tutorial/layout/layout.php, but it doesn't work, the question is: ¿¿there is a conflict with the class??:

Code:

$('#dg').edatagrid({
    title: 'eDataGrid',
    width:400,
    height:250,
    singleSelect:true,
    fitColumns:true,
    columns:[[
        {field:'itemid',title:'Item ID',width:80},
        {field:'productid',title:'Product ID',width:100,editor:'text'},
        {field:'listprice',title:'List Price',width:80,align:'right',editor:{type:'numberbox',options:{precision:1}}},
        {field:'unitcost',title:'Unit Cost',width:80,align:'right',editor:'numberbox'}
    ]],
    view:detailview,
    detailFormatter: function(rowIndex, rowData){
         return '<div class="easyui-layout" style="width:400px;height:200px;">'+
                '<div region="west" split="true" title="Ventas" style="width:150px;">'+
                    '<p style="padding:5px;margin:0;">Sales last 3 years:</p>'+
                        '<ul>'+
                            '<li>Store A 98</li>'+
                            '<li>Store B 94</li>'+
                            '<li>Store C 52</li>'+
                            '<li>Store D 62</li>'+
                        '</ul>'+
                '</div>'+
                '<div id="content" region="center" title="Radar de Ventas" style="padding:5px;">'+
                    'STATISTICTS IMAGE'+
                '</div>'+
                '</div>';
    }
    
}).edatagrid('loadData', [
    {"productid":"FI-SW-01","unitcost":10.00,"status":"P","listprice":16.50,"attr1":"Large","itemid":"EST-1"},
    {"productid":"K9-DL-01","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-2"},
    {"productid":"RP-SN-01","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Venomless","itemid":"EST-3"},
    {"productid":"RP-LI-02","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Green Adult","itemid":"EST-5"},
    {"productid":"FL-DSH-01","unitcost":12.00,"status":"P","listprice":58.50,"attr1":"Tailless","itemid":"EST-6"},
    {"productid":"FL-DSH-01","unitcost":12.00,"status":"P","listprice":23.50,"attr1":"With tail","itemid":"EST-7"},
    {"productid":"FL-DLH-02","unitcost":12.00,"status":"P","listprice":93.50,"attr1":"Adult Female","itemid":"EST-8"},
    {"productid":"FL-DLH-02","unitcost":12.00,"status":"P","listprice":93.50,"attr1":"Adult Male","itemid":"EST-9"},
    {"productid":"RP-SN-01","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Rattleless","itemid":"EST-4"},
    {"productid":"AV-CB-01","unitcost":92.00,"status":"P","listprice":193.50,"attr1":"Adult Male","itemid":"EST-10"}
]);

I'm using just the same example that you provided me: http://jsfiddle.net/6NXjB/

Thanks in advance!!

[stworthy]

Please refer to the updated example http://jsfiddle.net/6NXjB/2/.

[Punkerr]

Great! you're awesome man, thanks for all help!