I am making a sales invoice pdf using pdfmake. I want to put my company logo, and company details such as name, contact number, email, website etc in the header of the pdf document. I tried
header: "document header"
var docDefinition = {
header: 'simple text',
footer: {
columns: [
'Left part',
{ text: 'Right part', alignment: 'right' }
]
},
content: (...)
};
I can only add one pdfmake element. I want to add multiple-element in the header (and footer) of the document. Is it possible to add multiple-element? Is there any alternative way to achieve this?
[1] https://pdfmake.github.io/docs/document-definition-object/headers-footers/
I tried example from above url[1]. it doesn't mention multiple elements.
For adding multiple elements in header , you have to adjust page margin. It can be done as follow:
pageMargins: [ 40, 60, 40, 60 ],
You can change these values according to your requirements.
Just to throw this out there... I couldn't get the multi-element header to work with the example syntax on the pdf-make website. I think the custom header function requires a single-element return containing a columns array, not the content array itself.
docDefinition = {
header: function(currentPage, pageCount, pageSize) {
// computations...
return {
columns: [
{ text: 'My Title!', /* extra style attributes */},
{ text: 'My Subtitle!', /* extra style attributes */},
],
};
},
footer: 'blah blah blah',
content: [],
};
To add multiple elements (text, image, etc), you will need to add a customize function in your js. Example like below
customize: function (pdf) {
pdf['header']=(function() {
return {
columns: [
{
image: /*convert your image into base64 code and paste the code here to make the image work*/,
width: 10,
margin: [left, top, right, bottom]
},
{
text: ['Company Name\n Company Contact\n'],
bold: true,
alignment: 'center',
fontSize: 14,
margin: [L, T, R, B]
},
{
text: ['Company Email\n Company website\n'],
bold: true,
fontSize: 14,
margin: [L, T, R, B]
}
}
});
}
If you want to add for footer, you can just add another function for footer like
pdf['footer']=(function(){
{
text: ['Footer'],
bold: true,
fontSize: 14,
margin: [L, T, R, B]
}
});
Related
Made my own VSTS extension that returns a Grid with a list of bugs read using a wiql.
I want the (UI Control) Grid to include the bug title and hyperlink to the bug url so that it is possible to click on the title to jump to the bug. I could not find any possibility to do that, but I do not believe that it is not possible.
This is how I'm building my source to the grid:
var sourceArray = workItems.map(function (w) {
return [
w.id,
w.fields["System.Title"],
w.fields["System.State"],
w.fields["GrundfosScrum.gfSeverity"],
w.fields["GrundfosScrum.gfLikelihood"],
w.fields["System.AssignedTo"]];
});
And later:
var options = {
width: "100%",
height: "500px",
source: sourceArray,
columns: [
{ text: "ID", index: 0, width: 100, headerCss: "mystyle" },
{ text: "Title", index: 1, width: 200, headerCss: "mystyle" },
{ text: "State", index: 2, width: 100, headerCss: "mystyle" },
{ text: "Severity", index: 3, width: 200, headerCss: "mystyle" },
{ text: "Likelihood", index: 4, width: 200, headerCss: "mystyle" },
{ text: "Assigned To", index: 5, width: 300, headerCss: "mystyle" },
]
};
I tried to replace w.fields["System.Title"] with w.fields["System.Title"].link(w.url), the result was html hyperlink in the table instead of a hyperlink inside the grid.
Any ideas?
This is not supported by add link in the grid. But you can call Open row details method to to achieve the feature you want. Get the URL information and open a new window when the openRowDetail method is triggered.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Open Row Sample</title>
<script src="sdk/scripts/VSS.SDK.js"></script>
</head>
<body>
<script type="text/javascript">
VSS.init({
explicitNotifyLoaded: true,
usePlatformScripts: true,
usePlatformStyles: true
});
</script>
<h1>Open Row Sample</h1>
<div id="grid-container"></div>
<script type="text/javascript">
VSS.require(["VSS/Controls", "VSS/Controls/Grids"],
function (Controls, Grids) {
var dataSource = [];
dataSource.push({key: "VisualStudio", value: "https://www.visualstudio.com/"});
dataSource.push({key: "Bing", value: "https://www.bing.com/"});
var grid = Controls.create(Grids.Grid, $("#grid-container"), {
height: "1000px",
columns: [
{ text: "Property key", index: "key", width: 150 },
{ text: "Property value", index: "value", width: 600 }
],
source: dataSource,
openRowDetail: (index) => {
var info = grid.getRowData(index);
window.open(info.value);
}
});
VSS.notifyLoadSucceeded();
});
</script>
</body>
</html>
For anyone else is struggling with this like I was (as the documentation is pretty poor for the more granular stuff), I did it as follows.
Firstly, in the column definition in the later versions you just add a hrefIndex to the field you wish to bind e.g.
{ text: "Path", index: "path", width: 600, hrefIndex:'branchUrl' },
This works for the most part, but there doesn't appear to be (or at least, in the version I'm using) a binding for the target. So instead, I'd override the _drawCell function call as follows:
{ text: "Path", index: "path", width: 600, hrefIndex:'branchUrl', getCellContents : renderHref }
Where renderHref is:
var renderHref = function(rowInfo, dataIndex, expandedState, level, column, indentIndex, columnOrder){
var indent;
var cell = document.createElement('div');
cell.className = 'grid-cell';
var width = column.width || 20;
cell.style.width = isNaN(width) ? width : width + "px";
var jCell = $(cell);
var hrefText = this.getColumnValue(dataIndex,column.hrefIndex,-1);
var text = this.getColumnText(dataIndex,column,columnOrder);
jCell.append($("<a/>").attr("href", hrefText).attr('target','_blank').text(text));
return jCell;
};
Note that in my override I haven't bothered with the same logic as the original _drawCell for the indents etc., as I didn't need it.
This ensures that the hyperlink is rendered within the div container as a grid cell within the grid, and also allows you to set the target.
I need to change the text of the title of the tab in a TabPanel, but I don't want that this will affect every other TabPanel in the application, just this TabPanel.
I tried adding a CSS class by the cls property, by the itemCls property, and by this:
defaults: {
cls: 'aClass'
}
The CSS:
.aClass {
font-size: smaller;
}
But they all look the same:
Nothing seemed to work. How am I able to achieve that?
You should indeed use the cls property on your tabpanel and then have a custom CSS selector that would only point to that tabpanel:
See here: http://jsfiddle.net/49Dc8/
JS
Ext.require('Ext.tab.*');
Ext.onReady(function(){
// basic tabs 1, built from existing content
var tabs = Ext.createWidget('tabpanel', {
renderTo: 'tabs1',
cls: 'mytab',
width: 450,
plain: true,
activeTab: 0,
defaults :{
bodyPadding: 10
},
items: [{
contentEl:'script',
title: 'Short Text'
},{
contentEl:'markup',
title: 'Long Text'
}]
});
});
CSS
.mytab .x-tab-inner{
font-size: 13px;
}
At present I'm getting all the cells (with editable:true) in the row editable in which i clicked and not only the clicked the cell. The table is similar to the table in this link: http://www.ok-soft-gmbh.com/jqGrid/ClientsideEditing4.htm. I've gone through the link: http://www.trirand.com/jqgridwiki/doku.php?id=wiki:cell_editing, but didn't help (may be due to my fault in the way i tried) and also tried the answers given in stackoverflow related questions (used the attributes: cellEdit: true, cellsubmit: "clientArray").
Please help me using the above link as reference http://www.ok-soft-gmbh.com/jqGrid/ClientsideEditing4.htm (I think mainly the "onSelectRow", "ondblClickRow" functions need to be updated. i tried onSelectCell etc. but failed! ).
Thanks in advance.
If you need to use cell editing you have to include cellEdit: true in jqGrid definition. If you use local datatype then you should use cellsubmit: "clientArray" additionally. If you want to save data on the remote source you have to implement editing in your server code and specify cellurl option of jqGrid. The documentation describes what jqGrid send to the server on saving of cell.
I'm currently working on an Angular 2 app with Typescript, and I had a different need where I wanted to be able to click a row in the grid, but only have one cell editable. I didn't like the user experience where the user had to click the actual cell to edit it. Instead, clicking the row highlights the row and then makes the one cell editable. Here's a screenshot:
The trick was that I needed to set cellEdit to false on the grid and then set the individual column editable to true when declaring my column model array, and write a change event for the editoptions of the column. I also had to write code for the the onSelectRow event of the grid, to keep track of the current row selected and to restore the previous row selected. A snippet of the Typescript code is below:
private generateGrid() {
let colNames = ['id', 'Name', 'Total', 'Assigned', 'Distributed', 'Remaining', 'Total', 'Assigned', 'Remaining', 'Expiration'];
let self = this;
// declare variable to hold Id of last row selected in the grid
let lastRowId;
let colModel = [
{ name: 'id', key: true, hidden: true },
{ name: 'name' },
{ name: 'purchasedTotalCount', width: 35, align: 'center' },
{ name: 'purchasedAssignedCount', width: 35, align: 'center' },
{ name: 'purchasedDistributedCount', width: 35, align: 'center' },
{ name: 'purchasedRemainingCount', width: 35, align: 'center' },
// receivedTotalCount is the only editable cell;
// the custom change event works in conjunction with the onSelectRow event
// to get row editing to work, but only for this one cell as being editable;
// also note that cellEdit is set to false on the entire grid, otherwise it would
// require that the individual cell is selected in order to edit it, and not just
// anywhere on the row, which is the better user experience
{ name: 'receivedTotalCount',
width: 35,
align: 'center',
editable: true,
edittype: 'text',
editoptions: {
dataEvents: [
{
type: 'change', fn: function(e) {
//TODO: don't allow decimal numbers, or just round down
let count = parseInt(this.value);
if (isNaN(count) || count < 0 || count > 1000) {
alert('Value must be a whole number between 0 and 1000.');
} else {
self.updateLicenses(parseInt(lastRowId), count);
}
}
},
]
}
},
{ name: 'receivedAssignedCount', width: 35, align: 'center' },
{ name: 'receivedRemainingCount', width: 35, align: 'center' },
{ name: 'expirationDate', width: 45, align: 'center', formatter: 'date' }
];
jQuery('#licenseManagerGrid').jqGrid({
data: this.childTenants,
datatype: 'local',
colNames: colNames,
colModel: colModel,
altRows: true,
rowNum: 25,
rowList: [25, 50, 100],
width: 1200,
height: '100%',
viewrecords: true,
emptyrecords: '',
ignoreCase: true,
cellEdit: false, // must be false in order for row select with cell edit to work properly
cellsubmit: 'clientArray',
cellurl: 'clientArray',
editurl: 'clientArray',
pager: '#licenseManagerGridPager',
jsonReader: {
id: 'id',
repeatitems: false
},
// make the selected row editable and restore the previously-selected row back to what it was
onSelectRow: function(rowid, status) {
if (lastRowId === undefined) {
lastRowId = rowid;
}
else {
jQuery('#licenseManagerGrid').restoreRow(lastRowId);
lastRowId = rowid;
}
jQuery('#licenseManagerGrid').editRow(rowid, false);
},
});
}
Additionally, I wanted the escape key to allow the user to abort changes to the cell and then restore the cell to its previous state. This was accomplished with the following Angular 2 code in Typescript:
#Component({
selector: 'license-manager',
template: template,
styles: [style],
host: {
'(document:keydown)': 'handleKeyboardEvents($event)'
}
})
// handle keypress so a row can be restored if user presses Escape
private handleKeyboardEvents(event: KeyboardEvent) {
if (event.keyCode === 27) {
let selRow = jQuery('#licenseManagerGrid').jqGrid('getGridParam', 'selrow');
if (selRow) {
jQuery('#licenseManagerGrid').restoreRow(selRow);
}
}
}
I am new at Extjs and Sencha. i started to design my UI and i could successfully add an iconCls with buttons. now i need to add icon to a checkitem menue http://dev.sencha.com/deploy/ext-4.1.0-gpl/docs/index.html#!/api/Ext.menu.CheckItem
but i couldn't ! even though i use iconCls property.
anyone have done this before ?
If you just want the icon right next to the text, you can just insert an image after the menu item is rendered
Ext.create('Ext.menu.Menu', {
width: 100,
height: 200,
floating: false,
renderTo: Ext.getBody(),
items: [{
xtype: 'menucheckitem',
text: 'select all',
listeners: {
render: function(comp) {
Ext.DomHelper.insertAfter(comp.getEl().down(".x-menu-item-icon"), {
tag: 'img',
src: "http://flyosity.com/images/_blogentries/networkicon/stepfinal2.png",
width: 16,
height: 16
});
}
}
}]
});
Ideally, you'd create a plugin or a subclass so you can reuse this functionality. The above code does not realign the separator, it's single separator for the entire menu, but it should give you a head start
I'm trying to line up a menu that I've created using Ext.menu.Menu. As you can see below, the menu is displayed 1 pixel to the right of its parent.
What's the best way to get this perfectly aligned?. I've looked into getPostion() and setPosition() briefly and I'm not sure that's the correct way to do this.
My menu code is pretty basic:
var userMenu = new Ext.menu.Menu({
id: 'userMenu',
width: 120,
height: 70,
items: [
{
text: 'My Settings',
handler: settingsHandler
},
{
text: 'Sign out',
handler: signoutHandler
}
]
});
var menuHandler = function(e) {
userMenu.show('parent-menu');
};
Ext.get('parent-menu').on('click',menuHandler);
Is there anything that I can add here? Thanks in advance!
For now, was able to use jQuery after the menu is shown to move it:
var menuLeft = $('#userMenu').position().left;
$('#userMenu').css('left',(menuLeft-1)+"px");
Why call the show method?
You could just do the following presuming your Menu is on a toolbar.
var userMenu = new Ext.menu.Menu({
id: 'userMenu',
width: 120,
height: 70,
items: [
{
text: 'My Settings',
handler: settingsHandler
},
{
text: 'Sign out',
handler: signoutHandler
}
]
});
/*Define a toolbar */
tbar: [{
text: 'Menu',
menu: userMenu /*no need to call userMenu.show()*/
}]