I need to export a pivot table to PDF with multiple rows at header. The problem is that it always prints with one header, when actually I need more.
There is a image with the current table pivot table to export. Now the PDF exported looks like this pdf exported.
You can see it's not consistent with the original, this my code so far:
function ExportPdf()
{
var pdfsize = 'a0';
var pdf = new jsPDF('l', 'pt', pdfsize);
var res = pdf.autoTableHtmlToJson(document.getElementsByClassName("pvtTable")[0]);
console.log(res.columns);
console.log(res.data);
pdf.autoTable(res.columns, res.data, {
//pdf.autoTable({
startY: 60,
tableWidth: 'auto',
columnWidth: 'auto',
styles: {
overflow: 'linebreak'
}
});
pdf.save(pdfsize + ".pdf");
}
The problem as I see it is autotable considers first row correctly, but not the rest of them. It is not considering the grouping that pivot makes. Can someone please resolve this.
Related
Html2canvas screenshot is very different from the original picture. How to solve it
This is the address of my code https://github.com/cxm1308377432/html2canvas-screenshot
The above is the interface written with vue-grid-layout, you can modify the layout at will, and the below is the screenshot, but the two are very different
function download() {
var this1 = this;
setTimeout(function() {
html2canvas(this1.$refs.mine, { backgroundColor: null }).then(canvas =>
{
let dataURL = canvas.toDataURL("image/png");
this1.downImg = dataURL; console.log(dataURL);
});
}, 1000);
}
You better have a screenshot to show how different it is. But from my experience when I'm working with that library (html2canvas), the canvas can't render from difference origin. That's CORS problem. Unlucky, I haven't found any solution for this situation.
I read your source but can't found any image url so please update your answer with screenshot.
I have a dashboard which is built using dc.js and i'm using the chart types dc.rowChart and dc.dataTables.
Working Scenario with without conditional formatting:
dc.rowChart - displays Top 50 Customers
dc.dataTable - displays all the fields required and filters the data based on the rowChart.
Working Scenario with conditional Formatting (on datatable rows)
In my HTML, i'm calling the jquery plugin for DataTable (for conditioanl formatting) and here is the code below:
<script>
$(document).ready(function() {
$("#Table").DataTable( {
/*
fnRowCallback: function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
if ($(nRow).find('td:eq(7)').text()<'0') {
$(nRow).find('td:eq(7)').addClass('color');
}
}
*/
columns : [
{ title : "Customer Name" },
{ title : "YoY Rank Change" ,
render: function ( data, type, row ) {
if (data > '0') {
return '<p class="positive">'+data+'</p>';
} else {
return '<p class="negative">'+data+'</p>';
} } },
{ title : "Jan'19 Qty" },
{ title : "Dec'18 Qty" },
{ title : "Nov'18 Qty" },
{ title : "Oct'18 Qty" },
{ title : "Sep'18 Qty" },
{ title : "Aug'18 Qty" }
]
} );
} );
$.extend( true, $.fn.dataTable.defaults, {
"searching": true,
"ordering": false,
"paging": false,
"info": false,
} );
</script>
CSS:
.negative {
background-color:rgba(255,0,0,1.00);
color: #fff;
text-align: center;
}
.positive {
background-color:rgba(50,205,50,1.00);
color: #fff;
text-align: center;
}
ISSUE HERE
When i render the page first time, everything with the datatable with conditional formatting works fine
But when i click on Row Chart to filter datatable based on Customer's, Conditional formatting is gone...
Any help is much appreciated to fix this.
I have tried almost all the stack answers but i'm not able to achieve it.
references used below:
1. How to color code rows in a table dc.datatable?
2. How do I apply conditional formatting using datatables.js?
3. Color code a data table in dc.js
4. How to color code rows in a table dc.datatable? ( This is opted out as i dont want to color code entire row)
#Gordon my survivor at all times.. Looking for your inputs please!!
I see that you are still on dc.js 2.0, so I didn't attempt to port this to dc.datatables.js or dc-tableview. I still think that would be more maintainable.
As I noted in the comments, $.DataTable is a one-way transformation: once you have done this, there is no way to update the table, because dc.dataTable doesn't recognize the DOM structure anymore, and DataTable doesn't have a way to reinitialize.
There might be some smart way to get DataTables to update the data (and this is what the libraries do). It's also madly inefficient to first build a table and then construct a DataTable using the DOM as a data source.
But whatever, let's just get this working by building the DataTable from scratch every time the dc.dataTable is drawn.
The way to do this is to listen for the table's pretransition event, remember if we've already initialized DataTable, and if we have, destroy the old instance:
var dt = null;
table.on('pretransition', function() {
if(dt)
dt.destroy();
dt = $("#dc-data-grid").DataTable( {
// as before
} );
});
Fork of your fiddle. I had to fix a few other things, but I won't go into the details.
This looks to be answered many different times but I can't seem to get it working with my implementation. I am trying to format and limit the data in a sap.m.Input element. I currently have the following:
var ef_Amount = new sap.m.Input({
label: 'Amount',
textAlign: sap.ui.core.TextAlign.Right,
value: {
path: '/amount',
type: 'sap.ui.model.type.Currency'
}
});
The first problem is that it kind of breaks the data binding. When I inspect the raw data (with Fiddler) submitted to the server it is an array like this:
"amount": [1234.25,null]
The server is expecting a single number and as such has issues with the array.
When I use the following, the binding works as desired but no formatting is performed.
var ef_Amount = new sap.m.Input({
label: 'Amount',
textAlign: sap.ui.core.TextAlign.Right,
value: '{/amount}'
});
The second problem is that the data entered is not limited to numbers.
I have tried using sap.m.MaskedInput instead but I don't like the usage of the placeholders because I never know the size of the number to be entered.
And lastly, it would be nice if when focus is placed on the input field, that all formatting is removed and re-formatted again when focus lost.
Should I be looking into doing this with jQuery or even raw Javascript instead?
Thank you for looking.
the array output is a normal one according to documentation. So you need to teach your server to acccept this format or preprocess data before submission;
this type is not intended to limit your data input;
good feature, but ui5 does not support this, because the Type object has no idea about control and it's events like "focus" it only deals with data input-output. So you have to implement this functionality on your own via extending the control or something else.
I would suggest using amount and currency separately. It's likely that user should be allowed to enter only valid currency, so you can use a combobox with the suggestions of the available currencies.
So, after much work and assistance from #Andrii, I managed to get it working. The primary issue was that onfocusout broke the updating of the model and the change event from firing. Simply replacing onfocusout with onsapfocusleave took care of the issues.
The final code in the init method of my custom control:
var me = this;
var numberFormat = sap.ui.core.NumberFormat.getCurrencyInstance({maxFractionDigits: 2});
me.addEventDelegate({
onAfterRendering: function() {
// for formatting the figures initially when loaded from the model
me.bindValue({
path: me.getBindingPath('value'),
formatter: function(value) {
return numberFormat.format(value);
}
});
},
onfocusin: function() {
// to remove formatting when the user sets focus to the input field
me.bindValue(me.getBindingPath('value'));
},
onsapfocusleave: function() {
me.bindValue({
path: me.getBindingPath('value'),
formatter: function(value) {
return numberFormat.format(value);
}
});
}
});
I am using bootstrap data-tables Datatables and bootstrap-taginput with typehead.js. I am new with bootstrap data-tables.
Here is the layout of my bootstrap data-tables Example and please consider Bootstrap tagging input box on top.
I want to search data-tables records with bootstrap tagging elements. but somehow i am unable to search with bootstrap tagging.
Thanks in advance.
If you start out with an empty array of the data you've got on your table you could do something clever by replacing the built in search box. In the example I'm linking to I don't care about one of the columns and the other columns need a little formatting:
var words = [];
var table = $('#example').DataTable({
"columns": [
null, {
"render": function(data, type, row) {
~words.indexOf(data) || words.push(data);
return data;
}
}, {
"render": function(data, type, row) {
var d = data.replace(/\, /g, " ");
~words.indexOf(d) || words.push(d);
return data.split(", ").join("<br/>");
}
}
],
"initComplete": function() {
var searchBox = $("#example_wrapper").find("input[type='search']");
var searchBoxHolder = searchBox.parent();
searchBox.empty().remove();
searchBoxHolder.append($("<input/>", {
"type": "text"
}).typeahead({
source: words,
afterSelect: function(word) {
table.search(word).draw();
}
}).on("keyup", function(x) {
if (words.indexOf($(x.target).val()) === -1) {
table.search($(x.target).val()).draw();
}
}));
}
});
Basically what we're doing here is creating a blank array of search terms then iterating over each second and third cell and adding the term to the array if it doesn't exist. In the case of the third cell I need to clear some formatting (extra comma). Then we get the original search box and it's parent. Remove the original and append the new one to the parent. We then set it up as a typeahead with the list of search terms. We need to make sure it still acts like the original so we add the keyup function. I hope that makes sense.
Working example is here, hope that helps.
Is there a simpler list type than DataGrid that can be connected to a store for Dojo?
I would like the data abstraction of the store, but I don't need the header and cell stucture. I would like to be more flexible in the representation of the datalines, where maybe each line calls an function to get laid out...
You ask a really good question. I actually have a blog post that is still in draft form called "The DataGrid should not be your first option".
I have done a couple thing using the store to display data from a store in a repeated form.
I have manually built an html table using dom-construct and for each.
var table = dojo.create('table', {}, parentNode);
var tbody = dojo.create('tbody', {}, table); // a version of IE needs this or it won't render the table
store.fetch({ // this is a dojo.data.ItemFileReadStore, but you cana dapt to the dojo.Store API
query: {},
onComplete: function(itms) {
dojo.forEach(itms, function(itm, idx) {
var tr = dojo.create('tr', {}, tbody);
// use idx to set odd/even css class
// create tds and the data that goes in them
});
}
});
I have also created a repeater, where I have an html template in a string form and use that to instantiate html for each row.
var htmlTemplate = '<div>${name}</div>'; // assumes name is in the data item
store.fetch({ // this is a dojo.data.ItemFileReadStore, but you cana dapt to the dojo.Store API
query: {},
onComplete: function(itms) {
dojo.forEach(itms, function(itm, idx) {
var expandedHtml = dojo.replace(htmlTemplate, itm);
// use dojo.place to put the html where you want it
});
}
});
You could also have a widget that you instantiate for each item.