I am using the jsPDF AutoTable plugin (v3.1.1) and my table needs 4 columns but the first row of my form has only 2 columns so I need to use colspans in the first row. AutoTable doesn't seem to do colspans right if the first row doesn't have all the columns there will be. If my first row contains 4 blank cells, everything works fine but I get an unnecessary row on the top of my table. Here's some code that demonstrates the issue:
var doc = new jsPDF();
var desiredDefinition = [
[{"content":"Field 1","colSpan":2}, {"content":"201901300654","colSpan":2}],
[{"content":"Field 2"},{"content":"Field 3"},{"content":"Field 4"},{"content":"Field 5"}],
];
doc.autoTable({ body: desiredDefinition });
var workaroundDefinition = [
[{"content":""},{"content":""},{"content":""},{"content":""}],
[{"content":"Field 1","colSpan":2}, {"content":"201901300654","colSpan":2}],
[{"content":"Field 2"},{"content":"Field 3"},{"content":"Field 4"},{"content":"Field 5"}],
];
doc.autoTable({ body: workaroundDefinition });
doc.save("table.pdf");
Here's a codepen with the issue: https://codepen.io/sirhcybe/pen/rgpKEJ
I played around with the columns property but couldn't find any way to tell AutoTable how many columns I need without creating an extra row. Is there a work around for this issue?
This has been marked as a bug in the jsPDF AutoTable repo:
https://github.com/simonbengtsson/jsPDF-AutoTable/issues/500
I did not find a decent workaround but since I am using my own fork of jsPDF AutoTable I was able to make the code fix described in the GitHub issue.
EDIT:
This was fixed as a bug in jsPDF-AutoTable v3.2.
Related
I've been working on this for a couple on days, and I can't find any answer to this issue.
I don't have a programmer background, so it might be an easy question for some of you.
The issue:
I have 5 Google Forms that fill 5 different Sheets in 1 Master Google Sheet.
--> When Google Form 1 is filled, there is a new line in sheet1
--> When Google Form 2 is filled, there is a new line in sheet2
--> When Google Form 3 is filled, there is a new line in sheet3
--> When Google Form 4 is filled, there is a new line in sheet4
--> When Google Form 5 is filled, there is a new line in sheet5
Now, I would need to be able to run some script (different ones) when a new line is added to each sheets.
The idea is:
--> When a new line is added to sheet1, do this.
--> When a new line is added to sheet2, do this.
.
.
.
I tried something like this (see below). But it doesn't return anything since there is no "Activesheet" when the google form is filled and add a new row by himself to Google sheet.
function onChange(event) {
var s = event.source.getActiveSheet();
var sName = s.getName();
Browser.msgBox(sName);
}
Question:
In other words, do you have a idea about how I can get the sheet that was edited by the google form, so that I can run specific script for each sheet when it gets modified ?
the onChange trigger does not fire on form submission, use the FormSubmit trigger instead
The related event objects are specified here.
The event object source is not available, but instead you can use the event object range in combination with getSheet().
Sample:
function onChange(event) {
var s = event.range.getSheet();
var sName = s.getName();
Browser.msgBox(sName);
}
I am using mat table below structure in my project.
**<mat-paginator></mat-paginator>
<mat-table></mat-table>
<mat-paginator></mat-paginator>**
In my ts file look like
**#ViewChild(MatPaginator) paginator: MatPaginator;**
**Actual problem is first one paginator is working fine and trigger events correctly.
bottom mat paginator is not working and event is not triggered ,also page,pageIndex is not
refelecting from first paginator**
#ViewChild queries only one component reference. But you have two components in your view. So, you have to query both the components separately, as shown below.
<mat-paginator #topPageinator></mat-paginator>
<mat-table></mat-table>
<mat-paginator #bottomPageinator></mat-paginator>
#ViewChild('topPageinator') paginator: MatPaginator;
#ViewChild('bottomPageinator') paginator: MatPaginator;
OR
You can use #ViewChildren instead of #ViewChild
#ViewChildren(MatPaginator) paginators: QueryList<MatPaginator>;
I am trying to get my Material table to first load with a column sorted and have the header arrow set to show that it is sorted. I added the following to my table to sort the table by default when loaded:
<table matSort matSortActive="name" matSortStart="asc" matSortDisableClear>
This seems to work and the data is sorted but the header arrow does no reflect the sort.
You can define the default sort before you set the sorter of your datasource.
ngOnInit() {
this.dataSource.paginator = this.paginator;
this.sort.sort(({ id: 'name', start: 'asc'}) as MatSortable);
this.dataSource.sort = this.sort;
}
Working Stackblitz example
There are some known issues with mat sort arrow not being displayed.
One issue, while not exactly the same as yours, provides a working, programmatic solution: https://github.com/angular/components/issues/10242
It was the only workaround that worked for me.
For specific code see this answer: https://stackoverflow.com/a/65501143/407758
I'm trying to make a chart where a couple of the columns need to be floating. How can this be achieved?
Thanks.
This is a waterfall chart, which is not available in Chart.js. See the issue on Github.
However, someone has made such a plugin for Chart.js, available here.
Usage of this plugin is simple, like so:
import waterFallPlugin from 'chartjs-plugin-waterfall';
var chart = new Chart(ctx, {
plugins: [waterFallPlugin]
});
In my application I have a <p:datatable> with rowExpansion column. I have a requirement to open a single row at a time. If anyone tries to expand second row, remaining first row expanded then one message will be generated saying First close the expanded row and then open another row.
How this can be implemented ? Any pointer will be very helpful to me. Thanks
As of 2015, and this question is first in Google search results, I want to add that for PrimeFaces 5.1, there is dataTable attribute rowExpandMode, when set to single - allows only one row to be shown. Example:
<p:dataTable var="line" value="#{bean.lines}" rowExpandMode="single">
It's not exactly what was asked, but I hope that it'll help to others.
You can use (I have tested it in mojarra 2.1.20 and Primefaces 3.5 and it works fine) the following solution which calls a JavaScript function when the row is expanded. When clicking on a second row, and there is another expanded row, it will trigger a click event, which will in turn collapse the previously opened row.
xhtml:
<p:ajax event="rowToggle" onstart="test();"/>
Javascript:
<script type="text/javascript">
function test(){
var i = $('.ui-row-toggler.ui-icon-circle-triangle-s').length;
if(i == 1){return;}
$('.ui-row-toggler.ui-icon-circle-triangle-s').trigger('click');
}
</script>
Check out the datatable.js file in Primefaces here. There is a javascript function called toggleExpansion.
Maybe you can override this function and call the original one when no row is expanded and show a message when another row is already expanded (and not call the original one).
Just an idea...
you can achieve this with the help of this custom method.
give 'togglerClass' this class like
<pou:column styleClass="togglerClass" style="width:16px">
<pou:rowToggler/>
</pou:column>
JavaScript code here;
function prodsToggler() {
$('.togglerClass div').click(function () {
var currentTr = $(this).closest("tr");
var $trs = $('.togglerClass').closest("tr").not(currentTr);
$trs.each(function (index, el) {
var $this = $(el),
$next = $this.next(".ui-expanded-row-content");
$this.removeClass("ui-expanded-row");
$next.remove();
$this.find(".ui-row-toggler").removeClass("ui-icon-circle-triangle-s");
});
});
}
call this method in windows ready.