how to make nested subgrid row editable

[Jeffrey AnnSheila]

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.

[stworthy]

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:

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);
});

[Jeffrey AnnSheila]

 :-*really thank you stworthy, it works perfectly now.