I have a template like the below in Django
{% extends 'reports/base.html' %}
{% block title %} Report Name {% endblock %}
{% block content %}
<!--
<div class="container-fluid">
<div class="row"><div class="col">
<ul class="list-group">
{% for r in report_list %}
<li class="list-group-item"><a class="link-offset-2 link-underline link-underline-opacity-0" href={% url 'reports' report_id=r.id %}>{{ r.report_name }}</a></a></li>
{% endfor %}
</ul>
</div><div class="col"></div><div class="col"></div></div>
</div>-->
<div class="demo-container">
<div id="sales"></div>
<div id="sales-popup"></div>
</div>
<script>
$(() => {
let drillDownDataSource = {};
$('#sales').dxPivotGrid({
allowSortingBySummary: true,
allowSorting: true,
allowFiltering: true,
allowExpandAll: true,
showBorders: true,
showRowGrandTotals: false,
showColumnGrandTotals: false,
fieldChooser: {
enabled: true,
},
export: {
enabled:true
},
onCellClick(e) {
if (e.area === 'data') {
const pivotGridDataSource = e.component.getDataSource();
const rowPathLength = e.cell.rowPath.length;
const rowPathName = e.cell.rowPath[rowPathLength - 1];
const popupTitle = `${rowPathName || 'Total'} Drill Down Data`;
drillDownDataSource = pivotGridDataSource.createDrillDownDataSource(e.cell);
salesPopup.option('title', popupTitle);
salesPopup.show();
}
},
onExporting: function(e) {
var workbook = new ExcelJS.Workbook();
var worksheet = workbook.addWorksheet('Main sheet');
DevExpress.excelExporter.exportPivotGrid({
worksheet: worksheet,
component: e.component,
customizeCell: function(options) {
var excelCell = options;
excelCell.font = { name: 'Arial', size: 12 };
excelCell.alignment = { horizontal: 'left' };
}
}).then(function() {
workbook.xlsx.writeBuffer().then(function(buffer) {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'PivotGrid.xlsx');
});
});
e.cancel = true;
},
dataSource: {
fields: [
/*{
caption: 'primary_label',
width: 120,
dataField: 'primary_label',
area: 'row',
}, */{
'caption': 'secondary_label',
'dataField': 'secondary_label',
'width': 150,
'area': 'row',
'expanded': true
},
{
caption: 'account',
dataField: 'account',
width: 150,
area: 'row',
expanded: true
},
{
caption: 'category',
dataField: 'category',
width: 150,
area: 'row',
expanded: true
},
{
caption: 'subcategory',
dataField: 'subcategory',
width: 150,
area: 'row',
expanded: true
}, {
dataField: 'period',
dataType: 'date',
area: 'column',
}, {
caption: 'value_eth',
dataField: 'value_eth',
dataType: 'number',
summaryType: 'sum',
//format: 'Number',
format: {
type: "fixedPoint",
precision: 0
},
area: 'data',
},
// Filters
{
area: 'filter',
dataField: 'secondary_label',
filterType: 'include',
filterValues: ['1.1. Staked Assets', '3.2. Operating Performance']
},
{
area: 'filter',
dataField: 'account',
filterType: 'include',
filterValues: ['3.2.1. Net Revenue', '3.2.2. Cost of Revenue','1.1.1. Staked ETH']
}],
store: sales,
},
});
const salesPopup = $('#sales-popup').dxPopup({
width: 1360,
height: 600,
//resizeEnabled:true,
contentTemplate(contentElement) {
$('<div />')
.addClass('drill-down')
.dxDataGrid({
width: 1260,
height: 500,
scrolling: {
mode: 'virtual',
},
export: {
enabled:true,
allowExportSelectedData: true
},
onExporting(e) {
const workbook = new ExcelJS.Workbook();
const worksheet = workbook.addWorksheet('LIDO');
DevExpress.excelExporter.exportDataGrid({
component: e.component,
worksheet,
autoFilterEnabled: true,
}).then(() => {
workbook.xlsx.writeBuffer().then((buffer) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'LIDO.xlsx');
});
});
e.cancel = true;
},
columns: ['period', 'primary_label', 'secondary_label', 'account','base_token_address','value_eth'],
})
.appendTo(contentElement);
},
onShowing() {
$('.drill-down')
.dxDataGrid('instance')
.option('dataSource', drillDownDataSource);
},
onShown() {
$('.drill-down')
.dxDataGrid('instance')
.updateDimensions();
},
}).dxPopup('instance');
});
</script>
{% endblock %}
The portion where the field list definition starts, I wanted to make this dynamic and get the values from a view which has logic to determine the field list.
dataSource: {
fields: [
Have the following on the view logic
field_list = ['col1','col2']
return render(request, 'reports/report.html', context={'field_list': field_list})
I tried using the Jinja expression within the javascript and it throws syntax error, how can I fix this.
dataSource: {
fields: [
{% for f in field_list %}
{
'caption': f,
'dataField': f,
'width': 150,
'area': 'row',
'expanded': true
},
{% endfor %}
