Title: [SOLVED] Datagrid: possible to have groupview and a subgrid together?
Post by: rannacher on April 10, 2023, 01:11:10 AM
Hi, I use groupview in a table and would like to add a subgrid below every row. I think I cannot simply use "subgrid" or "nested subgrid" because then I loose my grouping mechanism on top. Any idea how this can be done? Example: See https://www.jeasyui.com/tutorial/datagrid/datagrid31_demo.html Here I would like the master grid options to hold groupview but it does not work options:{ view:groupview, groupField: 'company', groupFormatter:function(value,rows) { alert('hello groupview here'); return value + ' - ' + rows.length + ' Item(s)'; }, fitColumns:true, columns:[[ {field:'company',title:'Company Name',width:200}, {field:'contact',title:'Contact Name',width:200}, {field:'country',title:'Country',width:200} ]], data:[ {company:'COMPANY-1',contact:'Minna John',country:'Sweden'}, {company:'COMPANY-1',contact:'Jack Nicholson',country:'Austria'}, {company:'COMPANY-2',contact:'Freddy Mercury',country:'Germany'}, {company:'COMPANY-2',contact:'Alex Bolton',country:'Italy'} ] }
Thx in advance and Greetings from Vienna, Michael!
Title: Re: Datagrid: possible to have groupview and a subgrid together?
Post by: rannacher on April 17, 2023, 03:13:49 PM
Any help? Pleaaaase... ;)))
Title: Re: Datagrid: possible to have groupview and a subgrid together?
Post by: jarry on April 18, 2023, 05:10:08 AM
The 'detailFormatter' function is available to add a detail row in the groupview. Please download the 'datagrid-groupview.js' file from https://www.jeasyui.com/extension/datagridview.php. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>jQuery EasyUI</title> <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css"> <script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.min.js"></script> <script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script> <script type="text/javascript" src="https://www.jeasyui.com/easyui/datagrid-detailview.js"></script> <script type="text/javascript" src="https://www.jeasyui.com/easyui/datagrid-groupview.js"></script> <script> var data = [ {"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"} ]; var detailData = [ {"orderid":"orderid1","quantity":10,"unitcost":100}, {"orderid":"orderid2","quantity":20,"unitcost":200} ];
$(function(){ $('#dg').datagrid({ title:'DataGrid - GroupView', width:800, height:350, rownumbers:true, remoteSort:false, nowrap:false, fitColumns:true, singleSelect:true, data:data, columns:[[ {field:'e',expander:true,fixed:true,width:30}, {field:'productid',title:'Product ID',width:100,sortable:true}, {field:'listprice',title:'List Price',width:80,align:'right',sortable:true}, {field:'unitcost',title:'Unit Cost',width:80,align:'right',sortable:true}, {field:'attr1',title:'Attribute',width:150,sortable:true}, {field:'status',title:'Status',width:60,align:'center'} ]], groupField:'productid', view: groupview, groupFormatter:function(value, rows){ return value + ' - ' + rows.length + ' Item(s)'; }, detailFormatter:function(index,row){ return '<div style="padding:2px;position:relative;"><table class="ddv"></table></div>'; }, onExpandRow: function(index,row){ var ddv = $(this).datagrid('getRowDetail',index).find('table.ddv'); ddv.datagrid({ data:detailData, fitColumns:true, singleSelect:true, rownumbers:true, loadMsg:'', height:'auto', columns:[[ {field:'orderid',title:'Order ID',width:200}, {field:'quantity',title:'Quantity',width:100,align:'right'}, {field:'unitprice',title:'Unit Price',width:100,align:'right'} ]], onResize:function(){ $('#dg').datagrid('fixDetailRowHeight',index); }, onLoadSuccess:function(){ setTimeout(function(){ $('#dg').datagrid('fixDetailRowHeight',index); },0); } }); $('#dg').datagrid('fixDetailRowHeight',index); } }); }); </script> </head> <body> <table id="dg"></table> </body> </html>
Title: [Solved] Re: Datagrid: possible to have groupview and a subgrid together?
Post by: rannacher on April 21, 2023, 02:57:50 PM
fantastic - thank you jarry!!!
|