Title: how to make nested subgrid row editable
Post by: Jeffrey AnnSheila on May 17, 2016, 09:03:35 PM
i want to use nested subdatagrids with every one can be editable, the total grids are four level, one is the root grid, which is the master one, and the second grid is the children of it, and the next one is the subdatagrid of the second one, until the bottom grid repeats. i read the demo, but still unclear how to make the every subgrid editable through edatagrid. need someone help.
Title: Re: how to make nested subgrid row editable
Post by: stworthy on May 18, 2016, 08:58:03 AM
The simplest way to solve this issue is to apply the 'edatagrid' plugin on the subgrid. The newest 'datagrid-detailview.js' file can be downloaded from http://www.jeasyui.com/extension/datagridview.php Please try this code: var conf = {
options:{
edatagrid:true,
autoSave:true,
autoUpdateDetail:false,
fitColumns:true,
columns:[[
{field:'company',title:'Company Name',width:200,editor:'text'},
{field:'contact',title:'Contact Name',width:200,editor:'text'},
{field:'country',title:'Country',width:200,editor:'text'}
]],
data:[
{company:'Speed Info',contact:'Minna John',country:'Sweden'}
]
},
subgrid:{
options:{
edatagrid:true,
autoSave:true,
autoUpdateDetail:false,
fitColumns:true,
edatagrid:true,
foreignField:'companyid',
columns:[[
{field:'orderdate',title:'Order Date',width:200,editor:'datebox'},
{field:'shippeddate',title:'Shipped Date',width:200,editor:'datebox'},
{field:'freight',title:'Freight',width:200,editor:'numberbox'}
]],
data:[
{orderdate:'08/23/2012',shippeddate:'12/25/2012',freight:9734}
]
},
subgrid:{
options:{
edatagrid:true,
autoSave:true,
autoUpdateDetail:false,
foreignField:'orderid',
fitColumns:true,
columns:[[
{field:'price',title:'Unit Price',width:200,align:'right',editor:'numberbox'},
{field:'quantity',title:'Quantity',width:200,align:'right',editor:'numberbox'},
{field:'discount',title:'Discount',width:200,align:'right',editor:'numberbox',formatter:function(value){
return value*100+'%'
}}
]],
data:[
{price:923,quantity:2312,discount:0.2}
]
},
subgrid:{
options:{
fitColumns:true,
foreignField:'pid',
singleSelect:true,
columns:[[
{field:'pnumber',title:'Product Number',width:200},
{field:'pname',title:'Product Name',width:200},
{field:'supplier',title:'Supplier',width:200}
]],
data:[
{pnumber:'00100823',pname:'Canon PowerShot A1300',supplier:'Canon'},
{pnumber:'12023423',pname:'Cisco RV110W-A-NA-K9',supplier:'Cisco'},
{pnumber:'82312393',pname:'Nikon COOLPIX L26 16.1 MP',supplier:'Nikon'}
]
}
}
}
}
};
$(function(){
$('#dg').edatagrid({
title:'DataGrid - Nested SubGrid',
width:700,
height:300
}).datagrid('subgrid', conf);
});
Title: Re: how to make nested subgrid row editable
Post by: Jeffrey AnnSheila on May 18, 2016, 06:19:39 PM
:-*really thank you stworthy, it works perfectly now. ;)
|