how to add a toolbar in a subgrid when expanding a master edatagrid row

[Jeffrey AnnSheila]

Hi bro! I am dealing with an editable subgrid. When I expand or add a row in a master edatagrid, I need a toolbar appear on top of every subgrid when the row of master grid is expanded, so that I can add, save, delete and cancle the row of subgrid. how to do it? Thanks in advance!

[stworthy]

To add a toolbar, just need to define the 'toolbar' property when creating the datagrid.

Code:

onExpandRow: function(index,row){
    var ddv = $(this).datagrid('getRowDetail',index).find('table.ddv');
    ddv.datagrid({
        toolbar:[{
        	...
        }],
        ...
    });
)

[Jeffrey AnnSheila]

HOW TO GET THE NESTED SUBGRID?

I try your code in my page, and modify it like this:
<table id="dg"></table>
<div id="toolbar" hidden="hidden">
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="javascript:$('#dg').edatagrid('destroyRow')">new</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="javascript:$('#dg').edatagrid('destroyRow')">delete</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="javascript:$('#dg').edatagrid('saveRow')">save</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-undo" plain="true" onclick="javascript:$('#dg').edatagrid('cancelRow')">cancel</a>
    </div>
 var conf = {
         options:{
             //...omit the property setting codes here
            url:"xxxxxxxx",
            saveUrl:"xxxxxxxx",
            destroyUrl:"xxxxxxxx",
            updateUrl:"xxxxxxxx",
            edatagrid:true,
            autoUpdateDetail:false,
            columns:[[......]],
             subgrid:{
                options:{
                    rownumbers:true,
                    striped:true,
                    fitColumns:false,
                    nowrap:false,
                    fixed:true,
                    idField:'id',
                    foreignField:'id',
                    url:"xxxxxxxx",
                    saveUrl:"xxxxxxxx",
                    destroyUrl:"xxxxxxxx",
                    updateUrl:"xxxxxxxx",
                    edatagrid:true,
                    autoUpdateDetail:false,
                    toolbar:[{
                      iconCls: 'icon-add',
                      handler: function(){

                                               //HERE IS THE PROBLEM, HOW TO GET THE NESTED SUBGRID? THE "index"  IS UNDEFINED.

                            var ddv = $(this).datagrid('getRowDetail',index).find('table.ddv');
                            ddv.datagrid('appendRow');
                         }}
                   }],
                   columns:[[......]],
          .....................................
 $(function(){
            $('#dg').datagrid('subgrid', conf);})

I got the firefox debug message :TypeError: $.data(...) is undefined, when the code is running. HOW TO GET THE NESTED SUBGRID?

[stworthy]

You can call 'getSelfGrid' method to get the self datagrid object. Be sure to download the newest 'datagrid-detailview.js' file from http://www.jeasyui.com/extension/datagridview.php

Code:

toolbar:[{
    iconCls:'icon-add',
    handler:function(){
        var dg = $(this).datagrid('getSelfGrid');
        console.log(dg.datagrid('getRows'));
    }
}]

[Jeffrey AnnSheila]

really thank you Stworthy.