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

Title: how to add a toolbar in a subgrid when expanding a master edatagrid row
Post by: Jeffrey AnnSheila on June 05, 2016, 07:20:59 PM

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!

Title: Re: how to add a toolbar in a subgrid when expanding a master edatagrid row
Post by: stworthy on June 05, 2016, 08:43:03 PM

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:[{
        	...
        }],
        ...
    });
)

Title: Re: how to add a toolbar in a subgrid when expanding a master edatagrid row
Post by: Jeffrey AnnSheila on June 05, 2016, 11:01:57 PM

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?

Title: Re: how to add a toolbar in a subgrid when expanding a master edatagrid row
Post by: stworthy on June 06, 2016, 01:45:47 AM

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

Title: Re: how to add a toolbar in a subgrid when expanding a master edatagrid row
Post by: Jeffrey AnnSheila on June 06, 2016, 06:10:28 PM

really thank you Stworthy. ;) :D

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: Jeffrey AnnSheila on June 05, 2016, 07:20:59 PM