Datatables.net: Set column width when exporting to XLSX - excel

i have datatables table and i want export content of this table.
Because some headers are so long, i must set specific text of headers. All works fine, but columns with customized text are still so long.
customize: function( xlsx ) {
var sheet = xlsx.xl.worksheets['sheet1.xml'];
// Exported excel custom properties
$('row:first c', sheet).attr( 's', '7' );
$('c[r=B1] t', sheet).text( 'Date' ).;
$('c[r=C1] t', sheet).text( 'Type' );
$('c[r=E1] t', sheet).text( 'Subject' );
}
}]
Pls, is possibe set specific width for columns with "new" - shorter texts?
Thanks for any answers.

"customize": function (xlsx) {
var sheet = xlsx.xl.worksheets['sheet1.xml'];
$('row:first c', sheet).attr( 's', '2' );
$('row:first c is t', sheet).each(function () {
if (this.innerHTML == 'creationdate') { this.innerHTML = 'Date' }
if (this.innerHTML == 'ty') { this.innerHTML = 'Type' }
if (this.innerHTML == 'sub') { this.innerHTML = 'Subject' }
});
}

Use the customize tag inside the excel button to configure the width options
{
title: "",
exportOptions: { ... }
customize: function (xlsx: any) {
var sheet = xlsx.xl.worksheets["sheet1.xml"];
var col = $("col", sheet);
var col = $('col', sheet);
col.each(function () { //update all columns with width 30
$(this).attr('width', 30);
});
$(col[0]).attr("width", 7); // update specific columns
$(col[4]).attr("width", 7); // update specific columns
}
}

Related

Node.js db results to chartist.js reformat

I can hardcode data (labels and series) for a chartist, but need help figuring out how to reformat a db query result.
The app.js contains
const ParmLocation = req.query.ParmLocation
const ParmLine = req.query.ParmLine
console.log("pls2 page requested for " + ParmLocation + " Line " + ParmLine)
// execute a database query
const userToken = db.DBQueryBHBrowser("select PrinterType, count(1) as PCount from printerNames Group by PrinterType");
userToken.then(function(result) {
console.log(JSON.stringify(result.recordset));
res.render('chartpage', {ParmLocation: ParmLocation, ParmLine: ParmLine, S2: result.recordset});
...
The chartpage.js contains below with "data" that works and is in the format needed.
...
var data = {
// A labels array that can contain any sort of values
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
// Our series array that contains series data arrays
series: [[5, 2, 4, 2, 0]]
};
var options = { };
// Create charts with data and options
new Chartist.Line('#TargetRate', data, options);
new Chartist.Line('#SecondShift', {{S2}}, options);
Console log of result.recordset:
[
{ PrinterType: 'Dymo400', PCount: 8 },
{ PrinterType: 'Dymo450', PCount: 30 },
{ PrinterType: 'Dymo4XL', PCount: 13 },
{ PrinterType: 'Laser', PCount: 8 },
{ PrinterType: 'Sato', PCount: 2 }
]
This seemed to work for my purposes
result.recordset.forEach(function(row){
labels.push(Object.values(Object.values(row))[0]);
series.push(Object.values(Object.values(row))[1]);
});
const chartdata = { labels: labels, series: series};

Tabulator - Styling empty cells

I'm trying to style only tabulator empty cells.
I tried with a custom formatter but it seems to be called only on cells with data.
Any suggestion on how to proceed?
Seems to process fields without data just fine ...
https://jsfiddle.net/udpr2680/
new Tabulator("#tabulator", {
data:[{id:4957},{id:39857,price:100}],
columns: [
{ title: "number", field: "id"},
{ title: "price", field: "price",formatter: function(c,fP,onR) { let p = c.getData().price; if (p === undefined) return "undefined"; return p; } },
],
});

Tabulator total Rows count (Column Calculations) gets exported as well

I am using this approach to show the total rows in a table:
var tabulator_table = new Tabulator("#example", {
columns: [
{ title: "name", field: "name", bottomCalc: "count", headerFilter: "input" },
{ title: "Type", field: "Type", bottomCalc: "count", headerFilter: "input" },
],
dataFiltered: function (filters, rows) {
var el = document.getElementById("search_count");
el.innerHTML = rows.length;
},
dataLoad: function (data) {
var el = document.getElementById("total_count");
el.innerHTML = data.length;
},
});
var total_count = $(".tabulator-footer").find('.tabulator-cell:first-child()').text();
$("#total_count").text(total_count);
$(".tabulator-footer").append("<span class='search_count' id='search_count'></span> Of<span class='search_result'>Total Productions: <span class='total_count'></span></span>")
var totalsearch = $("#total_count").text();
var resultsearch = $("#search_count").text();
$(".total_count").text(totalsearch)
$(".search_count").text(totalsearch);
//This CSS will hide the footer:
.tabulator .tabulator-footer .tabulator-calcs-holder .tabulator-row .tabulator-col-resize-handle {
display: none;
}
This works good but there is one issue: when i hit export to excel, it exports the calculation row as well such as:
Name Type
john human
1 1
How do I stop the count row (1 1) from being exported or is there other approach to show total rows.
This is the export function:
document.getElementById("myButtons").addEventListener("click", function () {
tabulator_table.download("xlsx", "name.xlsx", { sheetName: "Info" });
});
I think all you need is the downloadConfig option in your table options. http://tabulator.info/docs/4.6/download#advanced-config
So, just add downloadConfig: {columnCalcs: false} to your table options.
Here is a working example.
https://jsfiddle.net/nrayburn/0hn6v48r/11/

Define advanced criteria for join tables in smartclient grid component for Openbravo ERP

I'm newbie in a OpenBravo ERP system, so I'm sorry if I posted an obvious question.
I have created a custom MDI view in Openbravo ERP, added some input field for filtering product's name in Smarclient's listgrid which contains Orders. I have created a Order datasource and bind it to the Smartclient grid. What I want to achieve is to filter a Order list in the grid by product name which is added in the input text field. I tried with several approaches but without success.
So I came to question is it possible to add join table in AdvancedCriteria in the grid's fetchData function?
Here is a snippet of my code:
isc.ELB_MainView.addProperties({
form: null,
grid: null,
initWidget: function () {
this.grid = isc.OBGrid.create({
setDataSource: function (ds, fields) {
var selectedFields = [],
fs = OB.Constants.FIELDSEPARATOR,
ident = OB.Constants.IDENTIFIER,
fieldNames = ['documentNo', 'documentStatus', 'orderDate', 'accountingDate', 'businessPartner'+fs+ident, 'currency'+fs+ident],
i, j;
for(i = 0; i < fieldNames.length; i++) {
for(j in ds.fields) {
if(ds.fields.hasOwnProperty(j) && j === fieldNames[i]) {
selectedFields.push(ds.fields[j]);
}
}
}
this.Super('setDataSource', [ds, selectedFields]);
this.fetchData();
}
});
this.form = isc.DynamicForm.create({
fields: [{name : "productName",
title: "Product Name",
type : "text",
width: '100%',
change: function(form, item, value, oldValue){
form.main.grid.invalidateCache();
form.main.grid.fetchData({
_constructor: 'AdvancedCriteria',
operator: 'and',
criteria: {
'fieldName': 'orderLineList.product.name',
'operator': 'equals',
'value': value
}
});
this.Super('change', arguments);
}}],
main: this
});
OB.Datasource.get('Order', this.grid, null, true);
this.addMember(this.form);
this.addMember(this.grid);
this.Super("initWidget", arguments);
}
});
Tnx in advance.
Similar question is posted on SmartClient Forum about Joining tables for listgrid datasource.
Here is my solution that will definitely solve your problem:
Create a view that is created by joining tables required for grid and use it as data source

YUI-grid: re load data

Hi guys
I am try to research Yahoo lib- grid. I created a button to display grid. But when i click button N times -> it is displayed N grids. I only want display one grid and after click button it will get data from server again. My code like below:
Please help me., Thank you.
YUI({ filter: 'raw' }).use("jsonp", "node",function (Y) {
function handleJSONP(response) {
// Y.one("#out").setContent(Y.Lang.sub(template, response.user));
YUI().use("datatable-base", function(Y) {
var cols = [
{ key: "id", label: "Transaction No", abbr: "id"},
{ key: "userName", label: "User Name", abbr: "userName"},
{ key: "storeName", label: "StoreName", abbr: "storeName"}
],
data = response.Root,
dt = new Y.DataTable.Base({
columnset: cols,
recordset: data,
summary: "Price sheet for inventory parts",
caption: "These columns have labels and abbrs"
}).render("#example");
});
}
Y.one("#demo_btn").on("click", function (e) {
var url = "server.jsp"+ "?callback={callback}";
Y.jsonp(url, handleJSONP);
});
});
You should be using the DataSource utility to retrieve the data via JSONP. This will allow you to then reload the data via something like
dt.datasource.load();
See the docs for details: DataTable + DataSource.Get + JSON Data
Your handler needs to check if you've already created the table.
var dt;
if (dt === null) {
dt = new Y.DataTable.Base // etc.
}

Resources