I just went through this playground of pdfMake pdf creator engine and it nicely explains how to print a table using pdfMAke as,
table: {
headerRows: 1,
body: [
[{ text: 'Header 1', style: 'tableHeader' }, { text: 'Header 2', style: 'tableHeader'}, { text: 'Header 3', style: 'tableHeader' }],
[ 'Sample value 1', 'Sample value 2', 'Sample value 3' ],
[ 'Sample value 1', 'Sample value 2', 'Sample value 3' ],
[ 'Sample value 1', 'Sample value 2', 'Sample value 3' ],
[ 'Sample value 1', 'Sample value 2', 'Sample value 3' ],
[ 'Sample value 1', 'Sample value 2', 'Sample value 3' ],
]
},
where headerRows: 1 will consider the first row as table header. Is there any ways to consider the third row as header using this engine so that the third row will repeat as header in the next consecutive pages of pdf document.
Also is it possible to draw borders around columns which drawn below.
columns: [
{ text: 'First Column goes here.'},
{ text: 'Second column goes here.'},
{ text: 'Third column goes here.' }
]
late answer but unfortunately that's impossible, only the first row can be used as header.
As a workaround, I would suggest building tables by yourself, allowing you to repeat any line you want. It's more constraining tho, since you need to handle the overflows manually to insure the repetition of the table on each page.
Related
No matter what I tried, I'm not able to align table inside of second column.
var docDefinition = {
content: [
{
columns: [
{ text: 'Column 1',
},
[
{
text: 'Column 2',
alignment: 'right' // WORKS
},
{
alignment: 'right', // NO EFFECT
table: {
alignment: 'right', // NO EFFECT
body: [
['Date', '07/21/2017' ],
['Representative', 'Test' ]
]
}
}
]
]
}
]
};
pdfMake.createPdf(docDefinition).download();
https://jsfiddle.net/8kqnrduw/
I'm looking for any possible workarounds.
Please help
Expected result:
How do you think about this idea?
{
alignment: 'right',
columns: [
{
stack: [
{ table: {....}}
]
}
]
}
Your problem is not related to alignment, it is about nested columns and column widths. Alignment in pdfmake is used for aligning texts, just like you used alignment for text: 'Column 2' and alignment for every text inside the table cells.
In your case, you created two columns with being '*' star-width (fills remaining width) each, which is the default column width. So, you have a 50% width column with text: 'Column 1' and 50% width column with text: 'Column 2' and a table (which is not exactly what you desire) below text: 'Column 2'.
So, what you should do is you need to create a nested columns structure within the section just below second column text: 'Column 2' which is already half width of the page. This nested columns structure will involve two columns; one for the table, having width exactly as wide as the elements inside the table, and another column with empty content just to keep the table away in its proper place.
The working code for your expected result is below. You may also see the screenshot here for the code and its output at the pfdmake playground.
var docDefinition = {
content: [
{
columns: [
{
text: 'Column 1',
},
[
{
text: 'Column 2',
alignment: 'right' // Aligns 'Column 2' text to right
},
{
columns: [
{
text:'',
width: '*'
},
{
table: {
body: [
['Date', '07/21/2017' ],
['Representative', 'Test' ]
]
},
alignment: 'right', // Optional, for body texts
width: 'auto' // Changes width of the table
}
]
}
]
]
}
]
}
Try to give like this:
body: [
[{text: 'Date', alignment: 'right'}, {text: '07/21/2017', alignment: 'right'}],
[{text: 'Representative', alignment: 'right'}, {text: 'Test', alignment: 'right'}]
]
So I have this code in view:
<div class="form-group" ng-repeat="columnHeader in form.table[fakeForm.currentFormIndex].columns track by $index">
<label for="">Column <%$index%></label>
<div class="fg-line">
<input type="text" class="form-control"
placeholder="Column Header <%index%>"
ng-model="form['table'][fakeForm.currentFormIndex]['columns'][$index].name"/>
</div>
</div>
This targets the 'current active' appended element. But whenever I uses this, it also modifies other appended elements with same attributes even each of those elements has unique key assigned to them.
Then I'm pushing this data set with a new key.
'columns':[{name:'Column 1'}, {name:'Column 2'}, {name:'Column 3'}],
'rows':[
{
label:'Row 1',
columns:[
{
label:'Row 1 Column 1'
},
{
label:'Row 1 Column 2'
},
{
label:'Row 1 Column 3'
}
]
},
{
label:'Row 2',
columns:[
{
label:'Row 2 Column 1'
},
{
label:'Row 2 Column 2'
},
{
label:'Row 2 Column 3'
}
]
},
{
label:'Row 3',
columns:[
{
label:'Row 3 Column 1'
},
{
label:'Row 3 Column 2'
},
{
label:'Row 3 Column 3'
}
]
}
]
so for example I have two 'table' key, it will look like
table:{
0:....
1:....
}
I am trying to make a little proof of concept in ExtJS. I would like to add a panel with a tree into one of my tabs, but I can't seem to find the answer in the API.
The examples look like this
var tabs = Ext.create('Ext.tab.Panel', {
items: [
{
title: 'Tab 1',
html : 'A simple tab'
},
{
title: 'Tab 2',
html : 'Another one'
}
],
renderTo : Ext.getBody()
});
However I would like something like this :
var treegrid = Ext.create('KitchenSink.view.tree.TreeGrid', {....});
var tabs = Ext.create('Ext.tab.Panel', {
items: [
{
title: 'Tab 1',
html : 'A simple tab'
},
{
title: 'Tab 2',
myComponent : treegrid
}
],
renderTo : Ext.getBody()
});
I would like to know what i should put at myComponent. Obviously myComponent is not correct.
Sorry if this question seems really naive. I am VERY new to ExtJS.
The grid is a subclass of panel, so it just goes in directly under the tabs:
new Ext.tab.Panel({
items: [{
title: 'My Grid',
xtype: 'gridpanel',
columns: [],
// Other grid stuff
}]
});
var items = [{
title: 'sample 1',
image: 'http://www.lorempixel.com/700/600/'
}, {
title: 'sample 2',
image: 'http://www.lorempixel.com/900/1200/'
}, {
title: 'sample 3',
image: 'http://www.lorempixel.com/400/300/'
}, {
title: 'sample 4',
image: 'http://www.lorempixel.com/600/600/'
}, {
title: 'sample 5',
image: 'http://www.lorempixel.com/400/310/'
}, {
title: 'sample 6',
image: 'http://www.lorempixel.com/410/300/'
}, {
title: 'sample 7',
image: 'http://www.lorempixel.com/500/300/'
}, {
title: 'sample 8',
image: 'http://www.lorempixel.com/300/300/'
}, {
title: 'sample 9',
image: 'http://www.lorempixel.com/450/320/'
}, {
title: 'sample 10',
image: 'http://www.lorempixel.com/500/400/'
}];
Instead of hard coding this, I would like to create this exact same array dynamically - here is my code.
for(var key in pics) {
var items[];
items.push(pics[key].source);
}
I dont think this works because it just pushes the images into a standard array like this:
items = [1.jpg, 2.jpg....];
How can I accomplish this,cheers.
I don't know where you get the img url and i assume pics.source is the title:
var items = [];
for(var key in pics) {
items.push({title: pics[key].source, image: <img url>});
}
I am still at upgrading tinymce version 3 to version 4.
The problem i have is with the usage of the toolbar ui.
I am able to create a listbox with several entries, but i do not know how to add listbox elements after the listbox has been created.
With tinymce3 it was easy to add a list item to a list even after creation of that list.
I do not know how to achieve this with tinymce 4.
What do i need to do? Any suggestions?
Here the code i use to create the listbox:
editor.addButton('my_listbox', {
type: 'listbox',
text: 'my_listbox_desc',
icon: false,
onselect: function(e) {
editor.insertContent(this.value());
},
values:[
{text: 'Menu item 1', value: 'Some text 1'},
{text: 'Menu item 2', value: 'Some text 2'},
{text: 'Menu item 3', value: 'Some text 3'}
],
onPostRender: function() {
// Select the third item by default
editor.irstyle_control = this;
this.value('Some text 3');
}
});
I had a same issue... After visiting many topics on their forum, I came to write something like this
tinymce.PluginManager.add('sampleWithEditable', function(ed, url) {
var me=this, dynamicallyEditable;
function getValues() {
return ed.settings.myKeyValueList;
}
ed.addButton('my_listbox', {
type: 'listbox',
text: 'my_listbox_desc',
icon: false,
onselect: function(e) {
ed.insertContent(this.value());
},
values:[
{text: 'Menu item 1', value: 'Some text 1'},
{text: 'Menu item 2', value: 'Some text 2'},
{text: 'Menu item 3', value: 'Some text 3'}
],
onPostRender: function() {
// Select the third item by default
ed.irstyle_control = this;
this.value('Some text 3');
dynamicallyEditable=this
}});
me.refresh = function() {
if(dynamicallyEditable.dynamicallyAdded){
dynamicallyEditable.dynamicallyAdded.remove();
dynamicallyEditable.dynamicallyAdded = null;
}
dynamicallyEditable.settings.values = dynamicallyEditable.settings.dynamicallyAdded = getValues();
};
}
Then From the ajax success method
tinyMCE.activeEditor.settings.myKeyValueList = [{text: 'text_here', value: 'value_there'}];
tinyMCE.activeEditor.plugins.sampleWithEditable.refresh();