JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › Data Grid › Export TreeGrid Excel error
- This topic has 2 replies, 2 voices, and was last updated 3 years, 5 months ago by
Anonymous.
-
AuthorPosts
-
March 23, 2021 at 3:26 pm #101658
Anonymous
InactiveHi,
I have an error with the export in Excel with the TreeGrid. For the same grid, same datasource, the export in csv and xml works, the export in Excel, HTML and PDF not working (error on undefined variable of smart library). This is the used dataSource:
var data= [{“isFat”:”1″,”Seq”:”0″,”Chi”:”Test1″,”DesComp”:”Description Test1 “,”Qta”:0,”QtaFat”:0,”level”:”0″,”csComp”:0,”csTot”:0,”idOrd”:0,”idOrdFat”:0,”idTree”:0,”csMIN”:0,”csMAX”:0,”csAVG”:0,”codFor”:0,”impoRow”:0,”impoPN”:0,”impoPNTot”:0,”isDoc”:”0″},{“levFat”:”1″,”Fat”:”Test1″,”isFat”:”0″,”Seq”:”10″,”Chi”:”Test2″,”DesComp”:”Description Test2″,”Qta”:0,”QtaFat”:0,”level”:”1″,”csComp”:0,”csTot”:0,”idOrd”:1,”idOrdFat”:0,”idTree”:0,”csMIN”:0,”csMAX”:0,”csAVG”:0,”codFor”:0,”impoRow”:0,”impoPN”:0,”impoPNTot”:0,”isDoc”:”0″},{“levFat”:”1″,”Fat”:”Test1″,”isFat”:”0″,”Seq”:”20″,”Chi”:”Test3″,”DesComp”:”Description Test3″,”Qta”:0,”QtaFat”:0,”level”:”1″,”csComp”:0,”csTot”:0,”idOrd”:2,”idOrdFat”:0,”idTree”:0,”csMIN”:0,”csMAX”:0,”csAVG”:0,”codFor”:0,”impoRow”:0,”impoPN”:0,”impoPNTot”:0,”isDoc”:”0″},{“levFat”:”1″,”Fat”:”Test1″,”isFat”:”0″,”Seq”:”30″,”Chi”:”Test4″,”DesComp”:”Description Test4″,”Qta”:0,”QtaFat”:0,”level”:”1″,”csComp”:0,”csTot”:0,”idOrd”:3,”idOrdFat”:0,”idTree”:0,”csMIN”:0,”csMAX”:0,”csAVG”:0,”codFor”:0,”impoRow”:0,”impoPN”:0,”impoPNTot”:0,”isDoc”:”0″}]
and this is the js code:
function loadPackage(data) {
for (var j = 0; j < data.length; j++) {
if (data[j].idOrd == 0) {
data[j].idOrdFat = ‘null’;
break;
}
}
var grid = document.querySelector(‘#gridPack’);
window.Smart(‘#gridPack’, class {
get properties() {
return {
dataSource: new Smart.DataAdapter(
{
dataSource:data,
keyDataField: ‘idOrd’,
parentDataField: ‘idOrdFat’,
id: ‘idOrd’,
dataFields:
[
‘idOrd: number’,
‘idOrdFat: number’,
‘Chi: string’,
‘level: string’,
‘Seq: string’,
‘DesComp: string’,
‘isDoc: string’,
]
}),
selection: {
enabled: true,
mode: ‘extended’
},
checkBoxes: {
visible: true,
hasThreeStates: true
},
behavior: { columnResizeMode: ‘growAndShrink’ },
onRowInit: function(index, row) {
if (row.id == 2) {
row.expanded = true;
}
},
columns: [
/*{ label: ‘idOrd’, dataField: ‘idOrd’ },
{ label: ‘idOrdFat’, dataField: ‘idOrdFat’},*/
{ label: ‘Chi’, dataField: ‘Chi’, width: 600, formatFunction(args) {
if (args.row.data[‘isDoc’]==’0′){
args.template = ‘<b><div style=”color:black;”> <span class=”fa fa-cogs fa-cogs”></span> ’ + args.value + ‘</div></b>’;
}else{
args.template = ‘<div style=”color:darkblue; font-size: 14x;”> <span class=”far fa-file”></span> ’ + args.value + ‘</div>’;
}
}
},
{ label: ‘level’, dataField: ‘level’, columnGroup: ‘level’, width: 100 },
{ label: ‘Seq’, dataField: ‘Seq’, columnGroup: ‘Seq’, width: 100 },
{ label: ‘DesComp’, dataField: ‘DesComp’,formatFunction(args) {
if (args.row.data[‘isDoc’]==’0′){
args.template = ‘<b><div style=”color:black;”>’ + args.value + ‘</div></b>’;
}else{
args.template = ‘<div style=”color:darkblue; font-size: 14x;”>’ + args.value + ‘</div>’;
}
} }
]
}
}
});
var xlsxBtn = document.querySelector(‘#xlsxBtn’);
var pdfBtn = document.querySelector(‘#pdfBtn’);
var csvBtn = document.querySelector(‘#csvBtn’);
var tsvBtn = document.querySelector(‘#tsvBtn’);
var xmlBtn = document.querySelector(‘#xmlBtn’);
var htmlBtn = document.querySelector(‘#htmlBtn’);
xlsxBtn.addEventListener(‘click’, () => {
grid.exportData(‘xlsx’);
});
pdfBtn.addEventListener(‘click’, () => {
grid.exportData(‘pdf’);
});
csvBtn.addEventListener(‘click’, () => {
grid.exportData(‘csv’);
});
tsvBtn.addEventListener(‘click’, () => {
grid.exportData(‘tsv’);
});
xmlBtn.addEventListener(‘click’, () => {
grid.exportData(‘xml’);
});
htmlBtn.addEventListener(‘click’, () => {
grid.exportData(‘html’);
});
}
The HTML code is similar to this example.
Thank you in advance.
Walter
March 23, 2021 at 3:53 pm #101660admin
KeymasterHi Walter,
The issue here is in the columns definition. Remove the unused columnGroup settings.
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/March 23, 2021 at 5:08 pm #101663Anonymous
InactiveHi Peter,
thank you for the reply, without the columnGroup settings now the Excel export works.
Best Regards,
Walter -
AuthorPosts
- You must be logged in to reply to this topic.