Title: Using 2 datagrid extensions simultaneously
Post by: sectioni on November 07, 2021, 10:21:53 AM
Hello,
I would like to use the datagrid-groupview.js extension with the datagrid-scrollview.js extension.
But both are enabled by the "view" parameter of the datagrid.
Is it possible to use both?
And if not, will you be willing to add this option?
Title: Re: Using 2 datagrid extensions simultaneously
Post by: jarry on November 09, 2021, 01:32:30 AM
These two views can't be used together. Please try to use the scrollview with 'detailFormatter' function to display a detail datagrid.
Title: Re: Using 2 datagrid extensions simultaneously
Post by: sectioni on November 09, 2021, 12:43:41 PM
Correct me if I'm wrong but that won't get me the UI of your datagrid demo "Group Rows in Datagrid"..
The details formatter just renders content and not grid cells that will be attached to the main column header...
Title: Re: Using 2 datagrid extensions simultaneously
Post by: jarry on November 09, 2021, 07:42:55 PM
The detail content can display any data in any format including another datagrid component. Please refer to this code. <!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">
<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-scrollview.js"></script>
<script>
$(function(){
var rows = [];
for(var i=1; i<=8000; i++){
var amount = Math.floor(Math.random()*1000);
var price = Math.floor(Math.random()*1000);
rows.push({
inv: 'Inv No '+i,
date: $.fn.datebox.defaults.formatter(new Date()),
name: 'Name '+i,
amount: amount,
price: price,
cost: amount*price,
note: 'Note '+i
});
}
$('#dg').datagrid({
detailFormatter: function(rowIndex, rowData){
return '';
},
onExpandRow(index,row){
var dg = $(this);
var detail = dg.datagrid('getRowDetail', index);
if (!detail.hasClass('not-empty')){
detail.addClass('not-empty');
var data = [];
var len = Math.max(2,Math.floor(Math.random()*20));
for(var i=1; i<=len; i++){
data.push({
inv: row.inv,
val1: Math.floor(Math.random()*1000),
val2: Math.floor(Math.random()*1000)
})
}
var t = $('<table></table>').appendTo(detail).datagrid({
columns: [[
{field:'inv',title:'Inv No',width:100},
{field:'val1',title:'Value1',width:100,align:'right'},
{field:'val2',title:'Value2',width:100,align:'right'}
]],
data: data,
rownumbers: true,
onLoadSuccess: function(){
dg.datagrid('fixDetailRowHeight', index)
}
});
dg.datagrid('fixDetailRowHeight', index)
}
}
});
$('#dg').datagrid('loadData', rows);
});
</script>
</head>
<body>
<h1>DataGrid - VirtualScrollView with Detail Rows</h1>
<table id="dg" style="width:700px;height:250px"
title="DataGrid - VirtualScrollView with Detail Rows"
data-options="view:scrollview,rownumbers:true,singleSelect:true,autoRowHeight:false,pageSize:50">
<thead>
<tr>
<th field="inv" width="80">Inv No</th>
<th field="date" width="90">Date</th>
<th field="name" width="80">Name</th>
<th field="amount" width="80" align="right">Amount</th>
<th field="price" width="80" align="right">Price</th>
<th field="cost" width="90" align="right">Cost</th>
<th field="note" width="100">Note</th>
</tr>
</thead>
</table>
</body>
</html>
Title: Re: Using 2 datagrid extensions simultaneously
Post by: sectioni on November 10, 2021, 02:03:03 AM
Yeah but it's not the same thing as your group extension.
This renders a separate datagrid for each row.
Not one datagrid divided into groups
|